diff --git a/packages/learn/.eslintignore b/packages/learn/.eslintignore
new file mode 100644
index 0000000000..bd1e30c2d6
--- /dev/null
+++ b/packages/learn/.eslintignore
@@ -0,0 +1,5 @@
+public/
+.cache/
+node_modules/
+*/node_modules/
+static/
\ No newline at end of file
diff --git a/packages/learn/.eslintrc b/packages/learn/.eslintrc
new file mode 100644
index 0000000000..9624f04f54
--- /dev/null
+++ b/packages/learn/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "freecodecamp"
+}
\ No newline at end of file
diff --git a/packages/learn/.gitignore b/packages/learn/.gitignore
index 6439f14d96..b32784b612 100644
--- a/packages/learn/.gitignore
+++ b/packages/learn/.gitignore
@@ -9,3 +9,8 @@ yarn-error.log
 
 # Build directory
 /public
+static/js
+
+seed/tmp/
+seed/transformed
+seed/ready
\ No newline at end of file
diff --git a/packages/learn/gatsby-browser.js b/packages/learn/gatsby-browser.js
index d1689260aa..20aedba6aa 100644
--- a/packages/learn/gatsby-browser.js
+++ b/packages/learn/gatsby-browser.js
@@ -1,7 +1,22 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';
 
- // You can delete this file if you're not using it
\ No newline at end of file
+import { createStore } from './src/redux/store';
+
+exports.replaceRouterComponent = ({ history }) => {
+  const store = createStore(history || {});
+
+  const ConnectedRouterWrapper = ({ children }) => (
+    <Provider store={store}>
+      <ConnectedRouter history={history}>{children}</ConnectedRouter>
+    </Provider>
+  );
+  ConnectedRouterWrapper.displayName = 'ConnectedRouterWrapper';
+  ConnectedRouterWrapper.propTypes = {
+    children: PropTypes.node
+  };
+
+  return ConnectedRouterWrapper;
+};
diff --git a/packages/learn/gatsby-config.js b/packages/learn/gatsby-config.js
index d28d4f375c..ccff2bb4d0 100644
--- a/packages/learn/gatsby-config.js
+++ b/packages/learn/gatsby-config.js
@@ -1,21 +1,33 @@
+require('dotenv').config();
+
 const path = require('path');
-const { getChallengesByFile } = require('../seed/getChallenges');
+const { buildChallenges$ } = require('./seed/buildChallenges');
 
 module.exports = {
   siteMetadata: {
-    title: 'freeCodeCamp | Learn to code and help non-profits',
+    title: 'freeCodeCamp | Learn to code and help non-profits ',
     siteUrl: 'https://learn.freecodecamp.org'
   },
+  proxy: {
+    prefix: '/',
+    url: 'http://localhost:3000'
+  },
   plugins: [
+    'gatsby-plugin-react-next',
     'gatsby-plugin-react-helmet',
     {
       resolve: 'fcc-source-challenges',
       options: {
         name: 'challenges',
-        path: path.resolve(__dirname, '../seed/challenges'),
-        source: getChallengesByFile
+        path: path.resolve(__dirname, './seed/challenges'),
+        source: buildChallenges$
       }
     },
-    'gatsby-transformer-json'
+    {
+      resolve: 'gatsby-plugin-google-fonts',
+      options: {
+        fonts: ['Lato:400,400i,700']
+      }
+    }
   ]
 };
diff --git a/packages/learn/gatsby-node.js b/packages/learn/gatsby-node.js
index 201108cf4d..30ca0b6b27 100644
--- a/packages/learn/gatsby-node.js
+++ b/packages/learn/gatsby-node.js
@@ -1,7 +1,86 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
+const path = require('path');
+const { dasherize } = require('./utils');
+const { viewTypes } = require('./utils/challengeTypes');
+const { blockNameify } = require('./utils/blockNameify');
 
- // You can delete this file if you're not using it
\ No newline at end of file
+const views = {
+  // backend: BackEnd,
+  classic: path.resolve(
+    __dirname,
+    './src/templates/Challenges/views/classic/Show.js'
+  ),
+  // modern: Modern,
+  project: path.resolve(
+    __dirname,
+    './src/templates/Challenges/views/project/Show.js'
+  ),
+  // quiz: Quiz,
+  // simple: Project,
+  step: path.resolve(__dirname, './src/templates/Challenges/views/step/Show.js')
+  // invalid: NotFound
+};
+
+exports.onCreateNode = function onCreateNode({ node, boundActionCreators }) {
+  const { createNodeField } = boundActionCreators;
+  if (node.internal.type === 'ChallengeNode') {
+    const { tests = [], block, title, superBlock } = node;
+
+    const slug = `/${dasherize(superBlock)}/${dasherize(block)}/${dasherize(
+      title
+    )}`;
+    createNodeField({ node, name: 'slug', value: slug });
+    createNodeField({ node, name: 'blockName', value: blockNameify(block) });
+    // TODO: Normalise tests to { test: '', testString: ''}?
+    createNodeField({ node, name: 'tests', value: tests });
+  }
+};
+
+exports.createPages = ({ graphql, boundActionCreators }) => {
+  const { createPage } = boundActionCreators;
+
+  return new Promise((resolve, reject) => {
+    // Query for all markdown "nodes" and for the slug we previously created.
+    resolve(
+      graphql(`
+        {
+          allChallengeNode(sort: { fields: [superOrder, order, suborder] }) {
+            edges {
+              node {
+                challengeType
+                id
+                fields {
+                  slug
+                }
+              }
+            }
+          }
+        }
+      `).then(result => {
+        if (result.errors) {
+          console.log(result.errors);
+          reject(result.errors);
+        }
+
+        // Create challenge pages.
+        result.data.allChallengeNode.edges.forEach((edge, index, thisArray) => {
+          const { fields: { slug }, challengeType, id } = edge.node;
+          const next = thisArray[index + 1];
+          const nextChallengePath = next ? next.node.fields.slug : '/';
+          createPage({
+            path: slug,
+            component: views[viewTypes[challengeType]],
+            context: {
+              challengeMeta: {
+                nextChallengePath,
+                id
+              },
+              slug
+            }
+          });
+        });
+
+        return;
+      })
+    );
+  });
+};
diff --git a/packages/learn/gatsby-ssr.js b/packages/learn/gatsby-ssr.js
index cdad0942e0..ede5d71f75 100644
--- a/packages/learn/gatsby-ssr.js
+++ b/packages/learn/gatsby-ssr.js
@@ -1,7 +1,18 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
+import React from 'react';
+import { Provider } from 'react-redux';
+import { renderToString } from 'react-dom/server';
 
- // You can delete this file if you're not using it
\ No newline at end of file
+import { createStore } from './src/redux/store';
+
+exports.replaceRenderer = ({
+  history,
+  bodyComponent,
+  replaceBodyHTMLString
+}) => {
+  const store = createStore(history);
+
+  const ConnectedBody = () => (
+    <Provider store={store}>{bodyComponent}</Provider>
+  );
+  replaceBodyHTMLString(renderToString(<ConnectedBody />));
+};
diff --git a/packages/learn/package.json b/packages/learn/package.json
index 5078ea80d3..70c555a875 100644
--- a/packages/learn/package.json
+++ b/packages/learn/package.json
@@ -4,28 +4,65 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
+    "adler32": "^0.1.7",
+    "babel-core": "^6.26.0",
+    "babel-standalone": "^6.26.0",
+    "brace": "^0.11.1",
+    "chai": "^4.1.2",
+    "codemirror": "^5.36.0",
+    "debug": "^3.1.0",
     "dotenv": "^5.0.1",
-    "gatsby": "^1.9.238",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-15": "^1.0.5",
+    "gatsby": "^1.9.243",
     "gatsby-link": "^1.6.39",
+    "gatsby-plugin-google-fonts": "^0.0.4",
     "gatsby-plugin-react-helmet": "^2.0.8",
+    "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-source-filesystem": "^1.5.27",
     "gatsby-source-mongodb": "^1.5.19",
     "gatsby-transformer-json": "^1.0.16",
+    "lodash": "^4.17.5",
+    "loop-protect": "^2.1.6",
     "mongodb": "^3.0.5",
+    "react-bootstrap": "^0.32.1",
+    "react-codemirror2": "^4.2.1",
     "react-helmet": "^5.2.0",
-    "rxjs": "^5.5.7"
+    "react-redux": "^5.0.7",
+    "react-reflex": "^2.2.1",
+    "react-router-redux": "^5.0.0-alpha.9",
+    "react-test-renderer": "^16.3.1",
+    "redux": "^3.7.2",
+    "redux-actions": "^2.3.0",
+    "redux-observable": "^0.18.0",
+    "reselect": "^3.0.1",
+    "rxjs": "^5.5.7",
+    "uglifyjs-webpack-plugin": "^1.2.4"
   },
   "keywords": [
     "gatsby"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --write '{src,plugins}/**/*.js'",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "yarn build:frame-runner && gatsby build",
+    "build:frame-runner": "webpack --config ./webpack-frame-runner.js",
+    "build:loop-protect": "webpack --config ./webpack-loop-protect.js",
+    "develop": "NODE_ENV=production yarn build:frame-runner && gatsby develop",
+    "format": "yarn format:gatsby && yarn format:src",
+    "format:gatsby": "prettier --write './gatsby*.js'",
+    "format:src": "prettier --write './src/**/*.js'",
+    "lint": "yarn lint:gatsby && yarn lint:src",
+    "lint:gatsby": "eslint ./gatsby*.js --fix",
+    "lint:src": "eslint ./src . --fix",
+    "test": "yarn format && yarn lint"
   },
   "devDependencies": {
+    "babel-eslint": "^8.2.2",
+    "eslint": "^4.19.1",
+    "eslint-config-freecodecamp": "^1.1.1",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-prefer-object-spread": "^1.2.1",
+    "eslint-plugin-react": "^7.7.0",
     "prettier": "^1.11.1"
   }
 }
diff --git a/packages/learn/plugins/fcc-source-challenges/create-Challenge-nodes.js b/packages/learn/plugins/fcc-source-challenges/create-Challenge-nodes.js
index 174f0f60a9..6f81a91732 100644
--- a/packages/learn/plugins/fcc-source-challenges/create-Challenge-nodes.js
+++ b/packages/learn/plugins/fcc-source-challenges/create-Challenge-nodes.js
@@ -1,38 +1,38 @@
 const crypto = require('crypto');
 
-function createChallengeNodes(
-  path,
-  pluginOptions = {}
-) {
-  const { source } = pluginOptions;
-  return new Promise(resolve => {
-    const challengeNodes = source(path)
-    .reduce((nodes, { challenges, name }) => {
-      const challengeNodes = challenges.map(challenge => {
-        const contentDigest = crypto
-        .createHash('md5')
-        .update(JSON.stringify(challenge))
-        .digest('hex');
-        const internal = {
-          contentDigest,
-          type: 'ChallengeNode'
-        };
+function createChallengeNodes(challenge, reporter) {
+  if (typeof challenge.description[0] !== 'string') {
+    reporter.panic(`
 
-        return JSON.parse(
-          JSON.stringify({
-            id: challenge.id,
-            children: [],
-            parent: null,
-            internal,
-            sourceInstanceName: pluginOptions.name || '__PROGRAMATTIC__',
-            ...challenge
-          })
-        );
-      });
-      return nodes.concat(challengeNodes);
-    }, []);
-    resolve(challengeNodes);
-  });
+    ${challenge.title} has a description that will break things!
+
+    `);
   }
+  const contentDigest = crypto
+    .createHash('md5')
+    .update(JSON.stringify(challenge))
+    .digest('hex');
+  const internal = {
+    contentDigest,
+    type: 'ChallengeNode'
+  };
 
-  exports.createChallengeNodes = createChallengeNodes;
+  /* eslint-disable prefer-object-spread/prefer-object-spread */
+  return JSON.parse(
+    JSON.stringify(
+      Object.assign(
+        {},
+        {
+          id: challenge.id + ' >>>> ChallengeNode',
+          children: [],
+          parent: null,
+          internal,
+          sourceInstanceName: 'challenge'
+        },
+        challenge
+      )
+    )
+  );
+}
+
+exports.createChallengeNodes = createChallengeNodes;
diff --git a/packages/learn/plugins/fcc-source-challenges/extend-file-node.js b/packages/learn/plugins/fcc-source-challenges/extend-file-node.js
deleted file mode 100644
index 31ded304fb..0000000000
--- a/packages/learn/plugins/fcc-source-challenges/extend-file-node.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const { GraphQLString } = require('graphql');
-const fs = require('fs-extra');
-const path = require('path');
-
-module.exports = ({ type, getNodeAndSavePathDependency, pathPrefix = '' }) => {
-  if (type.name !== 'File') {
-    return {};
-  }
-
-  return {
-    publicURL: {
-      type: GraphQLString,
-      args: {},
-      description: 'Copy file to static directory and return public url to it',
-      resolve: (file, fieldArgs, context) => {
-        const details = getNodeAndSavePathDependency(file.id, context.path);
-        const fileName = `${file.name}-${file.internal.contentDigest}${
-          details.ext
-        }`;
-
-        const publicPath = path.join(
-          process.cwd(),
-          'public',
-          'static',
-          fileName
-        );
-
-        if (!fs.existsSync(publicPath)) {
-          fs.copy(details.absolutePath, publicPath, err => {
-            if (err) {
-              console.error(
-                `error copying file from ${
-                  details.absolutePath
-                } to ${publicPath}`,
-                err
-              );
-            }
-          });
-        }
-
-        return `${pathPrefix}/static/${fileName}`;
-      }
-    }
-  };
-};
diff --git a/packages/learn/plugins/fcc-source-challenges/gatsby-node.js b/packages/learn/plugins/fcc-source-challenges/gatsby-node.js
index 2a9cafbd5b..09bd9f6375 100644
--- a/packages/learn/plugins/fcc-source-challenges/gatsby-node.js
+++ b/packages/learn/plugins/fcc-source-challenges/gatsby-node.js
@@ -1,12 +1,9 @@
 const chokidar = require('chokidar');
 const fs = require('fs-extra');
 
-const { createId, createChallengeNodes } = require('./create-Challenge-nodes');
+const { createChallengeNodes } = require('./create-Challenge-nodes');
 
-exports.sourceNodes = (
-  { boundActionCreators, getNode, reporter },
-  pluginOptions
-) => {
+exports.sourceNodes = ({ boundActionCreators, reporter }, pluginOptions) => {
   if (!(pluginOptions && pluginOptions.path)) {
     reporter.panic(`
 "path" is a required option for gatsby-source-filesystem
@@ -29,8 +26,8 @@ Please use the path to the seed directory.
 that delivers challenge files to the plugin
       `);
   }
-
-  const { createNode, deleteNode } = boundActionCreators;
+  // TODO: Add live seed updates
+  const { createNode } = boundActionCreators;
 
   let ready = false;
 
@@ -45,11 +42,14 @@ that delivers challenge files to the plugin
       '../**/dist/**'
     ]
   });
+  const { source } = pluginOptions;
+  const createAndProcessNodes = () =>
+    source()
+      .map(nodes => nodes.map(node => createChallengeNodes(node, reporter)))
+      .map(nodes => nodes.map(node => createNode(node)))
+      .subscribe();
 
-  const createAndProcessNodes = path =>
-    createChallengeNodes(path, pluginOptions).then(nodes => nodes.forEach(node => createNode(node))
-    );
-
+  createAndProcessNodes();
   // For every path that is reported before the 'ready' event, we throw them
   // into a queue and then flush the queue when 'ready' event arrives.
   // After 'ready', we handle the 'add' event without putting it into a queue.
@@ -60,44 +60,20 @@ that delivers challenge files to the plugin
     return Promise.all(queue.map(createAndProcessNodes));
   };
 
-  watcher.on('add', path => {
-    if (ready) {
-      reporter.info(`added file at ${path}`);
-      createAndProcessNodes(path).catch(err => reporter.error(err));
-    } else {
-      pathQueue.push(path);
-    }
-  });
+  // watcher.on('change', path => {
+  //   reporter.info(`changed file at ${path}`);
+  //   createAndProcessNodes().catch(err => reporter.error(err));
+  // });
 
-  watcher.on('change', path => {
-    reporter.info(`changed file at ${path}`);
-    createAndProcessNodes(path).catch(err => reporter.error(err));
-  });
-
-  watcher.on('unlink', path => {
-    reporter.info(`file deleted at ${path}`);
-    const node = getNode(createId(path));
-    // It's possible the file node was never created as sometimes tools will
-    // write and then immediately delete temporary files to the file system.
-    if (node) {
-      deleteNode(node.id, node);
-    }
-  });
-
-  watcher.on('addDir', path => {
-    if (ready) {
-      reporter.info(`added directory at ${path}`);
-      createAndProcessNodes(path).catch(err => reporter.error(err));
-    } else {
-      pathQueue.push(path);
-    }
-  });
-
-  watcher.on('unlinkDir', path => {
-    reporter.info(`directory deleted at ${path}`);
-    const node = getNode(createId(path));
-    deleteNode(node.id, node);
-  });
+  // watcher.on('unlink', path => {
+  //   reporter.info(`file deleted at ${path}`);
+  //   const node = getNode(createId(path));
+  //   // It's possible the file node was never created as sometimes tools will
+  //   // write and then immediately delete temporary files to the file system.
+  //   if (node) {
+  //     deleteNode(node.id, node);
+  //   }
+  // });
 
   return new Promise((resolve, reject) => {
     watcher.on('ready', () => {
diff --git a/packages/learn/seed/buildChallenges.js b/packages/learn/seed/buildChallenges.js
new file mode 100644
index 0000000000..a9b7f623db
--- /dev/null
+++ b/packages/learn/seed/buildChallenges.js
@@ -0,0 +1,126 @@
+/* eslint-disable no-process-exit */
+require('babel-register');
+require('dotenv').load();
+const adler32 = require('adler32');
+
+const Rx = require('rxjs');
+const _ = require('lodash');
+const utils = require('../utils');
+const getChallenges = require('./getChallenges');
+const createDebugger = require('debug');
+
+const log = createDebugger('fcc:seed');
+// force logger to always output
+// this may be brittle
+log.enabled = true;
+
+const dasherize = utils.dasherize;
+const nameify = utils.nameify;
+const Observable = Rx.Observable;
+
+const arrToString = arr =>
+  Array.isArray(arr) ? arr.join('\n') : _.toString(arr);
+
+exports.buildChallenges$ = function buildChallenges$() {
+  return Observable.from(getChallenges()).map(function(challengeSpec) {
+    const order = challengeSpec.order;
+    const blockName = challengeSpec.name;
+    const superBlock = challengeSpec.superBlock;
+    const superOrder = challengeSpec.superOrder;
+    const isBeta = !!challengeSpec.isBeta;
+    const isComingSoon = !!challengeSpec.isComingSoon;
+    const fileName = challengeSpec.fileName;
+    const helpRoom = challengeSpec.helpRoom || 'Help';
+    const time = challengeSpec.time;
+    const isLocked = !!challengeSpec.isLocked;
+    const message = challengeSpec.message;
+    const required = challengeSpec.required || [];
+    const template = challengeSpec.template;
+    const isPrivate = !!challengeSpec.isPrivate;
+
+    // challenge file has no challenges...
+    if (challengeSpec.challenges.length === 0) {
+      return Rx.Observable.of([{ block: 'empty ' + blockName }]);
+    }
+
+    const block = {
+      title: blockName,
+      name: nameify(blockName),
+      dashedName: dasherize(blockName),
+      superOrder,
+      superBlock,
+      superBlockMessage: message,
+      order,
+      time,
+      isLocked,
+      isPrivate
+    };
+
+    return challengeSpec.challenges.map(function(challenge, index) {
+      challenge.name = nameify(challenge.title);
+
+      challenge.dashedName = dasherize(challenge.name);
+
+      challenge.checksum = adler32.sum(
+        Buffer(
+          challenge.title +
+            JSON.stringify(challenge.description) +
+            JSON.stringify(challenge.challengeSeed) +
+            JSON.stringify(challenge.tests)
+        )
+      );
+
+      if (challenge.files) {
+        challenge.files = _.reduce(
+          challenge.files,
+          (map, file) => {
+            map[file.key] = {
+              ...file,
+              head: arrToString(file.head),
+              contents: arrToString(file.contents),
+              tail: arrToString(file.tail)
+            };
+            return map;
+          },
+          {}
+        );
+      }
+      challenge.fileName = fileName;
+      challenge.helpRoom = helpRoom;
+      challenge.order = order;
+      challenge.suborder = index + 1;
+      challenge.block = dasherize(blockName);
+      challenge.blockId = block.id;
+      challenge.isBeta = challenge.isBeta || isBeta;
+      challenge.isComingSoon = challenge.isComingSoon || isComingSoon;
+      challenge.isLocked = challenge.isLocked || isLocked;
+      challenge.isPrivate = challenge.isPrivate || isPrivate;
+      challenge.isRequired = !!challenge.isRequired;
+      challenge.time = challengeSpec.time;
+      challenge.superOrder = superOrder;
+      challenge.superBlock = superBlock
+        .split('-')
+        .map(function(word) {
+          return _.capitalize(word);
+        })
+        .join(' ');
+      challenge.required = (challenge.required || []).concat(required);
+      challenge.template = challenge.template || template;
+
+      return _.omit(challenge, [
+        'betaSolutions',
+        'betaTests',
+        'hints',
+        'MDNlinks',
+        'null',
+        'rawSolutions',
+        'react',
+        'reactRedux',
+        'redux',
+        'releasedOn',
+        'translations',
+        'type'
+      ]);
+    });
+  });
+};
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json b/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json
index 7d23f14510..0288bcc303 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json
@@ -4,34 +4,6 @@
   "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.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "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.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "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.",
-        "",
-        "@@STEP@@"
-      ],
-      "releasedOn": "Feb 17, 2017",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {}
-    },
     {
       "id": "587d774c367417b2b2512a9c",
       "title": "Add a Text Alternative to Images for Visually Impaired Accessibility",
@@ -43,11 +15,11 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'",
+          "testString": "assert($('img').attr('alt'), 'Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.')"
+        }
       ],
       "solutions": [],
       "hints": [],
@@ -55,7 +27,19 @@
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
       "translations": {},
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-alt-text-to-an-image-for-accessibility"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-alt-text-to-an-image-for-accessibility",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<img src=\"doingKarateWow.jpeg\">"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d774c367417b2b2512a9d",
@@ -69,30 +53,45 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your <code>img</code> tag should have an <code>alt</code> attribute.'",
+          "testString": "assert(!($('img').attr('alt') == undefined), 'Your <code>img</code> tag should have an <code>alt</code> attribute.')"
+        },
+        {
+          "text": "The <code>alt</code> attribute should be set to an empty string.'",
+          "testString": "assert($('img').attr('alt') == '', 'The <code>alt</code> attribute should be set to an empty string.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d774d367417b2b2512a9e",
@@ -107,25 +106,15 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should have six <code>h3</code> tags.'",
+          "testString": "assert($('h3').length === 6, 'Your code should have six <code>h3</code> tags.')"
+        },
+        {
+          "text": "Your code should not have any <code>h5</code> tags.'",
+          "testString": "assert($('h5').length === 0, 'Your code should not have any <code>h5</code> tags.')"
+        }
       ],
       "solutions": [],
       "hints": [
@@ -134,7 +123,32 @@
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d774e367417b2b2512a9f",
@@ -147,25 +161,40 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should have one <code>main</code> tag.'",
+          "testString": "assert($('main').length == 1, 'Your code should have one <code>main</code> tag.')"
+        },
+        {
+          "text": "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.'",
+          "testString": "assert(code.match(/<\\/header>\\s*?<main>\\s*?<\\/main>/gi), '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<header>",
+            "  <h1>Weapons of the Ninja</h1>",
+            "</header>",
+            "",
+            "",
+            "",
+            "<footer></footer>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d774e367417b2b2512aa0",
@@ -179,39 +208,54 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should have three <code>article</code> tags.'",
+          "testString": "assert($('article').length == 3, 'Your code should have three <code>article</code> tags.')"
+        },
+        {
+          "text": "Your code should not have any <code>div</code> tags.'",
+          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7787367417b2b2512aa1",
@@ -223,45 +267,66 @@
         "<hr>",
         "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.');",
-        "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(/<header>/g).length, 'message: Make sure your <code>header</code> element has a closing tag.');"
+        {
+          "text": "Your code should have one <code>header</code> tag.'",
+          "testString": "assert($('header').length == 1, 'Your code should have one <code>header</code> tag.')"
+        },
+        {
+          "text": "Your <code>header</code> tags should wrap around the <code>h1</code>.'",
+          "testString": "assert($('header').children('h1').length == 1, 'Your <code>header</code> tags should wrap around the <code>h1</code>.')"
+        },
+        {
+          "text": "Your code should not have any <code>div</code> tags.'",
+          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.')"
+        },
+        {
+          "text": "Make sure your <code>header</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(/<header>/g).length, 'Make sure your <code>header</code> element has a closing tag.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7788367417b2b2512aa2",
@@ -272,51 +337,72 @@
         "<hr>",
         "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.');",
-        "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(/<nav>/g).length, 'message: Make sure your <code>nav</code> element has a closing tag.');"
+        {
+          "text": "Your code should have one <code>nav</code> tag.'",
+          "testString": "assert($('nav').length == 1, 'Your code should have one <code>nav</code> tag.')"
+        },
+        {
+          "text": "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.'",
+          "testString": "assert($('nav').children('ul').length == 1, 'Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.')"
+        },
+        {
+          "text": "Your code should not have any <code>div</code> tags.'",
+          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.')"
+        },
+        {
+          "text": "Make sure your <code>nav</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(/<nav>/g).length, 'Make sure your <code>nav</code> element has a closing tag.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7788367417b2b2512aa3",
@@ -326,54 +412,75 @@
         "<hr>",
         "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.');",
-        "assert(code.match(/<footer>\\s*&copy; 2016 Camper Cat\\s*<\\/footer>/g), 'message: Your code should have an opening and closing <code>footer</code> tag.');",
-        "assert($('div').length == 0, 'message: Your code should not have any <code>div</code> tags.');"
+        {
+          "text": "Your code should have one <code>footer</code> tag.'",
+          "testString": "assert($('footer').length == 1, 'Your code should have one <code>footer</code> tag.')"
+        },
+        {
+          "text": "Your code should not have any <code>div</code> tags.'",
+          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.')"
+        },
+        {
+          "text": "Your code should have an opening and closing <code>footer</code> tag.'",
+          "testString": "assert(code.match(/<footer>\\s*&copy; 2016 Camper Cat\\s*<\\/footer>/g), 'Your code should have an opening and closing <code>footer</code> tag.')"
+        },
+        {
+          "text": "Your code should not have any <code>div</code> tags.'",
+          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7789367417b2b2512aa4",
@@ -388,34 +495,64 @@
         "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\".",
         "<strong>Note</strong><br>The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users."
       ],
-      "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(code.match(/<\\/audio>/g) && code.match(/<audio controls>/g) && code.match(/<\\/audio>/g).length === code.match(/<audio controls>/g).length, 'message: Make sure your <code>audio</code> element has a closing 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.');"
+        {
+          "text": "Your code should have one <code>audio</code> tag.'",
+          "testString": "assert($('audio').length === 1, 'Your code should have one <code>audio</code> tag.')"
+        },
+        {
+          "text": "Make sure your <code>audio</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/audio>/g) && code.match(/<audio controls>/g) && code.match(/<\\/audio>/g).length === code.match(/<audio controls>/g).length, 'Make sure your <code>audio</code> element has a closing tag.')"
+        },
+        {
+          "text": "The <code>audio</code> tag should have the <code>controls</code> attribute.'",
+          "testString": "assert($('audio').attr('controls'), 'The <code>audio</code> tag should have the <code>controls</code> attribute.')"
+        },
+        {
+          "text": "Your code should have one <code>source</code> tag.'",
+          "testString": "assert($('source').length === 1, 'Your code should have one <code>source</code> tag.')"
+        },
+        {
+          "text": "Your <code>source</code> tag should be inside the <code>audio</code> tags.'",
+          "testString": "assert($('audio').children('source').length === 1, 'Your <code>source</code> tag should be inside the <code>audio</code> tags.')"
+        },
+        {
+          "text": "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.'",
+          "testString": "assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.')"
+        },
+        {
+          "text": "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.'",
+          "testString": "assert($('source').attr('type') === 'audio/mpeg', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<body>",
+            "  <header>",
+            "    <h1>Real Coding Ninjas</h1>",
+            "  </header>",
+            "  <main>",
+            "    <p>A sound clip of Zersiax's screen reader in action.</p>",
+            "    ",
+            "    ",
+            "    ",
+            "  </main>",
+            "</body>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778a367417b2b2512aa5",
@@ -428,63 +565,90 @@
         "<hr>",
         "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.');",
-        "assert(code.match(/<\\/figure>/g) && code.match(/<\\/figure>/g).length === code.match(/<figure>/g).length, 'message: Make sure your <code>figure</code> element has a closing tag.');"
+        {
+          "text": "Your code should have one <code>figure</code> tag.'",
+          "testString": "assert($('figure').length == 1, 'Your code should have one <code>figure</code> tag.')"
+        },
+        {
+          "text": "Your code should have one <code>figcaption</code> tag.'",
+          "testString": "assert($('figcaption').length == 1, 'Your code should have one <code>figcaption</code> tag.')"
+        },
+        {
+          "text": "Your code should not have any <code>div</code> tags.'",
+          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.')"
+        },
+        {
+          "text": "Your code should not have any <code>p</code> tags.'",
+          "testString": "assert($('p').length == 0, 'Your code should not have any <code>p</code> tags.')"
+        },
+        {
+          "text": "The <code>figcaption</code> should be a child of the <code>figure</code> tag.'",
+          "testString": "assert($('figure').children('figcaption').length == 1, 'The <code>figcaption</code> should be a child of the <code>figure</code> tag.')"
+        },
+        {
+          "text": "Make sure your <code>figure</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/figure>/g) && code.match(/<\\/figure>/g).length === code.match(/<figure>/g).length, 'Make sure your <code>figure</code> element has a closing tag.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778a367417b2b2512aa6",
@@ -498,50 +662,65 @@
         "<hr>",
         "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>.');"
+        {
+          "text": "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.'",
+          "testString": "assert($('label').attr('for'), 'Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.')"
+        },
+        {
+          "text": "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.'",
+          "testString": "assert($('label').attr('for') == 'email', 'Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778b367417b2b2512aa7",
@@ -555,64 +734,88 @@
         "<hr>",
         "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(code.match(/<\\/fieldset>/g) && code.match(/<\\/fieldset>/g).length === code.match(/<fieldset>/g).length, 'message: Make sure your <code>fieldset</code> element has a closing tag.');",
-        "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.');"
+        {
+          "text": "Your code should have a <code>fieldset</code> tag around the radio button set.'",
+          "testString": "assert($('fieldset').length == 1, 'Your code should have a <code>fieldset</code> tag around the radio button set.')"
+        },
+        {
+          "text": "Make sure your <code>fieldset</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/fieldset>/g) && code.match(/<\\/fieldset>/g).length === code.match(/<fieldset>/g).length, 'Make sure your <code>fieldset</code> element has a closing tag.')"
+        },
+        {
+          "text": "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.'",
+          "testString": "assert($('legend').length == 1, 'Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.')"
+        },
+        {
+          "text": "Your code should not have any <code>div</code> tags.'",
+          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.')"
+        },
+        {
+          "text": "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.'",
+          "testString": "assert($('p').length == 4, '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778b367417b2b2512aa8",
@@ -626,43 +829,64 @@
         "<hr>",
         "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:</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.');"
+        {
+          "text": "Your code should add one <code>input</code> tag for the date selector field.'",
+          "testString": "assert($('input').length == 2, 'Your code should add one <code>input</code> tag for the date selector field.')"
+        },
+        {
+          "text": "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.'",
+          "testString": "assert($('input').attr('type') == 'date', 'Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.')"
+        },
+        {
+          "text": "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.'",
+          "testString": "assert($('input').attr('id') == 'pickdate', 'Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.')"
+        },
+        {
+          "text": "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.'",
+          "testString": "assert($('input').attr('name') == 'date', 'Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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:</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778c367417b2b2512aa9",
@@ -674,51 +898,72 @@
         "<hr>",
         "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.');",
-        "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'message: Make sure your <code>time</code> element has a closing tag.');"
+        {
+          "text": "Your <code>time</code> tags should wrap around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\".'",
+          "testString": "assert($('time').text().match(/Thursday, 'Your <code>time</code> tags should wrap around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\".')"
+        },
+        {
+          "text": "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.'",
+          "testString": "assert($('time').attr('datetime'), 'Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.')"
+        },
+        {
+          "text": "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.'",
+          "testString": "assert($('time').attr('datetime') === \"2016-09-15\", 'Your <code>datetime</code> attribute should be set to a value of 2016-09-15.')"
+        },
+        {
+          "text": "Make sure your <code>time</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'Make sure your <code>time</code> element has a closing tag.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778d367417b2b2512aaa",
@@ -736,104 +981,125 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.'",
+          "testString": "assert($('.sr-only').css('position') == 'absolute', 'Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.')"
+        },
+        {
+          "text": "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.'",
+          "testString": "assert($('.sr-only').css('left') == '-10000px', 'Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.')"
+        },
+        {
+          "text": "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.'",
+          "testString": "assert(code.match(/width:\\s*?1px/gi), 'Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.')"
+        },
+        {
+          "text": "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.'",
+          "testString": "assert(code.match(/height:\\s*?1px/gi), '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778e367417b2b2512aab",
@@ -844,36 +1110,51 @@
         "<hr>",
         "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>.');"
+        {
+          "text": "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.'",
+          "testString": "assert($('body').css('color') == 'rgb(99, 'Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.')"
+        },
+        {
+          "text": "Your code should not change the <code>background-color</code> for the <code>body</code>.'",
+          "testString": "assert($('body').css('background-color') == 'rgb(255, 'Your code should not change the <code>background-color</code> for the <code>body</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778f367417b2b2512aac",
@@ -886,36 +1167,51 @@
         "<hr>",
         "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%.');"
+        {
+          "text": "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.'",
+          "testString": "assert(code.match(/color:\\s*?hsl\\(0, 'Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.')"
+        },
+        {
+          "text": "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.'",
+          "testString": "assert(code.match(/background-color:\\s*?hsl\\(120, 'Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778f367417b2b2512aad",
@@ -927,33 +1223,45 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.'",
+          "testString": "assert($('button').css('color') == 'rgb(0, 'Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d778f367417b2b2512aae",
@@ -964,27 +1272,42 @@
         "<hr>",
         "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\".');",
-        "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a href=\"\">/g).length, 'message: Make sure your <code>a</code> element has a closing tag.');"
+        {
+          "text": "Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".'",
+          "testString": "assert($('a').text().match(/information about batteries/g), 'Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".')"
+        },
+        {
+          "text": "Make sure your <code>a</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a href=\"\">/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7790367417b2b2512aaf",
@@ -997,42 +1320,63 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"first\".'",
+          "testString": "assert($('#first').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"first\".')"
+        },
+        {
+          "text": "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"second\".'",
+          "testString": "assert($('#second').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"second\".')"
+        },
+        {
+          "text": "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.'",
+          "testString": "assert($('#first').attr('accesskey') == 'g', '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.')"
+        },
+        {
+          "text": "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.'",
+          "testString": "assert($('#second').attr('accesskey') == 'c', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7790367417b2b2512ab0",
@@ -1045,65 +1389,80 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.'",
+          "testString": "assert($('p').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.')"
+        },
+        {
+          "text": "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.'",
+          "testString": "assert($('p').attr('tabindex') == '0', 'Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7790367417b2b2512ab1",
@@ -1118,51 +1477,75 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.'",
+          "testString": "assert($('#search').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.')"
+        },
+        {
+          "text": "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.'",
+          "testString": "assert($('#submit').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.')"
+        },
+        {
+          "text": "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.'",
+          "testString": "assert($('#search').attr('tabindex') == '1', 'Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.')"
+        },
+        {
+          "text": "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.'",
+          "testString": "assert($('#submit').attr('tabindex') == '2', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     }
-  ]
+  ],
+  "fileName": "01-responsive-web-design/applied-accessibility.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
 }
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json b/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json
index b3dc8408d1..a19e6ad8bb 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json
@@ -4,24 +4,6 @@
   "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.",
-        "",
-        "@@STEP@@"
-      ],
-      "releasedOn": "Feb 17, 2017",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {}
-    },
     {
       "id": "587d7791367417b2b2512ab3",
       "title": "Create Visual Balance Using the text-align Property",
@@ -35,51 +17,66 @@
         "<hr>",
         "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."
       ],
-      "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\" target=\"_blank\" class=\"links\">Larry Page</a>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" 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.');"
+        {
+          "text": "Your code should use the text-align property on the <code>h4</code> tag to set it to center.'",
+          "testString": "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the <code>h4</code> tag to set it to center.')"
+        },
+        {
+          "text": "Your code should use the text-align property on the <code>p</code> tag to set it to justify.'",
+          "testString": "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the <code>p</code> tag to set it to justify.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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\" target=\"_blank\" class=\"links\">Larry Page</a>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7791367417b2b2512ab4",
@@ -90,51 +87,63 @@
         "<hr>",
         "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\" target=\"_blank\" class=\"links\">Larry Page</a>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'message: Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');"
+        {
+          "text": "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.'",
+          "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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\" target=\"_blank\" class=\"links\">Larry Page</a>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d7791367417b2b2512ab5",
@@ -145,52 +154,64 @@
         "<hr>",
         "Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px."
       ],
-      "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\" target=\"_blank\" class=\"links\">Larry Page</a>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert($('h4').css('height') == '25px', 'message: Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.');"
+        {
+          "text": "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.'",
+          "testString": "assert($('h4').css('height') == '25px', 'Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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\" target=\"_blank\" class=\"links\">Larry Page</a>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781a367417b2b2512ab7",
@@ -200,57 +221,75 @@
         "<hr>",
         "Wrap a <code>strong</code> tag around \"Stanford University\" inside the <code>p</code> 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\">",
-        "      <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\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" 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($('p').children('strong').length == 1, 'message: The <code>strong</code> tag should be inside the <code>p</code> tag.');",
-        "assert($('strong').text().match(/Stanford University/gi), 'message: The <code>strong</code> tag should wrap around the words \"Stanford University\".');"
+        {
+          "text": "Your code should add one <code>strong</code> tag to the markup.'",
+          "testString": "assert($('strong').length == 1, 'Your code should add one <code>strong</code> tag to the markup.')"
+        },
+        {
+          "text": "The <code>strong</code> tag should be inside the <code>p</code> tag.'",
+          "testString": "assert($('p').children('strong').length == 1, 'The <code>strong</code> tag should be inside the <code>p</code> tag.')"
+        },
+        {
+          "text": "The <code>strong</code> tag should wrap around the words \"Stanford University\".'",
+          "testString": "assert($('strong').text().match(/Stanford University/gi), 'The <code>strong</code> tag should wrap around the words \"Stanford University\".')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781a367417b2b2512ab8",
@@ -261,57 +300,75 @@
         "Wrap the <code>u</code> tag around the text \"Ph.D. students\". It should not include the parent <code>div</code> that has the class of <code>cardText</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\">",
-        "      <h4>Google</h4>",
-        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" 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').text() === 'Ph.D. students', 'message: The <code>u</code> tag should wrap around the text \"Ph.D. students\".');",
-        "assert($('u').children('div').length === 0, 'message: The <code>u</code> tag should not wrap around the parent <code>div</code> tag.');"
+        {
+          "text": "Your code should add a <code>u</code> tag to the markup.'",
+          "testString": "assert($('u').length === 1, 'Your code should add a <code>u</code> tag to the markup.')"
+        },
+        {
+          "text": "The <code>u</code> tag should wrap around the text \"Ph.D. students\".'",
+          "testString": "assert($('u').text() === 'Ph.D. students', 'The <code>u</code> tag should wrap around the text \"Ph.D. students\".')"
+        },
+        {
+          "text": "The <code>u</code> tag should not wrap around the parent <code>div</code> tag.'",
+          "testString": "assert($('u').children('div').length === 0, 'The <code>u</code> tag should not wrap around the parent <code>div</code> tag.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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 <strong>Stanford University</strong>.</p>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781a367417b2b2512ab9",
@@ -321,56 +378,71 @@
         "<hr>",
         "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\">",
-        "      <h4>Google</h4>",
-        "      <p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </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.');"
+        {
+          "text": "Your code should add an <code>em</code> tag to the markup.'",
+          "testString": "assert($('em').length == 1, 'Your code should add an <code>em</code> tag to the markup.')"
+        },
+        {
+          "text": "The <code>em</code> tag should wrap around the <code>p</code> tag and its contents.'",
+          "testString": "assert($('em').children('p').length == 1, 'The <code>em</code> tag should wrap around the <code>p</code> tag and its contents.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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 <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781b367417b2b2512aba",
@@ -380,57 +452,75 @@
         "<hr>",
         "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\">",
-        "      <h4>Google</h4>",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </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.');"
+        {
+          "text": "Your code should add one <code>del</code> tag to the markup.'",
+          "testString": "assert($('del').length == 1, 'Your code should add one <code>del</code> tag to the markup.')"
+        },
+        {
+          "text": "A <code>del</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.'",
+          "testString": "assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'A <code>del</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.')"
+        },
+        {
+          "text": "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.'",
+          "testString": "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>",
+            "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781b367417b2b2512abb",
@@ -441,57 +531,72 @@
         "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\">",
-        "      <h4><del>Google</del>Alphabet</h4>",
-        "      ",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert($('hr').length == 1, 'message: Your code should add an <code>hr</code> tag to the markup.');",
-        "assert(code.match(/<\\/h4>\\s*?<hr(>|\\s*?\\/>)\\s*?<em>/gi), 'message: The <code>hr</code> tag should come between the title and the paragraph.');"
+        {
+          "text": "Your code should add an <code>hr</code> tag to the markup.'",
+          "testString": "assert($('hr').length == 1, 'Your code should add an <code>hr</code> tag to the markup.')"
+        },
+        {
+          "text": "The <code>hr</code> tag should come between the title and the paragraph.'",
+          "testString": "assert(code.match(/<\\/h4>\\s*?<hr(>|\\s*?\\/>)\\s*?<em>/gi), 'The <code>hr</code> tag should come between the title and the paragraph.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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><del>Google</del>Alphabet</h4>",
+            "      ",
+            "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781b367417b2b2512abc",
@@ -505,60 +610,78 @@
         "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\">",
-        "      <h4>Alphabet</h4>",
-        "      <hr>",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </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.');"
+        {
+          "text": "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>.'",
+          "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?, '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>.')"
+        },
+        {
+          "text": "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.'",
+          "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.')"
+        },
+        {
+          "text": "The <code>height</code> property on the <code>h4</code> element should be removed.'",
+          "testString": "assert(!($('h4').css('height') == '25px'), 'The <code>height</code> property on the <code>h4</code> element should be removed.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>Alphabet</h4>",
+            "      <hr>",
+            "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781b367417b2b2512abd",
@@ -568,58 +691,70 @@
         "<hr>",
         "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\">",
-        "      <h4>Alphabet</h4>",
-        "      <hr>",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </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.');"
+        {
+          "text": "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.'",
+          "testString": "assert($('h4').css('font-size') == '27px', 'Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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\">",
+            "      <h4>Alphabet</h4>",
+            "      <hr>",
+            "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781b367417b2b2512abe",
@@ -632,62 +767,77 @@
         "<hr>",
         "The element now has an id of <code>thumbnail</code>. With this selector, use the example CSS values above to place a <code>box-shadow</code> on the card."
       ],
-      "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\">",
-        "      <h4>Alphabet</h4>",
-        "      <hr>",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'message: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.');",
-        "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.');"
+        {
+          "text": "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.'",
+          "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.')"
+        },
+        {
+          "text": "You should use the given CSS for the <code>box-shadow</code> value.'",
+          "testString": "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?, 'You should use the given CSS for the <code>box-shadow</code> value.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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\">",
+            "      <h4>Alphabet</h4>",
+            "      <hr>",
+            "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781c367417b2b2512abf",
@@ -699,62 +849,74 @@
         "<hr>",
         "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 {",
-        "    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\">",
-        "      <h4>Alphabet</h4>",
-        "      <hr>",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '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>.');"
+        {
+          "text": "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.'",
+          "testString": "assert.approximately(parseFloat($('.links').css('opacity')), '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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 {",
+            "    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\">",
+            "      <h4>Alphabet</h4>",
+            "      <hr>",
+            "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781c367417b2b2512ac0",
@@ -766,64 +928,79 @@
         "<hr>",
         "Transform the text of the <code>h4</code> 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 {",
-        "    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\">",
-        "      <h4>Alphabet</h4>",
-        "      <hr>",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert($('h4').css('text-transform') === 'uppercase', 'message: The <code>h4</code> text should be uppercase.');",
-        "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'message: The original text of the h4 should not be changed.');"
+        {
+          "text": "The <code>h4</code> text should be uppercase.'",
+          "testString": "assert($('h4').css('text-transform') === 'uppercase', 'The <code>h4</code> text should be uppercase.')"
+        },
+        {
+          "text": "The original text of the h4 should not be changed.'",
+          "testString": "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'The original text of the h4 should not be changed.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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 {",
+            "    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\">",
+            "      <h4>Alphabet</h4>",
+            "      <hr>",
+            "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
+            "    </div>",
+            "    <div class=\"cardLinks\">",
+            "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
+            "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781c367417b2b2512ac2",
@@ -833,36 +1010,63 @@
         "<hr>",
         "<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.');"
+        {
+          "text": "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.'",
+          "testString": "assert($('h1').css('font-size') == '68px', 'Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.')"
+        },
+        {
+          "text": "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.'",
+          "testString": "assert($('h2').css('font-size') == '52px', 'Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.')"
+        },
+        {
+          "text": "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.'",
+          "testString": "assert($('h3').css('font-size') == '40px', 'Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.')"
+        },
+        {
+          "text": "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.'",
+          "testString": "assert($('h4').css('font-size') == '32px', 'Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.')"
+        },
+        {
+          "text": "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.'",
+          "testString": "assert($('h5').css('font-size') == '21px', 'Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.')"
+        },
+        {
+          "text": "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.'",
+          "testString": "assert($('h6').css('font-size') == '14px', 'Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781c367417b2b2512ac3",
@@ -873,54 +1077,81 @@
         "<hr>",
         "<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.');"
+        {
+          "text": "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.'",
+          "testString": "assert($('h1').css('font-weight') == '800', 'Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.')"
+        },
+        {
+          "text": "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.'",
+          "testString": "assert($('h2').css('font-weight') == '600', 'Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.')"
+        },
+        {
+          "text": "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.'",
+          "testString": "assert($('h3').css('font-weight') == '500', 'Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.')"
+        },
+        {
+          "text": "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.'",
+          "testString": "assert($('h4').css('font-weight') == '400', 'Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.')"
+        },
+        {
+          "text": "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.'",
+          "testString": "assert($('h5').css('font-weight') == '300', 'Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.')"
+        },
+        {
+          "text": "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.'",
+          "testString": "assert($('h6').css('font-weight') == '200', 'Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781c367417b2b2512ac4",
@@ -930,25 +1161,37 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.'",
+          "testString": "assert($('p').css('font-size') == '16px', 'Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781d367417b2b2512ac5",
@@ -958,26 +1201,38 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.'",
+          "testString": "assert($('p').css('line-height') == '25px', 'Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781d367417b2b2512ac8",
@@ -989,27 +1244,42 @@
         "<hr>",
         "The code editor has a CSS rule to style all <code>a</code> tags black. Add a rule so that when the user hovers over the <code>a</code> tag, the <code>color</code> is blue."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  a {",
-        "    color: #000;",
-        "  }",
-        "  ",
-        "  ",
-        "  ",
-        "</style>",
-        "<a href=\"http://freecatphotoapp.com/\" target=\"_blank\">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*?}/gi), 'message: The anchor tag should have a <code>color</code> of blue on hover.');"
+        {
+          "text": "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'",
+          "testString": "assert($('a').css('color') == 'rgb(0, 'The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.')"
+        },
+        {
+          "text": "The anchor tag should have a <code>color</code> of blue on hover.'",
+          "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a <code>color</code> of blue on hover.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  a {",
+            "    color: #000;",
+            "  }",
+            "  ",
+            "  ",
+            "  ",
+            "</style>",
+            "<a href=\"http://freecatphotoapp.com/\" target=\"_blank\">CatPhotoApp</a>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781e367417b2b2512ac9",
@@ -1023,29 +1293,44 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.'",
+          "testString": "assert($('h2').css('position') == 'relative', 'The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.')"
+        },
+        {
+          "text": "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.'",
+          "testString": "assert($('h2').css('top') == '15px', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781e367417b2b2512aca",
@@ -1056,32 +1341,47 @@
         "<hr>",
         "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.');"
+        {
+          "text": "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.'",
+          "testString": "assert($('h2').css('bottom') == '10px', '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.')"
+        },
+        {
+          "text": "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.'",
+          "testString": "assert($('h2').css('left') == '15px', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781e367417b2b2512acb",
@@ -1092,39 +1392,57 @@
         "<hr>",
         "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.5 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') == '0.5px', 'message: Your code should use the <code>top</code> CSS offset of 0.5 pixels on the <code>#searchbar</code> element.');",
-        "assert($('#searchbar').css('right') == '0.5px', 'message: Your code should use the <code>right</code> CSS offset of 0.5 pixels on the <code>#searchbar</code> element.');"
+        {
+          "text": "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'",
+          "testString": "assert($('#searchbar').css('position') == 'absolute', 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.')"
+        },
+        {
+          "text": "Your code should use the <code>top</code> CSS offset of 0.5 pixels on the <code>#searchbar</code> element.'",
+          "testString": "assert($('#searchbar').css('top') == '0.5px', 'Your code should use the <code>top</code> CSS offset of 0.5 pixels on the <code>#searchbar</code> element.')"
+        },
+        {
+          "text": "Your code should use the <code>right</code> CSS offset of 0.5 pixels on the <code>#searchbar</code> element.'",
+          "testString": "assert($('#searchbar').css('right') == '0.5px', 'Your code should use the <code>right</code> CSS offset of 0.5 pixels on the <code>#searchbar</code> element.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d781e367417b2b2512acc",
@@ -1135,51 +1453,69 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'",
+          "testString": "assert($('#navbar').css('position') == 'fixed', 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.')"
+        },
+        {
+          "text": "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'",
+          "testString": "assert($('#navbar').css('top') == '0px', 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.')"
+        },
+        {
+          "text": "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'",
+          "testString": "assert($('#navbar').css('left') == '0px', 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a3367417b2b2512ace",
@@ -1189,47 +1525,62 @@
         "<hr>",
         "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>.');"
+        {
+          "text": "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.'",
+          "testString": "assert($('#left').css('float') == 'left', 'The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.')"
+        },
+        {
+          "text": "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.'",
+          "testString": "assert($('#right').css('float') == 'right', 'The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a3367417b2b2512acf",
@@ -1239,40 +1590,52 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The element with class <code>first</code> should have a <code>z-index</code> value of 2.'",
+          "testString": "assert($('.first').css('z-index') == '2', 'The element with class <code>first</code> should have a <code>z-index</code> value of 2.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a3367417b2b2512ad0",
@@ -1283,26 +1646,38 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>div</code> should have a <code>margin</code> set to auto.'",
+          "testString": "assert(code.match(/margin:\\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  div {",
+            "    background-color: blue;",
+            "    height: 100px;",
+            "    width: 100px;",
+            "    ",
+            "  }",
+            "</style>",
+            "<div></div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a3367417b2b2512ad1",
@@ -1317,36 +1692,51 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'",
+          "testString": "assert($('.blue').css('background-color') == 'rgb(0, 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.')"
+        },
+        {
+          "text": "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.'",
+          "testString": "assert($('.yellow').css('background-color') == 'rgb(255, 'The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a4367417b2b2512ad2",
@@ -1360,46 +1750,64 @@
         "<hr>",
         "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 as orange and raspberry 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.');"
+        {
+          "text": "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.'",
+          "testString": "assert($('.orange').css('background-color') == 'rgb(255, 'The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.')"
+        },
+        {
+          "text": "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'",
+          "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.')"
+        },
+        {
+          "text": "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.'",
+          "testString": "assert($('.raspberry').css('background-color') == 'rgb(255, 'The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a4367417b2b2512ad3",
@@ -1409,58 +1817,79 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'",
+          "testString": "assert($('header').css('background-color') == 'rgb(9, 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.')"
+        },
+        {
+          "text": "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'",
+          "testString": "assert($('footer').css('background-color') == 'rgb(9, 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.')"
+        },
+        {
+          "text": "The <code>h2</code> element should have a <code>color</code> of #09A7A1.'",
+          "testString": "assert($('h2').css('color') == 'rgb(9, 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.')"
+        },
+        {
+          "text": "The <code>button</code> element should have a <code>background-color</code> of #FF790E.'",
+          "testString": "assert($('button').css('background-color') == 'rgb(255, 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a4367417b2b2512ad4",
@@ -1475,49 +1904,76 @@
         "<hr>",
         "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> of blue.');"
+        {
+          "text": "Your code should use the <code>hsl()</code> property to declare the color green.'",
+          "testString": "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color green.')"
+        },
+        {
+          "text": "Your code should use the <code>hsl()</code> property to declare the color cyan.'",
+          "testString": "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color cyan.')"
+        },
+        {
+          "text": "Your code should use the <code>hsl()</code> property to declare the color blue.'",
+          "testString": "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color blue.')"
+        },
+        {
+          "text": "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.'",
+          "testString": "assert($('.green').css('background-color') == 'rgb(0, 'The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.')"
+        },
+        {
+          "text": "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'",
+          "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.')"
+        },
+        {
+          "text": "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'",
+          "testString": "assert($('.blue').css('background-color') == 'rgb(0, 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a4367417b2b2512ad5",
@@ -1527,58 +1983,70 @@
         "<hr>",
         "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 cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  header {",
-        "    background-color: hsl(180, 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\\(180,\\s*?80%,\\s*?25%\\)/gi), 'message: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.');"
+        {
+          "text": "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.'",
+          "testString": "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180, 'The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  header {",
+            "    background-color: hsl(180, 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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a5367417b2b2512ad6",
@@ -1593,30 +2061,42 @@
         "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>.",
         "<strong>Note</strong><br>While there are other ways to specify a color value, like <code>rgb()</code> or <code>hsl()</code>, use hex values for this challenge."
       ],
-      "challengeSeed": [
-        "<style>",
-        "",
-        "  div{ ",
-        "    border-radius: 20px;",
-        "    width: 70%;",
-        "    height: 400px;",
-        "    margin: 50px auto;",
-        "    ",
-        "  }",
-        "",
-        "</style>",
-        "",
-        "<div></div>"
-      ],
       "tests": [
-        "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'message: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.');"
+        {
+          "text": "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.'",
+          "testString": "assert(code.match(/background:\\s*?linear-gradient\\(35deg, '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "",
+            "  div{ ",
+            "    border-radius: 20px;",
+            "    width: 70%;",
+            "    height: 400px;",
+            "    margin: 50px auto;",
+            "    ",
+            "  }",
+            "",
+            "</style>",
+            "",
+            "<div></div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a5367417b2b2512ad7",
@@ -1631,41 +2111,68 @@
         "<hr>",
         "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>.');"
+        {
+          "text": "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.'",
+          "testString": "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should be 45deg.')"
+        },
+        {
+          "text": "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg'",
+          "testString": "assert(!code.match(/90deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg')"
+        },
+        {
+          "text": "The color stop at 0 pixels should be <code>yellow</code>.'",
+          "testString": "assert(code.match(/yellow\\s+?0px/gi), 'The color stop at 0 pixels should be <code>yellow</code>.')"
+        },
+        {
+          "text": "One color stop at 40 pixels should be <code>yellow</code>.'",
+          "testString": "assert(code.match(/yellow\\s+?40px/gi), 'One color stop at 40 pixels should be <code>yellow</code>.')"
+        },
+        {
+          "text": "The second color stop at 40 pixels should be <code>black</code>.'",
+          "testString": "assert(code.match(/yellow\\s+?40px, 'The second color stop at 40 pixels should be <code>black</code>.')"
+        },
+        {
+          "text": "The last color stop at 80 pixels should be <code>black</code>.'",
+          "testString": "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be <code>black</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a5367417b2b2512ad8",
@@ -1675,15 +2182,11 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.'",
+          "testString": "assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.')"
+        }
       ],
       "solutions": [],
       "hints": [
@@ -1692,7 +2195,23 @@
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    ",
+            "  }",
+            "</style>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a5367417b2b2512ad9",
@@ -1703,43 +2222,55 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.'",
+          "testString": "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);/gi), 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a5367417b2b2512ada",
@@ -1751,27 +2282,11 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.'",
+          "testString": "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.')"
+        }
       ],
       "solutions": [],
       "hints": [
@@ -1780,7 +2295,35 @@
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  div { ",
+            "    width: 70%;",
+            "    height: 100px;",
+            "    margin:  50px auto;",
+            "    background: linear-gradient(",
+            "      53deg,",
+            "      #ccfffc,",
+            "      #ffcccf",
+            "    );",
+            "  }",
+            "  ",
+            "  ",
+            "  ",
+            "</style>",
+            "",
+            "<div></div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a6367417b2b2512adb",
@@ -1792,27 +2335,11 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.'",
+          "testString": "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.')"
+        }
       ],
       "solutions": [],
       "hints": [
@@ -1821,7 +2348,35 @@
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a6367417b2b2512adc",
@@ -1831,35 +2386,47 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.'",
+          "testString": "assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a6367417b2b2512add",
@@ -1872,38 +2439,56 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The value of the <code>background-color</code> property should be set to <code>transparent</code>.'",
+          "testString": "assert(code.match(/background-color:\\s*?transparent;/gi), 'The value of the <code>background-color</code> property should be set to <code>transparent</code>.')"
+        },
+        {
+          "text": "The value of the <code>border-radius</code> property should be set to <code>50%</code>.'",
+          "testString": "assert(code.match(/border-radius:\\s*?50%;/gi), 'The value of the <code>border-radius</code> property should be set to <code>50%</code>.')"
+        },
+        {
+          "text": "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.'",
+          "testString": "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a6367417b2b2512ade",
@@ -1918,55 +2503,76 @@
         "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.');"
+        {
+          "text": "The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.'",
+          "testString": "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.')"
+        },
+        {
+          "text": "The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.'",
+          "testString": "assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.')"
+        },
+        {
+          "text": "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.'",
+          "testString": "assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.')"
+        },
+        {
+          "text": "The <code>content</code> of the <code>heart:before</code> selector should be an empty string.'",
+          "testString": "assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'The <code>content</code> of the <code>heart:before</code> selector should be an empty string.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a7367417b2b2512adf",
@@ -1981,34 +2587,31 @@
         "<hr>",
         "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: 50px 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%.');"
+        {
+          "text": "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.'",
+          "testString": "assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.')"
+        },
+        {
+          "text": "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.'",
+          "testString": "assert($('#rect').css('animation-duration') == '4s', 'The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.')"
+        },
+        {
+          "text": "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.'",
+          "testString": "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.')"
+        },
+        {
+          "text": "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.'",
+          "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.')"
+        },
+        {
+          "text": "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.'",
+          "testString": "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.')"
+        },
+        {
+          "text": "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.'",
+          "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.')"
+        }
       ],
       "solutions": [],
       "hints": [
@@ -2017,7 +2620,37 @@
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  div {",
+            "    height: 40px;",
+            "    width: 70%;",
+            "    background: black;",
+            "    margin: 50px auto;",
+            "    border-radius: 5px;",
+            "  }",
+            "",
+            "  #rect {",
+            "    ",
+            "    ",
+            "  }",
+            "  ",
+            "  ",
+            "  ",
+            "  ",
+            "</style>",
+            "<div id=\"rect\"></div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a7367417b2b2512ae0",
@@ -2030,35 +2663,50 @@
         "Note that <code>ms</code> stands for milliseconds, where 1000ms is equal to 1s.",
         "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: 500ms;",
-        "  }",
-        "  ",
-        "  ",
-        "</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%.');"
+        {
+          "text": "The @keyframes rule should use the <code>animation-name</code> background-color.'",
+          "testString": "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'The @keyframes rule should use the <code>animation-name</code> background-color.')"
+        },
+        {
+          "text": "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'",
+          "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  button {",
+            "    border-radius: 5px;",
+            "    color: white;",
+            "    background-color: #0F5897;",
+            "    padding: 5px 10px 8px 10px;",
+            "  }",
+            "  ",
+            "  button:hover {",
+            "    animation-name: background-color;",
+            "    animation-duration: 500ms;",
+            "  }",
+            "  ",
+            "  ",
+            "</style>",
+            "  ",
+            "<button>Register</button>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "58a7a6ebf9a6318348e2d5aa",
@@ -2070,37 +2718,49 @@
         "<hr>",
         "Set the <code>animation-fill-mode</code> property of <code>button:hover</code> to <code>forwards</code> so the button stays highlighted when a user hovers over it."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  button {",
-        "    border-radius: 5px;",
-        "    color: white;",
-        "    background-color: #0F5897;",
-        "    padding: 5px 10px 8px 10px;",
-        "  }",
-        "  button:hover {",
-        "    animation-name: background-color;",
-        "    animation-duration: 500ms;",
-        "    /* add your code below this line */",
-        "    ",
-        "    /* add your code above this line */",
-        "  }",
-        "  @keyframes background-color {",
-        "    100% {",
-        "      background-color: #4791d0;",
-        "    }",
-        "  }",
-        "</style>",
-        "<button>Register</button>"
-      ],
       "tests": [
-        "assert(code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-fill-mode\\s*?:\\s*?forwards\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-name\\s*?:\\s*?background-color\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-duration\\s*?:\\s*?500ms\\s*?;[\\s\\S]*}/gi), 'message: <code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.');"
+        {
+          "text": "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'",
+          "testString": "assert(code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-fill-mode\\s*?:\\s*?forwards\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-name\\s*?:\\s*?background-color\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-duration\\s*?:\\s*?500ms\\s*?;[\\s\\S]*}/gi), '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  button {",
+            "    border-radius: 5px;",
+            "    color: white;",
+            "    background-color: #0F5897;",
+            "    padding: 5px 10px 8px 10px;",
+            "  }",
+            "  button:hover {",
+            "    animation-name: background-color;",
+            "    animation-duration: 500ms;",
+            "    /* add your code below this line */",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "  @keyframes background-color {",
+            "    100% {",
+            "      background-color: #4791d0;",
+            "    }",
+            "  }",
+            "</style>",
+            "<button>Register</button>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a7367417b2b2512ae1",
@@ -2112,54 +2772,72 @@
         "<hr>",
         "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>. Don't replace the <code>top</code> property in the editor - the animation should have both vertical and horizontal motion."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  div {",
-        "    height: 40px;",
-        "    width: 70%;",
-        "    background: black;",
-        "    margin: 50px 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.');"
+        {
+          "text": "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.'",
+          "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.')"
+        },
+        {
+          "text": "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.'",
+          "testString": "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?top:\\s*?50px;\\s*?left:\\s*?25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.')"
+        },
+        {
+          "text": "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.'",
+          "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  div {",
+            "    height: 40px;",
+            "    width: 70%;",
+            "    background: black;",
+            "    margin: 50px 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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a7367417b2b2512ae2",
@@ -2170,45 +2848,57 @@
         "<hr>",
         "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: 50px 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(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'message: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');"
+        {
+          "text": "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.'",
+          "testString": "assert(code.match(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "",
+            "  #ball {",
+            "    width: 70px;",
+            "    height: 70px;",
+            "    margin: 50px 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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a8367417b2b2512ae3",
@@ -2220,50 +2910,62 @@
         "<hr>",
         "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: 50px 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.');"
+        {
+          "text": "The <code>animation-iteration-count</code> property should have a value of infinite.'",
+          "testString": "assert($('#ball').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property should have a value of infinite.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "",
+            "  #ball {",
+            "    width: 100px;",
+            "    height: 100px;",
+            "    margin: 50px 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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a8367417b2b2512ae4",
@@ -2274,87 +2976,102 @@
         "<hr>",
         "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(0.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.');"
+        {
+          "text": "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.'",
+          "testString": "assert($('.heart').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.')"
+        },
+        {
+          "text": "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.'",
+          "testString": "assert($('.back').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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(0.6) rotate(-45deg);",
+            "    }",
+            "  }",
+            "",
+            "</style>",
+            "<div class=\"back\"></div>",
+            "<div class=\"heart\"></div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a8367417b2b2512ae5",
@@ -2365,62 +3082,11 @@
         "<hr>",
         "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-name: twinkle-1;",
-        "    animation-duration: 1s;",
-        "  }",
-        "",
-        "  .star-2 {",
-        "    margin-top: 25%;",
-        "    margin-left: 25%;",
-        "    animation-name: twinkle-2;",
-        "    animation-duration: 1s;",
-        "  }",
-        "",
-        "  @keyframes twinkle-1 {",
-        "    20% {",
-        "      transform: scale(0.5);",
-        "      opacity: 0.5;",
-        "    }",
-        "  }",
-        "",
-        "  @keyframes twinkle-2 {",
-        "    20% {",
-        "      transform: scale(0.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%.');"
+        {
+          "text": "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.'",
+          "testString": "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.')"
+        }
       ],
       "solutions": [],
       "hints": [
@@ -2429,7 +3095,70 @@
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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-name: twinkle-1;",
+            "    animation-duration: 1s;",
+            "  }",
+            "",
+            "  .star-2 {",
+            "    margin-top: 25%;",
+            "    margin-left: 25%;",
+            "    animation-name: twinkle-2;",
+            "    animation-duration: 1s;",
+            "  }",
+            "",
+            "  @keyframes twinkle-1 {",
+            "    20% {",
+            "      transform: scale(0.5);",
+            "      opacity: 0.5;",
+            "    }",
+            "  }",
+            "",
+            "  @keyframes twinkle-2 {",
+            "    20% {",
+            "      transform: scale(0.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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a8367417b2b2512ae6",
@@ -2440,72 +3169,90 @@
         "<hr>",
         "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(0.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.');"
+        {
+          "text": "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.'",
+          "testString": "assert($('.star-1').css('animation-duration') == '1s', 'The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.')"
+        },
+        {
+          "text": "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.'",
+          "testString": "assert($('.star-2').css('animation-duration') == '0.9s', 'The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.')"
+        },
+        {
+          "text": "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.'",
+          "testString": "assert($('.star-3').css('animation-duration') == '1.1s', 'The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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(0.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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a8367417b2b2512ae7",
@@ -2516,57 +3263,72 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.'",
+          "testString": "assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.')"
+        },
+        {
+          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.'",
+          "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a9367417b2b2512ae8",
@@ -2580,57 +3342,72 @@
         "<hr>",
         "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.');"
+        {
+          "text": "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.'",
+          "testString": "assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, '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.')"
+        },
+        {
+          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.'",
+          "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a9367417b2b2512ae9",
@@ -2643,51 +3420,69 @@
         "<hr>",
         "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.');"
+        {
+          "text": "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 .'",
+          "testString": "assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, '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 .')"
+        },
+        {
+          "text": "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.'",
+          "testString": "assert($('#red').css('animation-timing-function') !== 'linear', 'The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.')"
+        },
+        {
+          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.'",
+          "testString": "assert($('#blue').css('animation-timing-function') == 'ease-out', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78a9367417b2b2512aea",
@@ -2701,54 +3496,69 @@
         "<hr>",
         "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.');"
+        {
+          "text": "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.'",
+          "testString": "assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     }
-  ]
-}
+  ],
+  "fileName": "01-responsive-web-design/applied-visual-design.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json b/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json
index 601b95a38b..b829fd41e5 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json
@@ -4,39 +4,6 @@
   "time": "5 hours",
   "helpRoom": "Help",
   "challenges": [
-    {
-      "id": "597d77903675177232517ab2",
-      "title": "Introduction to Basic CSS",
-      "description": [
-        "",
-        "",
-        "Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.<br><br>Note that CSS is case-sensitive so be careful with your capitalization.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "CSS has been adopted by all major browsers and allows you to control:<br><ul><li>color</li><li>fonts</li><li>positioning</li><li>spacing</li><li>sizing</li><li>decorations</li><li>transitions</li></ul>",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the <code>style</code> attribute. Alternatively, you can place CSS rules within <code>style</code> tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.<br><br>In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.",
-        "",
-        "@@STEP@@"
-      ],
-      "releasedOn": "",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {}
-    },
     {
       "id": "bad87fee1348bd9aedf08803",
       "title": "Change the Color of Text",
@@ -50,42 +17,15 @@
         "<hr>",
         "Change your <code>h2</code> element's style so that its text color is red."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');",
-        "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),' message: Your <code>style</code> declaration should end with a <code>;</code> .');"
+        {
+          "text": "Your <code>h2</code> element should be red.'",
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 'Your <code>h2</code> element should be red.')"
+        },
+        {
+          "text": "Your <code>style</code> declaration should end with a <code>;</code> .'",
+          "testString": "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*, 'Your <code>style</code> declaration should end with a <code>;</code> .')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -137,6 +77,48 @@
             "Измените стиль вашего элемента <code>h2</code> таким образом, чтобы текст элемента стал красным."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -154,45 +136,27 @@
         "<hr>",
         "Delete your <code>h2</code> element's style attribute, and instead create a CSS <code>style</code> block. Add the necessary CSS to turn all <code>h2</code> elements blue."
       ],
-      "challengeSeed": [
-        "<h2 style=\"color: red\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from your <code>h2</code> element.');",
-        "assert($(\"style\") && $(\"style\").length > 1, 'message: Create a <code>style</code> element.');",
-        "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h2</code> element should be blue.');",
-        "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');",
-        "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'message: Make sure all your <code>style</code> elements are valid and have a closing tag.');"
+        {
+          "text": "Remove the style attribute from your <code>h2</code> element.'",
+          "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.')"
+        },
+        {
+          "text": "Create a <code>style</code> element.'",
+          "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.')"
+        },
+        {
+          "text": "Your <code>h2</code> element should be blue.'",
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 'Your <code>h2</code> element should be blue.')"
+        },
+        {
+          "text": "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.'",
+          "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.')"
+        },
+        {
+          "text": "Make sure all your <code>style</code> elements are valid and have a closing tag.'",
+          "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -257,6 +221,48 @@
             "Удалите атрибут стиль вашего элемента <code>h2</code> и взамен создайте CSS-элемент <code>style</code>. Добавьте необходимый CSS, чтобы все элементы <code>h2</code> стали синими."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2 style=\"color: red\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -274,50 +280,23 @@
         "Inside your <code>style</code> element, change the <code>h2</code> selector to <code>.red-text</code> and update the color's value from <code>blue</code> to <code>red</code>.",
         "Give your <code>h2</code> element the <code>class</code> attribute with a value of <code>'red-text'</code>."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  h2 {",
-        "    color: blue;",
-        "  }",
-        "</style>",
-        "",
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');",
-        "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.');",
-        "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.');",
-        "assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.');"
+        {
+          "text": "Your <code>h2</code> element should be red.'",
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 'Your <code>h2</code> element should be red.')"
+        },
+        {
+          "text": "Your <code>h2</code> element should have the class <code>red-text</code>.'",
+          "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.')"
+        },
+        {
+          "text": "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.'",
+          "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a <code>red-text</code> class and have its color set to red.')"
+        },
+        {
+          "text": "Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.'",
+          "testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -385,6 +364,54 @@
             "Присвойте вашему элементу <code>h2</code> атрибут <code>class</code> со значением <code>'red-text'</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  h2 {",
+            "    color: blue;",
+            "  }",
+            "</style>",
+            "",
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -393,51 +420,27 @@
       "description": [
         "Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your <code>red-text</code> class to the first <code>p</code> element."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');",
-        "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.');",
-        "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your first <code>p</code> element should be red.');",
-        "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'message: Your second and third <code>p</code> elements should not be red.');",
-        "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'message: Your first <code>p</code> element should have the class <code>red-text</code>.');"
+        {
+          "text": "Your <code>h2</code> element should be red.'",
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 'Your <code>h2</code> element should be red.')"
+        },
+        {
+          "text": "Your <code>h2</code> element should have the class <code>red-text</code>.'",
+          "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.')"
+        },
+        {
+          "text": "Your first <code>p</code> element should be red.'",
+          "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 'Your first <code>p</code> element should be red.')"
+        },
+        {
+          "text": "Your second and third <code>p</code> elements should not be red.'",
+          "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 'Your second and third <code>p</code> elements should not be red.')"
+        },
+        {
+          "text": "Your first <code>p</code> element should have the class <code>red-text</code>.'",
+          "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first <code>p</code> element should have the class <code>red-text</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -491,6 +494,54 @@
             "Примените класс <code>red-text</code> к вашим элемент первые <code>p</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .red-text {",
+            "    color: red;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -502,47 +553,11 @@
         "<hr>",
         "Inside the same <code>&#60;style&#62;</code> tag that contains your <code>red-text</code> class, create an entry for <code>p</code> elements and set the <code>font-size</code> to 16 pixels (<code>16px</code>)."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'message: Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
+        {
+          "text": "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'",
+          "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -584,6 +599,54 @@
             "Внутри того же элемента <code>&#60;style&#62;</code>, который содержит ваш класс <code>red-text</code>, создайте вхождение для элементов <code>p</code> и установите свойство <code>font-size</code> равным 16 пикселей (<code>16px</code>)."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .red-text {",
+            "    color: red;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -596,51 +659,11 @@
         "<hr>",
         "Make all of your <code>p</code> elements use the <code>monospace</code> font."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> elements should use the font <code>monospace</code>.');"
+        {
+          "text": "Your <code>p</code> elements should use the font <code>monospace</code>.'",
+          "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>monospace</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -686,6 +709,58 @@
             "Присвойте шрифт <code>monospace</code> всем вашим элементам <code>p</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .red-text {",
+            "    color: red;",
+            "  }",
+            "",
+            "  p {",
+            "    font-size: 16px;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -703,55 +778,23 @@
         "<hr>",
         "Create a <code>font-family</code> CSS rule that uses the <code>Lobster</code> font, and ensure that it will be applied to your <code>h2</code> element."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: monospace;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'message: Import the <code>Lobster</code> font.');",
-        "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your <code>h2</code> element should use the font <code>Lobster</code>.');",
-        "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'message: Use an <code>h2</code> CSS selector to change the font.');",
-        "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> element should still use the font <code>monospace</code>.');"
+        {
+          "text": "Import the <code>Lobster</code> font.'",
+          "testString": "assert(new RegExp(\"googleapis\", 'Import the <code>Lobster</code> font.')"
+        },
+        {
+          "text": "Your <code>h2</code> element should use the font <code>Lobster</code>.'",
+          "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.')"
+        },
+        {
+          "text": "Use an <code>h2</code> CSS selector to change the font.'",
+          "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an <code>h2</code> CSS selector to change the font.')"
+        },
+        {
+          "text": "Your <code>p</code> element should still use the font <code>monospace</code>.'",
+          "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>monospace</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -801,6 +844,59 @@
             "Примените свойство <code>font-family</code> со значением <code>Lobster</code> к вашему элементу <code>h2</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .red-text {",
+            "    color: red;",
+            "  }",
+            "",
+            "  p {",
+            "    font-size: 16px;",
+            "    font-family: monospace;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -817,60 +913,23 @@
         "In the last challenge, you imported the <code>Lobster</code> font using the <code>link</code> tag. Now comment out that import of the <code>Lobster</code> font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your <code>h2</code> element degrades to the <code>monospace</code> font.",
         "<strong>Note</strong><br>If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font."
       ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: monospace;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'message: Your h2 element should use the font <code>Lobster</code>.');",
-        "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'message: Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.');",
-        "assert(new RegExp(\"<!--[^fc]\", \"gi\").test(code), 'message: Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.');",
-        "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), 'message: Be sure to close your comment by adding <code>--&#62;</code>.');"
+        {
+          "text": "Your h2 element should use the font <code>Lobster</code>.'",
+          "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.')"
+        },
+        {
+          "text": "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.'",
+          "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?, 'Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.')"
+        },
+        {
+          "text": "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.'",
+          "testString": "assert(new RegExp(\"<!--[^fc]\", 'Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.')"
+        },
+        {
+          "text": "Be sure to close your comment by adding <code>--&#62;</code>.'",
+          "testString": "assert(new RegExp(\"[^fc]-->\", 'Be sure to close your comment by adding <code>--&#62;</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -920,6 +979,64 @@
             "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт <code>Lobster</code> становится недоступен. Обратите внимание как происходит деградация до шрифта <code>monospace</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+            "<style>",
+            "  .red-text {",
+            "    color: red;",
+            "  }",
+            "",
+            "  h2 {",
+            "    font-family: Lobster;",
+            "  }",
+            "",
+            "  p {",
+            "    font-size: 16px;",
+            "    font-family: monospace;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -933,58 +1050,15 @@
         "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>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "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%.');"
+        {
+          "text": "Your <code>img</code> element should have the class <code>smaller-image</code>.'",
+          "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your <code>img</code> element should have the class <code>smaller-image</code>.')"
+        },
+        {
+          "text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.'",
+          "testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1035,6 +1109,64 @@
             "<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1049,65 +1181,27 @@
         "Remember that you can apply multiple classes to an element using its <code>class</code> attribute, by separating each class name with a space. 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>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Your <code>img</code> element should have the class <code>smaller-image</code>.'",
+          "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')"
+        },
+        {
+          "text": "Your <code>img</code> element should have the class <code>thick-green-border</code>.'",
+          "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.')"
+        },
+        {
+          "text": "Give your image a border width of <code>10px</code>.'",
+          "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 'Give your image a border width of <code>10px</code>.')"
+        },
+        {
+          "text": "Give your image a border style of <code>solid</code>.'",
+          "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.')"
+        },
+        {
+          "text": "The border around your <code>img</code> element should be green.'",
+          "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 'The border around your <code>img</code> element should be green.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1166,7 +1260,69 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08814",
@@ -1177,68 +1333,15 @@
         "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 challenge allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or the <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>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <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>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "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>');"
+        {
+          "text": "Your image element should have the class \"thick-green-border\".'",
+          "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".')"
+        },
+        {
+          "text": "Your image should have a border radius of <code>10px</code>'",
+          "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1280,7 +1383,75 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <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>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08815",
@@ -1290,69 +1461,15 @@
         "<hr>",
         "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>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <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>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of <code>50%</code>, making it perfectly circular.');",
-        "assert(code.match(/50%/g), 'message: Be sure to use a percentage value of <code>50%</code>.');"
+        {
+          "text": "Your image should have a border radius of <code>50%</code>, making it perfectly circular.'",
+          "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.')"
+        },
+        {
+          "text": "Be sure to use a percentage value of <code>50%</code>.'",
+          "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of <code>50%</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1389,6 +1506,75 @@
             "Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>50%</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <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>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1401,69 +1587,15 @@
         "<hr>",
         "Create a class called <code>silver-background</code> with the <code>background-color</code> of silver. Assign this class to your <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>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <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>",
-        "  ",
-        "  <div>",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"div\").hasClass(\"silver-background\"), 'message: Give your <code>div</code> element the class <code>silver-background</code>.');",
-        "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'message: Your <code>div</code> element should have a silver background.');"
+        {
+          "text": "Give your <code>div</code> element the class <code>silver-background</code>.'",
+          "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your <code>div</code> element the class <code>silver-background</code>.')"
+        },
+        {
+          "text": "Your <code>div</code> element should have a silver background.'",
+          "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 'Your <code>div</code> element should have a silver background.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1510,6 +1642,75 @@
             "Создайте класс <code>silver-background</code> со значением свойства <code>background-color</code> равным <code>silver</code>. Назначьте этот класс вашему элементу <code>div</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <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>",
+            "  ",
+            "  <div>",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1524,72 +1725,11 @@
         "<hr>",
         "Give your <code>form</code> element the id <code>cat-photo-form</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;",
-        "  }",
-        "",
-        "  .silver-background {",
-        "    background-color: silver;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <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>",
-        "  ",
-        "  <div class=\"silver-background\">",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
+        {
+          "text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.'",
+          "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1642,6 +1782,79 @@
             "Присвойте вашему элементу <code>form</code> атрибут <code>id</code> со значением <code>cat-photo-form</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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;",
+            "  }",
+            "",
+            "  .silver-background {",
+            "    background-color: silver;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <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>",
+            "  ",
+            "  <div class=\"silver-background\">",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1656,75 +1869,23 @@
         "<hr>",
         "Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
       ],
-      "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;",
-        "  }",
-        "",
-        "  .silver-background {",
-        "    background-color: silver;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <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>",
-        "  ",
-        "  <div class=\"silver-background\">",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\" id=\"cat-photo-form\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.');",
-        "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'message: Your <code>form</code> element should have the <code>background-color</code> of green.');",
-        "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'message: Make sure your <code>form</code> element has an <code>id</code> attribute.');",
-        "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'message: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
+        {
+          "text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.'",
+          "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.')"
+        },
+        {
+          "text": "Your <code>form</code> element should have the <code>background-color</code> of green.'",
+          "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 'Your <code>form</code> element should have the <code>background-color</code> of green.')"
+        },
+        {
+          "text": "Make sure your <code>form</code> element has an <code>id</code> attribute.'",
+          "testString": "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.')"
+        },
+        {
+          "text": "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.'",
+          "testString": "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1775,6 +1936,79 @@
             "Попробуйте установить для своей формы, которая теперь имеет атрибут <code>id</code> равный <code>cat-photo-form</code>, зелёный в качестве цвета фона."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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;",
+            "  }",
+            "",
+            "  .silver-background {",
+            "    background-color: silver;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <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>",
+            "  ",
+            "  <div class=\"silver-background\">",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\" id=\"cat-photo-form\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1790,46 +2024,11 @@
         "<hr>",
         "Change the <code>padding</code> of your blue box to match that of your red box."
       ],
-      "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: 10px;",
-        "  }",
-        "  ",
-        "  .red-box {",
-        "    background-color: crimson;",
-        "    color: #fff;",
-        "    padding: 20px;",
-        "  }",
-        "",
-        "  .blue-box {",
-        "    background-color: blue;",
-        "    color: #fff;",
-        "    padding: 10px;",
-        "  }",
-        "</style>",
-        "<h5 class=\"injected-text\">margin</h5>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box blue-box\">padding</h5>",
-        "</div>"
-      ],
       "tests": [
-        "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'message: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
+        {
+          "text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1886,7 +2085,54 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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: 10px;",
+            "  }",
+            "  ",
+            "  .red-box {",
+            "    background-color: crimson;",
+            "    color: #fff;",
+            "    padding: 20px;",
+            "  }",
+            "",
+            "  .blue-box {",
+            "    background-color: blue;",
+            "    color: #fff;",
+            "    padding: 10px;",
+            "  }",
+            "</style>",
+            "<h5 class=\"injected-text\">margin</h5>",
+            "",
+            "<div class=\"box yellow-box\">",
+            "  <h5 class=\"box red-box\">padding</h5>",
+            "  <h5 class=\"box blue-box\">padding</h5>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08822",
@@ -1898,48 +2144,11 @@
         "<hr>",
         "Change the <code>margin</code> of the blue box to match that of the red box."
       ],
-      "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: 10px;",
-        "  }",
-        "  ",
-        "  .red-box {",
-        "    background-color: crimson;",
-        "    color: #fff;",
-        "    padding: 20px;",
-        "    margin: 20px;",
-        "  }",
-        "",
-        "  .blue-box {",
-        "    background-color: blue;",
-        "    color: #fff;",
-        "    padding: 20px;",
-        "    margin: 10px;",
-        "  }",
-        "</style>",
-        "<h5 class=\"injected-text\">margin</h5>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box blue-box\">padding</h5>",
-        "</div>"
-      ],
       "tests": [
-        "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'message: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
+        {
+          "text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1985,7 +2194,56 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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: 10px;",
+            "  }",
+            "  ",
+            "  .red-box {",
+            "    background-color: crimson;",
+            "    color: #fff;",
+            "    padding: 20px;",
+            "    margin: 20px;",
+            "  }",
+            "",
+            "  .blue-box {",
+            "    background-color: blue;",
+            "    color: #fff;",
+            "    padding: 20px;",
+            "    margin: 10px;",
+            "  }",
+            "</style>",
+            "<h5 class=\"injected-text\">margin</h5>",
+            "",
+            "<div class=\"box yellow-box\">",
+            "  <h5 class=\"box red-box\">padding</h5>",
+            "  <h5 class=\"box blue-box\">padding</h5>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08823",
@@ -1997,47 +2255,11 @@
         "Try to set the <code>margin</code> to a negative value like the one for the red box.",
         "Change the <code>margin</code> of the blue box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
       ],
-      "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: 10px;",
-        "  }",
-        "  ",
-        "  .red-box {",
-        "    background-color: crimson;",
-        "    color: #fff;",
-        "    padding: 20px;",
-        "    margin: -15px;",
-        "  }",
-        "",
-        "  .blue-box {",
-        "    background-color: blue;",
-        "    color: #fff;",
-        "    padding: 20px;",
-        "    margin: 20px;",
-        "  }",
-        "</style>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box blue-box\">padding</h5>",
-        "</div>"
-      ],
       "tests": [
-        "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'message: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
+        {
+          "text": "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2083,7 +2305,55 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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: 10px;",
+            "  }",
+            "  ",
+            "  .red-box {",
+            "    background-color: crimson;",
+            "    color: #fff;",
+            "    padding: 20px;",
+            "    margin: -15px;",
+            "  }",
+            "",
+            "  .blue-box {",
+            "    background-color: blue;",
+            "    color: #fff;",
+            "    padding: 20px;",
+            "    margin: 20px;",
+            "  }",
+            "</style>",
+            "",
+            "<div class=\"box yellow-box\">",
+            "  <h5 class=\"box red-box\">padding</h5>",
+            "  <h5 class=\"box blue-box\">padding</h5>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08824",
@@ -2094,51 +2364,23 @@
         "<hr>",
         "Give the blue box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .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: 10px;",
-        "  }",
-        "  ",
-        "  .red-box {",
-        "    background-color: crimson;",
-        "    color: #fff;",
-        "    padding-top: 40px;",
-        "    padding-right: 20px;",
-        "    padding-bottom: 20px;",
-        "    padding-left: 40px;",
-        "  }",
-        "",
-        "  .blue-box {",
-        "    background-color: blue;",
-        "    color: #fff;",
-        "  }",
-        "</style>",
-        "<h5 class=\"injected-text\">margin</h5>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box blue-box\">padding</h5>",
-        "</div>"
-      ],
       "tests": [
-        "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');",
-        "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
+        {
+          "text": "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2180,7 +2422,56 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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: 10px;",
+            "  }",
+            "  ",
+            "  .red-box {",
+            "    background-color: crimson;",
+            "    color: #fff;",
+            "    padding-top: 40px;",
+            "    padding-right: 20px;",
+            "    padding-bottom: 20px;",
+            "    padding-left: 40px;",
+            "  }",
+            "",
+            "  .blue-box {",
+            "    background-color: blue;",
+            "    color: #fff;",
+            "  }",
+            "</style>",
+            "<h5 class=\"injected-text\">margin</h5>",
+            "",
+            "<div class=\"box yellow-box\">",
+            "  <h5 class=\"box red-box\">padding</h5>",
+            "  <h5 class=\"box blue-box\">padding</h5>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1248bd9aedf08824",
@@ -2191,51 +2482,23 @@
         "<hr>",
         "Give the blue box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .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: 10px;",
-        "  }",
-        "  ",
-        "  .red-box {",
-        "    background-color: crimson;",
-        "    color: #fff;",
-        "    margin-top: 40px;",
-        "    margin-right: 20px;",
-        "    margin-bottom: 20px;",
-        "    margin-left: 40px;",
-        "  }",
-        "",
-        "  .blue-box {",
-        "    background-color: blue;",
-        "    color: #fff;",
-        "  }",
-        "</style>",
-        "<h5 class=\"injected-text\">margin</h5>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box blue-box\">padding</h5>",
-        "</div>"
-      ],
       "tests": [
-        "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
-        "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+        {
+          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2276,6 +2539,55 @@
             "Присвойте красному прямоугольнику значение <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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: 10px;",
+            "  }",
+            "  ",
+            "  .red-box {",
+            "    background-color: crimson;",
+            "    color: #fff;",
+            "    margin-top: 40px;",
+            "    margin-right: 20px;",
+            "    margin-bottom: 20px;",
+            "    margin-left: 40px;",
+            "  }",
+            "",
+            "  .blue-box {",
+            "    background-color: blue;",
+            "    color: #fff;",
+            "  }",
+            "</style>",
+            "<h5 class=\"injected-text\">margin</h5>",
+            "",
+            "<div class=\"box yellow-box\">",
+            "  <h5 class=\"box red-box\">padding</h5>",
+            "  <h5 class=\"box blue-box\">padding</h5>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2288,49 +2600,27 @@
         "<hr>",
         "Use Clockwise Notation to give the \".blue-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .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: crimson;",
-        "    color: #fff;",
-        "    padding: 20px 40px 20px 40px;",
-        "  }",
-        "",
-        "  .blue-box {",
-        "    background-color: blue;",
-        "    color: #fff;",
-        "  }",
-        "</style>",
-        "<h5 class=\"injected-text\">margin</h5>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box blue-box\">padding</h5>",
-        "</div>"
-      ],
       "tests": [
-        "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');",
-        "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');",
-        "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of <code>blue-box</code> class.');"
+        {
+          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.')"
+        },
+        {
+          "text": "You should use the clockwise notation to set the padding of <code>blue-box</code> class.'",
+          "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of <code>blue-box</code> class.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2375,6 +2665,52 @@
             "Используйте систему ссылок по часовой стрелке для установки для класса \".blue-box\" значения отступа содержимого <code>padding</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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: crimson;",
+            "    color: #fff;",
+            "    padding: 20px 40px 20px 40px;",
+            "  }",
+            "",
+            "  .blue-box {",
+            "    background-color: blue;",
+            "    color: #fff;",
+            "  }",
+            "</style>",
+            "<h5 class=\"injected-text\">margin</h5>",
+            "",
+            "<div class=\"box yellow-box\">",
+            "  <h5 class=\"box red-box\">padding</h5>",
+            "  <h5 class=\"box blue-box\">padding</h5>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2388,48 +2724,23 @@
         "<hr>",
         "Use <code>Clockwise Notation</code> to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .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: crimson;",
-        "    color: #fff;",
-        "    margin: 20px 40px 20px 40px;",
-        "  }",
-        "",
-        "  .blue-box {",
-        "    background-color: blue;",
-        "    color: #fff;",
-        "  }",
-        "</style>",
-        "<h5 class=\"injected-text\">margin</h5>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box blue-box\">padding</h5>",
-        "</div>"
-      ],
       "tests": [
-        "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
-        "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+        {
+          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.')"
+        },
+        {
+          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.'",
+          "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2478,6 +2789,52 @@
             "Используйте систему ссылок по часовой стрелке для установки для класса <code>blue-box</code> значения отступа <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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: crimson;",
+            "    color: #fff;",
+            "    margin: 20px 40px 20px 40px;",
+            "  }",
+            "",
+            "  .blue-box {",
+            "    background-color: blue;",
+            "    color: #fff;",
+            "  }",
+            "</style>",
+            "<h5 class=\"injected-text\">margin</h5>",
+            "",
+            "<div class=\"box yellow-box\">",
+            "  <h5 class=\"box red-box\">padding</h5>",
+            "  <h5 class=\"box blue-box\">padding</h5>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2491,81 +2848,99 @@
         "<hr>",
         "Using the <code>type</code> attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px."
       ],
-      "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;",
-        "  }",
-        "",
-        "  .silver-background {",
-        "    background-color: silver;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "<main>",
-        "  <p class=\"red-text\">Click here to view more <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>",
-        "  ",
-        "  <div class=\"silver-background\">",
-        "    <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>",
-        "  </div>",
-        "  ",
-        "  <form action=\"/submit-cat-photo\" id=\"cat-photo-form\">",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "tests": [
-        "assert(code.match(/<style>[\\s\\S]*?\\[type=(\"|')checkbox\\1\\]\\s*?{[\\s\\S]*?}[\\s\\S]*?<\\/style>/gi),'message: The <code>type</code> attribute selector should be used to select the checkboxes.');",
-        "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'message: The top margins of the checkboxes should be 10px.');",
-        "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'message: The bottom margins of the checkboxes should be 15px.');"
+        {
+          "text": "The <code>type</code> attribute selector should be used to select the checkboxes.'",
+          "testString": "assert(code.match(/<style>[\\s\\S]*?\\[type=(\"|')checkbox\\1\\]\\s*?{[\\s\\S]*?}[\\s\\S]*?<\\/style>/gi), 'The <code>type</code> attribute selector should be used to select the checkboxes.')"
+        },
+        {
+          "text": "The top margins of the checkboxes should be 10px.'",
+          "testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()), 'The top margins of the checkboxes should be 10px.')"
+        },
+        {
+          "text": "The bottom margins of the checkboxes should be 15px.'",
+          "testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()), 'The bottom margins of the checkboxes should be 15px.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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;",
+            "  }",
+            "",
+            "  .silver-background {",
+            "    background-color: silver;",
+            "  }",
+            "</style>",
+            "",
+            "<h2 class=\"red-text\">CatPhotoApp</h2>",
+            "<main>",
+            "  <p class=\"red-text\">Click here to view more <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>",
+            "  ",
+            "  <div class=\"silver-background\">",
+            "    <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>",
+            "  </div>",
+            "  ",
+            "  <form action=\"/submit-cat-photo\" id=\"cat-photo-form\">",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+            "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad82fee1322bd9aedf08721",
@@ -2578,50 +2953,65 @@
         "<hr>",
         "Add a <code>padding</code> property to the element with class <code>red-box</code> and set it to <code>1.5em</code>."
       ],
-      "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>"
-      ],
       "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>.');"
+        {
+          "text": "Your <code>red-box</code> class should have a <code>padding</code> property.'",
+          "testString": "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', 'Your <code>red-box</code> class should have a <code>padding</code> property.')"
+        },
+        {
+          "text": "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.'",
+          "testString": "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08736",
@@ -2634,15 +3024,19 @@
         "We can do this by adding the following to our <code>style</code> element:",
         "<blockquote>body {<br>&nbsp;&nbsp;background-color: black;<br>}</blockquote>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "",
-        "</style>"
-      ],
       "tests": [
-        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of black.');",
-        "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'message: Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');",
-        "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'message: Make sure your CSS rule ends with a semi-colon.');"
+        {
+          "text": "Give your <code>body</code> element the <code>background-color</code> of black.'",
+          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 'Give your <code>body</code> element the <code>background-color</code> of black.')"
+        },
+        {
+          "text": "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.'",
+          "testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule is properly formatted with both opening and closing curly brackets.')"
+        },
+        {
+          "text": "Make sure your CSS rule ends with a semi-colon.'",
+          "testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule ends with a semi-colon.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2693,6 +3087,20 @@
             "<blockquote>body {<br>&nbsp;&nbsp;background-color: black;<br>}</blockquote>"
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "",
+            "</style>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2706,22 +3114,35 @@
         "Then, let's give all elements on your page the color of <code>green</code> by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
         "Finally, give your <code>body</code> element the font-family of <code>monospace</code> by adding <code>font-family: monospace;</code> to your <code>body</code> element's style declaration."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: black;",
-        "  }",
-        "",
-        "</style>"
-      ],
       "tests": [
-        "assert(($(\"h1\").length > 0), 'message: Create an <code>h1</code> element.');",
-        "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'message: Your <code>h1</code> element should have the text <code>Hello World</code>.');",
-        "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'message: Make sure your <code>h1</code> element has a closing tag.');",
-        "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');",
-        "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'message: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.');",
-        "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'message: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.');",
-        "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
+        {
+          "text": "Create an <code>h1</code> element.'",
+          "testString": "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the text <code>Hello World</code>.'",
+          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')"
+        },
+        {
+          "text": "Make sure your <code>h1</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')"
+        },
+        {
+          "text": "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.'",
+          "testString": "assert(($(\"body\").css(\"color\") === \"rgb(0, 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.')"
+        },
+        {
+          "text": "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.'",
+          "testString": "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.'",
+          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.'",
+          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2770,6 +3191,23 @@
             "В завершении, присвойте вашему элементу <code>body</code> свойство семейства шрифтов равное <code>monospace</code> путём добавления <code>font-family: monospace;</code> к свойствам, указанным в объявлении стилей для элемента <code>body</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: black;",
+            "  }",
+            "",
+            "</style>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2783,20 +3221,19 @@
         "Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
         "Give your <code>h1</code> element the class of <code>pink-text</code>."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: black;",
-        "    font-family: monospace;",
-        "    color: green;",
-        "  }",
-        "</style>",
-        "<h1>Hello World!</h1>"
-      ],
       "tests": [
-        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
-        "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'message: Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.');",
-        "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.');"
+        {
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')"
+        },
+        {
+          "text": "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.'",
+          "testString": "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should be pink.'",
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 'Your <code>h1</code> element should be pink.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2843,6 +3280,25 @@
             "Назначьте вашему элементу <code>h1</code> класс <code>pink-text</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: black;",
+            "    font-family: monospace;",
+            "    color: green;",
+            "  }",
+            "</style>",
+            "<h1>Hello World!</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2859,24 +3315,23 @@
         "Note: It doesn't matter which order the classes are listed in the HTML element.",
         "However, the order of the <code>class</code> declarations in the <code>&#60;style&#62;</code> section are what is important. The second declaration will always take precedence over the first. Because <code>.blue-text</code> is declared second, it overrides the attributes of <code>.pink-text</code>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: black;",
-        "    font-family: monospace;",
-        "    color: green;",
-        "  }",
-        "  .pink-text {",
-        "    color: pink;",
-        "  }",
-        "</style>",
-        "<h1 class=\"pink-text\">Hello World!</h1>"
-      ],
       "tests": [
-        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
-        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
-        "assert($(\".pink-text\").hasClass(\"blue-text\"), 'message: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');",
-        "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h1</code> element should be blue.');"
+        {
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')"
+        },
+        {
+          "text": "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.'",
+          "testString": "assert($(\".pink-text\").hasClass(\"blue-text\"), 'Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should be blue.'",
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(0, 'Your <code>h1</code> element should be blue.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2937,6 +3392,28 @@
             "Однако, порядок, в котором <code>классы</code> указаны в элементе <code>&#60;style&#62;</code> важен. Последующее объявление будет всегда иметь приоритет над предшествующим. Поскольку <code>.blue-text</code> объявлен последним, он переопрпделяет значения заданные атрибутом <code>.pink-text</code>"
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: black;",
+            "    font-family: monospace;",
+            "    color: green;",
+            "  }",
+            "  .pink-text {",
+            "    color: pink;",
+            "  }",
+            "</style>",
+            "<h1 class=\"pink-text\">Hello World!</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2954,30 +3431,35 @@
         "<blockquote>#brown-text {<br>&nbsp;&nbsp;color: brown;<br>}</blockquote>",
         "Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: black;",
-        "    font-family: monospace;",
-        "    color: green;",
-        "  }",
-        "  .pink-text {",
-        "    color: pink;",
-        "  }",
-        "  .blue-text {",
-        "    color: blue;",
-        "  }",
-        "</style>",
-        "<h1 class=\"pink-text blue-text\">Hello World!</h1>"
-      ],
       "tests": [
-        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
-        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
-        "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Give your <code>h1</code> element the id of <code>orange-text</code>.');",
-        "assert(($(\"h1\").length === 1), 'message: There should be only one <code>h1</code> element.');",
-        "assert(code.match(/#orange-text\\s*{/gi), 'message: Create a CSS declaration for your <code>orange-text</code> id');",
-        "assert(!code.match(/<h1.*style.*>/gi), 'message: Do not give your <code>h1</code> any <code>style</code> attributes.');",
-        "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'message: Your <code>h1</code> element should be orange.');"
+        {
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element the id of <code>orange-text</code>.'",
+          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.')"
+        },
+        {
+          "text": "There should be only one <code>h1</code> element.'",
+          "testString": "assert(($(\"h1\").length === 1), 'There should be only one <code>h1</code> element.')"
+        },
+        {
+          "text": "Create a CSS declaration for your <code>orange-text</code> id'",
+          "testString": "assert(code.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id')"
+        },
+        {
+          "text": "Do not give your <code>h1</code> any <code>style</code> attributes.'",
+          "testString": "assert(!code.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should be orange.'",
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 'Your <code>h1</code> element should be orange.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3040,6 +3522,31 @@
             "Внимание: Не имеет значения объявите ли вы стиль выше или ниже класса <code>pink-text</code>, так как атрибут <code>id</code> всегда имеет приоритет."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: black;",
+            "    font-family: monospace;",
+            "    color: green;",
+            "  }",
+            "  .pink-text {",
+            "    color: pink;",
+            "  }",
+            "  .blue-text {",
+            "    color: blue;",
+            "  }",
+            "</style>",
+            "<h1 class=\"pink-text blue-text\">Hello World!</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3053,31 +3560,27 @@
         "<code>&#60;h1 style=\"color: green\"&#62;</code>",
         "Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: black;",
-        "    font-family: monospace;",
-        "    color: green;",
-        "  }",
-        "  #orange-text {",
-        "    color: orange;",
-        "  }",
-        "  .pink-text {",
-        "    color: pink;",
-        "  }",
-        "  .blue-text {",
-        "    color: blue;",
-        "  }",
-        "</style>",
-        "<h1 id=\"orange-text\" class=\"pink-text blue-text\">Hello World!</h1>"
-      ],
       "tests": [
-        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
-        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
-        "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.');",
-        "assert(document.querySelector('h1[style]'), 'message: Give your <code>h1</code> element an inline style.');",
-        "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'message: Your <code>h1</code> element should be white.');"
+        {
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.'",
+          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element an inline style.'",
+          "testString": "assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should be white.'",
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 'Your <code>h1</code> element should be white.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3126,6 +3629,34 @@
             "Оставьте классы <code>blue-text</code> и <code>pink-text</code> назначенными вашему элементу <code>h1</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: black;",
+            "    font-family: monospace;",
+            "    color: green;",
+            "  }",
+            "  #orange-text {",
+            "    color: orange;",
+            "  }",
+            "  .pink-text {",
+            "    color: pink;",
+            "  }",
+            "  .blue-text {",
+            "    color: blue;",
+            "  }",
+            "</style>",
+            "<h1 id=\"orange-text\" class=\"pink-text blue-text\">Hello World!</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3141,32 +3672,31 @@
         "An example of how to do this is:",
         "<code>color: red !important;</code>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: black;",
-        "    font-family: monospace;",
-        "    color: green;",
-        "  }",
-        "  #orange-text {",
-        "    color: orange;",
-        "  }",
-        "  .pink-text {",
-        "    color: pink;",
-        "  }",
-        "  .blue-text {",
-        "    color: blue;",
-        "  }",
-        "</style>",
-        "<h1 id=\"orange-text\" class=\"pink-text blue-text\" style=\"color: white\">Hello World!</h1>"
-      ],
       "tests": [
-        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
-        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
-        "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.');",
-        "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'message: Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.');",
-        "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'message: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');",
-        "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.');"
+        {
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.'",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.'",
+          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.'",
+          "testString": "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.')"
+        },
+        {
+          "text": "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.'",
+          "testString": "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.')"
+        },
+        {
+          "text": "Your <code>h1</code> element should be pink.'",
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 'Your <code>h1</code> element should be pink.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3223,6 +3753,34 @@
             "<code>color: red !important;</code>"
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: black;",
+            "    font-family: monospace;",
+            "    color: green;",
+            "  }",
+            "  #orange-text {",
+            "    color: orange;",
+            "  }",
+            "  .pink-text {",
+            "    color: pink;",
+            "  }",
+            "  .blue-text {",
+            "    color: blue;",
+            "  }",
+            "</style>",
+            "<h1 id=\"orange-text\" class=\"pink-text blue-text\" style=\"color: white\">Hello World!</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3236,16 +3794,15 @@
         "<hr>",
         "Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: black;",
-        "  }",
-        "</style>"
-      ],
       "tests": [
-        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the background-color of black.');",
-        "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> for the color black instead of the word <code>black</code>.');"
+        {
+          "text": "Give your <code>body</code> element the background-color of black.'",
+          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 'Give your <code>body</code> element the background-color of black.')"
+        },
+        {
+          "text": "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.'",
+          "testString": "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3290,6 +3847,22 @@
             "Замените слово <code>black</code> в свойстве <code>background-color</code> нашего элемента <code>body</code> на представление в виде <code>hex-кода</code>, <code>#000000</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: black;",
+            "  }",
+            "</style>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3305,39 +3878,39 @@
         "Replace the color words in our <code>style</code> element with their correct hex codes.",
         "<table class='table table-striped'><tr><th>Color</th><th>Hex Code</th></tr><tr><td>Dodger Blue</td><td><code>#1E90FF</code></td></tr><tr><td>Green</td><td><code>#00FF00</code></td></tr><tr><td>Orange</td><td><code>#FFA500</code></td></tr><tr><td>Red</td><td><code>#FF0000</code></td></tr></table>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .red-text {",
-        "    color: black;",
-        "  }",
-        "  .green-text {",
-        "    color: black;",
-        "  }",
-        "  .dodger-blue-text {",
-        "    color: black;",
-        "  }",
-        "  .orange-text {",
-        "    color: black;",
-        "  }",
-        "</style>",
-        "",
-        "<h1 class=\"red-text\">I am red!</h1>",
-        "",
-        "<h1 class=\"green-text\">I am green!</h1>",
-        "",
-        "<h1 class=\"dodger-blue-text\">I am dodger blue!</h1>",
-        "",
-        "<h1 class=\"orange-text\">I am orange!</h1>"
-      ],
       "tests": [
-        "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');",
-        "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'message: Use the <code>hex code</code> for the color red instead of the word <code>red</code>.');",
-        "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'message: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');",
-        "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'message: Use the <code>hex code</code> for the color green instead of the word <code>green</code>.');",
-        "assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', 'message: Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.');",
-        "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'message: Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.');",
-        "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'message: Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.');",
-        "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'message: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.');"
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.'",
+          "testString": "assert($('.red-text').css('color') === 'rgb(255, 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.')"
+        },
+        {
+          "text": "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.'",
+          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.'",
+          "testString": "assert($('.green-text').css('color') === 'rgb(0, 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.')"
+        },
+        {
+          "text": "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.'",
+          "testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.'",
+          "testString": "assert($('.dodger-blue-text').css('color') === 'rgb(30, 'Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.')"
+        },
+        {
+          "text": "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.'",
+          "testString": "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.'",
+          "testString": "assert($('.orange-text').css('color') === 'rgb(255, 'Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.')"
+        },
+        {
+          "text": "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.'",
+          "testString": "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3378,6 +3951,39 @@
             "Сделайте цвет фона элемента <code>body</code> оранжевым, присвоив его соответствующему свойству значение hex-кода равное <code>#FFA500</code>"
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .red-text {",
+            "    color: black;",
+            "  }",
+            "  .green-text {",
+            "    color: black;",
+            "  }",
+            "  .dodger-blue-text {",
+            "    color: black;",
+            "  }",
+            "  .orange-text {",
+            "    color: black;",
+            "  }",
+            "</style>",
+            "",
+            "<h1 class=\"red-text\">I am red!</h1>",
+            "",
+            "<h1 class=\"green-text\">I am green!</h1>",
+            "",
+            "<h1 class=\"dodger-blue-text\">I am dodger blue!</h1>",
+            "",
+            "<h1 class=\"orange-text\">I am orange!</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3391,39 +3997,39 @@
         "Go ahead, try using the abbreviated hex codes to color the correct elements.",
         "<table class='table table-striped'><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></table>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .red-text {",
-        "    color: #000000;",
-        "  }",
-        "  .fuchsia-text {",
-        "    color: #000000;",
-        "  }",
-        "  .cyan-text {",
-        "    color: #000000;",
-        "  }",
-        "  .green-text {",
-        "    color: #000000;",
-        "  }",
-        "</style>",
-        "",
-        "<h1 class=\"red-text\">I am red!</h1>",
-        "",
-        "<h1 class=\"fuchsia-text\">I am fuchsia!</h1>",
-        "",
-        "<h1 class=\"cyan-text\">I am cyan!</h1>",
-        "",
-        "<h1 class=\"green-text\">I am green!</h1>"
-      ],
       "tests": [
-        "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');",
-        "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'message: Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.');",
-        "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'message: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');",
-        "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'message: Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.');",
-        "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'message: Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.');",
-        "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'message: Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.');",
-        "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'message: Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.');",
-        "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'message: Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.');"
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.'",
+          "testString": "assert($('.red-text').css('color') === 'rgb(255, 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.')"
+        },
+        {
+          "text": "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.'",
+          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.'",
+          "testString": "assert($('.green-text').css('color') === 'rgb(0, 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.')"
+        },
+        {
+          "text": "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.'",
+          "testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.'",
+          "testString": "assert($('.cyan-text').css('color') === 'rgb(0, 'Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.')"
+        },
+        {
+          "text": "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.'",
+          "testString": "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.'",
+          "testString": "assert($('.fuchsia-text').css('color') === 'rgb(255, 'Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.')"
+        },
+        {
+          "text": "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.'",
+          "testString": "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3468,6 +4074,39 @@
             "Вперёд, попробуйте применить значение <code>#F00</code>, чтобы сделать цвет фона элемента <code>body</code> красным."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .red-text {",
+            "    color: #000000;",
+            "  }",
+            "  .fuchsia-text {",
+            "    color: #000000;",
+            "  }",
+            "  .cyan-text {",
+            "    color: #000000;",
+            "  }",
+            "  .green-text {",
+            "    color: #000000;",
+            "  }",
+            "</style>",
+            "",
+            "<h1 class=\"red-text\">I am red!</h1>",
+            "",
+            "<h1 class=\"fuchsia-text\">I am fuchsia!</h1>",
+            "",
+            "<h1 class=\"cyan-text\">I am cyan!</h1>",
+            "",
+            "<h1 class=\"green-text\">I am green!</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3486,16 +4125,15 @@
         "<hr>",
         "Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    background-color: #F00;",
-        "  }",
-        "</style>"
-      ],
       "tests": [
-        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your <code>body</code> element should have a black background.');",
-        "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element a color of black.');"
+        {
+          "text": "Your <code>body</code> element should have a black background.'",
+          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 'Your <code>body</code> element should have a black background.')"
+        },
+        {
+          "text": "Use <code>rgb</code> to give your <code>body</code> element a color of black.'",
+          "testString": "assert(code.match(/rgb\\s*\\(\\s*0\\s*, 'Use <code>rgb</code> to give your <code>body</code> element a color of black.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3556,6 +4194,22 @@
             "Давайте заменим hex-код в цвете фона нашего элемента <code>body</code> на значение в формате RGB для получения чёрного: <code>rgb(0, 0, 0)</code>"
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  body {",
+            "    background-color: #F00;",
+            "  }",
+            "</style>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3567,39 +4221,39 @@
         "Replace the hex codes in our <code>style</code> element with their correct RGB values.",
         "<table class='table table-striped'><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></table>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .red-text {",
-        "    color: #000000;",
-        "  }",
-        "  .orchid-text {",
-        "    color: #000000;",
-        "  }",
-        "  .sienna-text {",
-        "    color: #000000;",
-        "  }",
-        "  .blue-text {",
-        "    color: #000000;",
-        "  }",
-        "</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-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');",
-        "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use <code>rgb</code> for the color red.');",
-        "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'message: Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.');",
-        "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use <code>rgb</code> for the color orchid.');",
-        "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'message: Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.');",
-        "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use <code>rgb</code> for the color blue.');",
-        "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'message: Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.');",
-        "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use <code>rgb</code> for the color sienna.');"
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.'",
+          "testString": "assert($('.red-text').css('color') === 'rgb(255, 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.')"
+        },
+        {
+          "text": "Use <code>rgb</code> for the color red.'",
+          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?, 'Use <code>rgb</code> for the color red.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.'",
+          "testString": "assert($('.orchid-text').css('color') === 'rgb(218, 'Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.')"
+        },
+        {
+          "text": "Use <code>rgb</code> for the color orchid.'",
+          "testString": "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?, 'Use <code>rgb</code> for the color orchid.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.'",
+          "testString": "assert($('.blue-text').css('color') === 'rgb(0, 'Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.')"
+        },
+        {
+          "text": "Use <code>rgb</code> for the color blue.'",
+          "testString": "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?, 'Use <code>rgb</code> for the color blue.')"
+        },
+        {
+          "text": "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.'",
+          "testString": "assert($('.sienna-text').css('color') === 'rgb(160, 'Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.')"
+        },
+        {
+          "text": "Use <code>rgb</code> for the color sienna.'",
+          "testString": "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?, 'Use <code>rgb</code> for the color sienna.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -3636,6 +4290,39 @@
             "Измените цвет фона элемента <code>body</code> на значение в формате RGB соответствующее оранжевому: <code>rgb(255, 165, 0)</code>"
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .red-text {",
+            "    color: #000000;",
+            "  }",
+            "  .orchid-text {",
+            "    color: #000000;",
+            "  }",
+            "  .sienna-text {",
+            "    color: #000000;",
+            "  }",
+            "  .blue-text {",
+            "    color: #000000;",
+            "  }",
+            "</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -3647,219 +4334,237 @@
         "<hr>",
         "In the <code>penguin</code> class, change the <code>black</code> value to <code>gray</code>, the <code>gray</code> value to <code>white</code>, and the <code>yellow</code> value to <code>orange</code>."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .penguin {",
-        "    ",
-        "    /* change code below */",
-        "    --penguin-skin: black;",
-        "    --penguin-belly: gray;",
-        "    --penguin-beak: yellow;",
-        "    /* change code above */",
-        "    ",
-        "    position: relative;",
-        "    margin: auto;",
-        "    display: block;",
-        "    margin-top: 5%;",
-        "    width: 300px;",
-        "    height: 300px;",
-        "  }",
-        "  ",
-        "  .penguin-top {",
-        "    top: 10%;",
-        "    left: 25%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 50%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .penguin-bottom {",
-        "    top: 40%;",
-        "    left: 23.5%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 53%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-hand {",
-        "    top: 0%;",
-        "    left: -5%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 120% 30%;",
-        "    transform: rotate(45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .left-hand {",
-        "    top: 0%;",
-        "    left: 75%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 30% 120%;",
-        "    transform: rotate(-45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .right-cheek {",
-        "    top: 15%;",
-        "    left: 35%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .left-cheek {",
-        "    top: 15%;",
-        "    left: 5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .belly {",
-        "    top: 60%;",
-        "    left: 2.5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 95%;",
-        "    height: 100%;",
-        "    border-radius: 120% 120% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-feet {",
-        "    top: 85%;",
-        "    left: 60%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(-80deg);",
-        "    z-index: -2222;  ",
-        "  }",
-        "  ",
-        "  .left-feet {",
-        "    top: 85%;",
-        "    left: 25%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(80deg);",
-        "    z-index: -2222;  ",
-        "  }",
-        "  ",
-        "  .right-eye {",
-        "    top: 45%;",
-        "    left: 60%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%; ",
-        "  }",
-        "  ",
-        "  .left-eye {",
-        "    top: 45%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .sparkle {",
-        "    top: 25%;",
-        "    left: 15%;",
-        "    background: white;",
-        "    width: 35%;",
-        "    height: 35%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .blush-right {",
-        "    top: 65%;",
-        "    left: 15%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .blush-left {",
-        "    top: 65%;",
-        "    left: 70%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .beak-top {",
-        "    top: 60%;",
-        "    left: 40%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 20%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .beak-bottom {",
-        "    top: 65%;",
-        "    left: 42%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 16%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  body {",
-        "    background:#c6faf1;",
-        "  }",
-        "  ",
-        "  .penguin * {",
-        "    position: absolute;",
-        "  }",
-        "</style>",
-        "<div class=\"penguin\">",
-        "  <div class=\"penguin-bottom\">",
-        "    <div class=\"right-hand\"></div>",
-        "    <div class=\"left-hand\"></div>",
-        "    <div class=\"right-feet\"></div>",
-        "    <div class=\"left-feet\"></div>",
-        "  </div>",
-        "  <div class=\"penguin-top\">",
-        "    <div class=\"right-cheek\"></div>",
-        "    <div class=\"left-cheek\"></div>",
-        "    <div class=\"belly\"></div>",
-        "    <div class=\"right-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"left-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"blush-right\"></div>",
-        "    <div class=\"blush-left\"></div>",
-        "    <div class=\"beak-top\"></div>",
-        "    <div class=\"beak-bottom\"></div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), 'message: <code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');",
-        "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'message: <code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.');",
-        "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), 'message: <code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.');"
+        {
+          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.'",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.')"
+        },
+        {
+          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.'",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.')"
+        },
+        {
+          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.'",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .penguin {",
+            "    ",
+            "    /* change code below */",
+            "    --penguin-skin: black;",
+            "    --penguin-belly: gray;",
+            "    --penguin-beak: yellow;",
+            "    /* change code above */",
+            "    ",
+            "    position: relative;",
+            "    margin: auto;",
+            "    display: block;",
+            "    margin-top: 5%;",
+            "    width: 300px;",
+            "    height: 300px;",
+            "  }",
+            "  ",
+            "  .penguin-top {",
+            "    top: 10%;",
+            "    left: 25%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 50%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .penguin-bottom {",
+            "    top: 40%;",
+            "    left: 23.5%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 53%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-hand {",
+            "    top: 0%;",
+            "    left: -5%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 120% 30%;",
+            "    transform: rotate(45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .left-hand {",
+            "    top: 0%;",
+            "    left: 75%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 30% 120%;",
+            "    transform: rotate(-45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .right-cheek {",
+            "    top: 15%;",
+            "    left: 35%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .left-cheek {",
+            "    top: 15%;",
+            "    left: 5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .belly {",
+            "    top: 60%;",
+            "    left: 2.5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 95%;",
+            "    height: 100%;",
+            "    border-radius: 120% 120% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-feet {",
+            "    top: 85%;",
+            "    left: 60%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(-80deg);",
+            "    z-index: -2222;  ",
+            "  }",
+            "  ",
+            "  .left-feet {",
+            "    top: 85%;",
+            "    left: 25%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(80deg);",
+            "    z-index: -2222;  ",
+            "  }",
+            "  ",
+            "  .right-eye {",
+            "    top: 45%;",
+            "    left: 60%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%; ",
+            "  }",
+            "  ",
+            "  .left-eye {",
+            "    top: 45%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .sparkle {",
+            "    top: 25%;",
+            "    left: 15%;",
+            "    background: white;",
+            "    width: 35%;",
+            "    height: 35%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .blush-right {",
+            "    top: 65%;",
+            "    left: 15%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .blush-left {",
+            "    top: 65%;",
+            "    left: 70%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .beak-top {",
+            "    top: 60%;",
+            "    left: 40%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 20%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .beak-bottom {",
+            "    top: 65%;",
+            "    left: 42%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 16%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  body {",
+            "    background:#c6faf1;",
+            "  }",
+            "  ",
+            "  .penguin * {",
+            "    position: absolute;",
+            "  }",
+            "</style>",
+            "<div class=\"penguin\">",
+            "  <div class=\"penguin-bottom\">",
+            "    <div class=\"right-hand\"></div>",
+            "    <div class=\"left-hand\"></div>",
+            "    <div class=\"right-feet\"></div>",
+            "    <div class=\"left-feet\"></div>",
+            "  </div>",
+            "  <div class=\"penguin-top\">",
+            "    <div class=\"right-cheek\"></div>",
+            "    <div class=\"left-cheek\"></div>",
+            "    <div class=\"belly\"></div>",
+            "    <div class=\"right-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"left-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"blush-right\"></div>",
+            "    <div class=\"blush-left\"></div>",
+            "    <div class=\"beak-top\"></div>",
+            "    <div class=\"beak-bottom\"></div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9d726c424fe3d0e10cad11",
@@ -3872,214 +4577,226 @@
         "<hr>",
         "In the <code>penguin</code> class, create a variable name <code>--penguin-skin</code> and give it a value of <code>gray</code>"
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .penguin {",
-        "    ",
-        "    /* add code below */",
-        "    ",
-        "    /* add code above */",
-        "    position: relative;",
-        "    margin: auto;",
-        "    display: block;",
-        "    margin-top: 5%;",
-        "    width: 300px;",
-        "    height: 300px;",
-        "  }",
-        "  ",
-        "  .penguin-top {",
-        "    top: 10%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 50%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .penguin-bottom {",
-        "    top: 40%;",
-        "    left: 23.5%;",
-        "    background: black;",
-        "    width: 53%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-hand {",
-        "    top: 0%;",
-        "    left: -5%;",
-        "    background: black;",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 120% 30%;",
-        "    transform: rotate(45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .left-hand {",
-        "    top: 0%;",
-        "    left: 75%;",
-        "    background: black;",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 30% 120%;",
-        "    transform: rotate(-45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .right-cheek {",
-        "    top: 15%;",
-        "    left: 35%;",
-        "    background: white;",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .left-cheek {",
-        "    top: 15%;",
-        "    left: 5%;",
-        "    background: white;",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .belly {",
-        "    top: 60%;",
-        "    left: 2.5%;",
-        "    background: white;",
-        "    width: 95%;",
-        "    height: 100%;",
-        "    border-radius: 120% 120% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-feet {",
-        "    top: 85%;",
-        "    left: 60%;",
-        "    background: orange;",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(-80deg);",
-        "    z-index: -2222;  ",
-        "  }",
-        "  ",
-        "  .left-feet {",
-        "    top: 85%;",
-        "    left: 25%;",
-        "    background: orange;",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(80deg);",
-        "    z-index: -2222;  ",
-        "  }",
-        "  ",
-        "  .right-eye {",
-        "    top: 45%;",
-        "    left: 60%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%; ",
-        "  }",
-        "  ",
-        "  .left-eye {",
-        "    top: 45%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .sparkle {",
-        "    top: 25%;",
-        "    left: 15%;",
-        "    background: white;",
-        "    width: 35%;",
-        "    height: 35%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .blush-right {",
-        "    top: 65%;",
-        "    left: 15%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .blush-left {",
-        "    top: 65%;",
-        "    left: 70%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .beak-top {",
-        "    top: 60%;",
-        "    left: 40%;",
-        "    background: orange;",
-        "    width: 20%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  .beak-bottom {",
-        "    top: 65%;",
-        "    left: 42%;",
-        "    background: orange;",
-        "    width: 16%;",
-        "    height: 10%;",
-        "    border-radius: 50%;  ",
-        "  }",
-        "  ",
-        "  body {",
-        "    background:#c6faf1;",
-        "  }",
-        "  ",
-        "  .penguin * {",
-        "    position: absolute;",
-        "  }",
-        "</style>",
-        "<div class=\"penguin\">",
-        "  <div class=\"penguin-bottom\">",
-        "    <div class=\"right-hand\"></div>",
-        "    <div class=\"left-hand\"></div>",
-        "    <div class=\"right-feet\"></div>",
-        "    <div class=\"left-feet\"></div>",
-        "  </div>",
-        "  <div class=\"penguin-top\">",
-        "    <div class=\"right-cheek\"></div>",
-        "    <div class=\"left-cheek\"></div>",
-        "    <div class=\"belly\"></div>",
-        "    <div class=\"right-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"left-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"blush-right\"></div>",
-        "    <div class=\"blush-left\"></div>",
-        "    <div class=\"beak-top\"></div>",
-        "    <div class=\"beak-bottom\"></div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), 'message: <code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
+        {
+          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.'",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .penguin {",
+            "    ",
+            "    /* add code below */",
+            "    ",
+            "    /* add code above */",
+            "    position: relative;",
+            "    margin: auto;",
+            "    display: block;",
+            "    margin-top: 5%;",
+            "    width: 300px;",
+            "    height: 300px;",
+            "  }",
+            "  ",
+            "  .penguin-top {",
+            "    top: 10%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 50%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .penguin-bottom {",
+            "    top: 40%;",
+            "    left: 23.5%;",
+            "    background: black;",
+            "    width: 53%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-hand {",
+            "    top: 0%;",
+            "    left: -5%;",
+            "    background: black;",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 120% 30%;",
+            "    transform: rotate(45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .left-hand {",
+            "    top: 0%;",
+            "    left: 75%;",
+            "    background: black;",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 30% 120%;",
+            "    transform: rotate(-45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .right-cheek {",
+            "    top: 15%;",
+            "    left: 35%;",
+            "    background: white;",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .left-cheek {",
+            "    top: 15%;",
+            "    left: 5%;",
+            "    background: white;",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .belly {",
+            "    top: 60%;",
+            "    left: 2.5%;",
+            "    background: white;",
+            "    width: 95%;",
+            "    height: 100%;",
+            "    border-radius: 120% 120% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-feet {",
+            "    top: 85%;",
+            "    left: 60%;",
+            "    background: orange;",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(-80deg);",
+            "    z-index: -2222;  ",
+            "  }",
+            "  ",
+            "  .left-feet {",
+            "    top: 85%;",
+            "    left: 25%;",
+            "    background: orange;",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(80deg);",
+            "    z-index: -2222;  ",
+            "  }",
+            "  ",
+            "  .right-eye {",
+            "    top: 45%;",
+            "    left: 60%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%; ",
+            "  }",
+            "  ",
+            "  .left-eye {",
+            "    top: 45%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .sparkle {",
+            "    top: 25%;",
+            "    left: 15%;",
+            "    background: white;",
+            "    width: 35%;",
+            "    height: 35%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .blush-right {",
+            "    top: 65%;",
+            "    left: 15%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .blush-left {",
+            "    top: 65%;",
+            "    left: 70%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .beak-top {",
+            "    top: 60%;",
+            "    left: 40%;",
+            "    background: orange;",
+            "    width: 20%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  .beak-bottom {",
+            "    top: 65%;",
+            "    left: 42%;",
+            "    background: orange;",
+            "    width: 16%;",
+            "    height: 10%;",
+            "    border-radius: 50%;  ",
+            "  }",
+            "  ",
+            "  body {",
+            "    background:#c6faf1;",
+            "  }",
+            "  ",
+            "  .penguin * {",
+            "    position: absolute;",
+            "  }",
+            "</style>",
+            "<div class=\"penguin\">",
+            "  <div class=\"penguin-bottom\">",
+            "    <div class=\"right-hand\"></div>",
+            "    <div class=\"left-hand\"></div>",
+            "    <div class=\"right-feet\"></div>",
+            "    <div class=\"left-feet\"></div>",
+            "  </div>",
+            "  <div class=\"penguin-top\">",
+            "    <div class=\"right-cheek\"></div>",
+            "    <div class=\"left-cheek\"></div>",
+            "    <div class=\"belly\"></div>",
+            "    <div class=\"right-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"left-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"blush-right\"></div>",
+            "    <div class=\"blush-left\"></div>",
+            "    <div class=\"beak-top\"></div>",
+            "    <div class=\"beak-bottom\"></div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9d727a424fe3d0e10cad12",
@@ -4092,230 +4809,251 @@
         "<hr>",
         "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code>, <code>penguin-bottom</code>, <code>right-hand</code> and <code>left-hand</code> classes."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .penguin {",
-        "    --penguin-skin: gray;",
-        "    position: relative;",
-        "    margin: auto;",
-        "    display: block;",
-        "    margin-top: 5%;",
-        "    width: 300px;",
-        "    height: 300px;",
-        "  }",
-        "  ",
-        "  .penguin-top {",
-        "    top: 10%;",
-        "    left: 25%;",
-        "    ",
-        "    /* change code below */",
-        "    background: black;",
-        "    /* change code above */",
-        "    ",
-        "    width: 50%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .penguin-bottom {",
-        "    top: 40%;",
-        "    left: 23.5%;",
-        "    ",
-        "    /* change code below */",
-        "    background: black;",
-        "    /* change code above */",
-        "    ",
-        "    width: 53%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-hand {",
-        "    top: 0%;",
-        "    left: -5%;",
-        "    ",
-        "    /* change code below */",
-        "    background: black;",
-        "    /* change code above */",
-        "    ",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 120% 30%;",
-        "    transform: rotate(45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .left-hand {",
-        "    top: 0%;",
-        "    left: 75%;",
-        "    ",
-        "    /* change code below */",
-        "    background: black;",
-        "    /* change code above */",
-        "    ",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 30% 120%;",
-        "    transform: rotate(-45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .right-cheek {",
-        "    top: 15%;",
-        "    left: 35%;",
-        "    background: white;",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .left-cheek {",
-        "    top: 15%;",
-        "    left: 5%;",
-        "    background: white;",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .belly {",
-        "    top: 60%;",
-        "    left: 2.5%;",
-        "    background: white;",
-        "    width: 95%;",
-        "    height: 100%;",
-        "    border-radius: 120% 120% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-feet {",
-        "    top: 85%;",
-        "    left: 60%;",
-        "    background: orange;",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(-80deg);",
-        "    z-index: -2222;  ",
-        "  }",
-        "  ",
-        "  .left-feet {",
-        "    top: 85%;",
-        "    left: 25%;",
-        "    background: orange;",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(80deg);",
-        "    z-index: -2222;  ",
-        "  }",
-        "  ",
-        "  .right-eye {",
-        "    top: 45%;",
-        "    left: 60%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%; ",
-        "  }",
-        "  ",
-        "  .left-eye {",
-        "    top: 45%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .sparkle {",
-        "    top: 25%;",
-        "    left: 15%;",
-        "    background: white;",
-        "    width: 35%;",
-        "    height: 35%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-right {",
-        "    top: 65%;",
-        "    left: 15%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-left {",
-        "    top: 65%;",
-        "    left: 70%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-top {",
-        "    top: 60%;",
-        "    left: 40%;",
-        "    background: orange;",
-        "    width: 20%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-bottom {",
-        "    top: 65%;",
-        "    left: 42%;",
-        "    background: orange;",
-        "    width: 16%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  body {",
-        "    background:#c6faf1;",
-        "  }",
-        "  ",
-        "  .penguin * {",
-        "    position: absolute;",
-        "  }",
-        "</style>",
-        "<div class=\"penguin\">",
-        "  <div class=\"penguin-bottom\">",
-        "    <div class=\"right-hand\"></div>",
-        "    <div class=\"left-hand\"></div>",
-        "    <div class=\"right-feet\"></div>",
-        "    <div class=\"left-feet\"></div>",
-        "  </div>",
-        "  <div class=\"penguin-top\">",
-        "    <div class=\"right-cheek\"></div>",
-        "    <div class=\"left-cheek\"></div>",
-        "    <div class=\"belly\"></div>",
-        "    <div class=\"right-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"left-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"blush-right\"></div>",
-        "    <div class=\"blush-left\"></div>",
-        "    <div class=\"beak-top\"></div>",
-        "    <div class=\"beak-bottom\"></div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'message: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.');",
-        "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'message: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.');",
-        "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'message: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.');",
-        "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.');"
+        {
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.'",
+          "testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.')"
+        },
+        {
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.'",
+          "testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.')"
+        },
+        {
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.'",
+          "testString": "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.')"
+        },
+        {
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.'",
+          "testString": "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .penguin {",
+            "    --penguin-skin: gray;",
+            "    position: relative;",
+            "    margin: auto;",
+            "    display: block;",
+            "    margin-top: 5%;",
+            "    width: 300px;",
+            "    height: 300px;",
+            "  }",
+            "  ",
+            "  .penguin-top {",
+            "    top: 10%;",
+            "    left: 25%;",
+            "    ",
+            "    /* change code below */",
+            "    background: black;",
+            "    /* change code above */",
+            "    ",
+            "    width: 50%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .penguin-bottom {",
+            "    top: 40%;",
+            "    left: 23.5%;",
+            "    ",
+            "    /* change code below */",
+            "    background: black;",
+            "    /* change code above */",
+            "    ",
+            "    width: 53%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-hand {",
+            "    top: 0%;",
+            "    left: -5%;",
+            "    ",
+            "    /* change code below */",
+            "    background: black;",
+            "    /* change code above */",
+            "    ",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 120% 30%;",
+            "    transform: rotate(45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .left-hand {",
+            "    top: 0%;",
+            "    left: 75%;",
+            "    ",
+            "    /* change code below */",
+            "    background: black;",
+            "    /* change code above */",
+            "    ",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 30% 120%;",
+            "    transform: rotate(-45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .right-cheek {",
+            "    top: 15%;",
+            "    left: 35%;",
+            "    background: white;",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .left-cheek {",
+            "    top: 15%;",
+            "    left: 5%;",
+            "    background: white;",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .belly {",
+            "    top: 60%;",
+            "    left: 2.5%;",
+            "    background: white;",
+            "    width: 95%;",
+            "    height: 100%;",
+            "    border-radius: 120% 120% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-feet {",
+            "    top: 85%;",
+            "    left: 60%;",
+            "    background: orange;",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(-80deg);",
+            "    z-index: -2222;  ",
+            "  }",
+            "  ",
+            "  .left-feet {",
+            "    top: 85%;",
+            "    left: 25%;",
+            "    background: orange;",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(80deg);",
+            "    z-index: -2222;  ",
+            "  }",
+            "  ",
+            "  .right-eye {",
+            "    top: 45%;",
+            "    left: 60%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%; ",
+            "  }",
+            "  ",
+            "  .left-eye {",
+            "    top: 45%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .sparkle {",
+            "    top: 25%;",
+            "    left: 15%;",
+            "    background: white;",
+            "    width: 35%;",
+            "    height: 35%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-right {",
+            "    top: 65%;",
+            "    left: 15%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-left {",
+            "    top: 65%;",
+            "    left: 70%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-top {",
+            "    top: 60%;",
+            "    left: 40%;",
+            "    background: orange;",
+            "    width: 20%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-bottom {",
+            "    top: 65%;",
+            "    left: 42%;",
+            "    background: orange;",
+            "    width: 16%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  body {",
+            "    background:#c6faf1;",
+            "  }",
+            "  ",
+            "  .penguin * {",
+            "    position: absolute;",
+            "  }",
+            "</style>",
+            "<div class=\"penguin\">",
+            "  <div class=\"penguin-bottom\">",
+            "    <div class=\"right-hand\"></div>",
+            "    <div class=\"left-hand\"></div>",
+            "    <div class=\"right-feet\"></div>",
+            "    <div class=\"left-feet\"></div>",
+            "  </div>",
+            "  <div class=\"penguin-top\">",
+            "    <div class=\"right-cheek\"></div>",
+            "    <div class=\"left-cheek\"></div>",
+            "    <div class=\"belly\"></div>",
+            "    <div class=\"right-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"left-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"blush-right\"></div>",
+            "    <div class=\"blush-left\"></div>",
+            "    <div class=\"beak-top\"></div>",
+            "    <div class=\"beak-bottom\"></div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9d7286424fe3d0e10cad13",
@@ -4329,222 +5067,237 @@
         "<hr>",
         "Add a fallback value of <code>black</code> to the <code>background</code> property of <code>penguin-top</code> and <code>penguin-bottom</code> classes. This style will be applied because of a typo in the variable name."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  .penguin {",
-        "    --penguin-skin: gray;",
-        "    --penguin-belly: white;",
-        "    --penguin-beak: orange;",
-        "    position: relative;",
-        "    margin: auto;",
-        "    display: block;",
-        "    margin-top: 5%;",
-        "    width: 300px;",
-        "    height: 300px;",
-        "  }",
-        "  ",
-        "  .penguin-top {",
-        "    top: 10%;",
-        "    left: 25%;",
-        "  ",
-        "    /* change code below */",
-        "    background: var(--pengiun-skin);",
-        "    /* change code above */",
-        "  ",
-        "    width: 50%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .penguin-bottom {",
-        "    top: 40%;",
-        "    left: 23.5%;",
-        "  ",
-        "    /* change code below */",
-        "    background: var(--pengiun-skin);",
-        "    /* change code above */",
-        "  ",
-        "    width: 53%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-hand {",
-        "    top: 0%;",
-        "    left: -5%;",
-        "    background: var(--penguin-skin, black);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 120% 30%;",
-        "    transform: rotate(45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .left-hand {",
-        "    top: 0%;",
-        "    left: 75%;",
-        "    background: var(--penguin-skin, black);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 30% 120%;",
-        "    transform: rotate(-45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .right-cheek {",
-        "    top: 15%;",
-        "    left: 35%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .left-cheek {",
-        "    top: 15%;",
-        "    left: 5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .belly {",
-        "    top: 60%;",
-        "    left: 2.5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 95%;",
-        "    height: 100%;",
-        "    border-radius: 120% 120% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-feet {",
-        "    top: 85%;",
-        "    left: 60%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(-80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .left-feet {",
-        "    top: 85%;",
-        "    left: 25%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .right-eye {",
-        "    top: 45%;",
-        "    left: 60%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .left-eye {",
-        "    top: 45%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .sparkle {",
-        "    top: 25%;",
-        "    left: 15%;",
-        "    background: white;",
-        "    width: 35%;",
-        "    height: 35%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-right {",
-        "    top: 65%;",
-        "    left: 15%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-left {",
-        "    top: 65%;",
-        "    left: 70%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-top {",
-        "    top: 60%;",
-        "    left: 40%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 20%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-bottom {",
-        "    top: 65%;",
-        "    left: 42%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 16%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  body {",
-        "    background:#c6faf1;",
-        "  }",
-        "  ",
-        "  .penguin * {",
-        "    position: absolute;",
-        "  }",
-        "</style>",
-        "<div class=\"penguin\">",
-        "  <div class=\"penguin-bottom\">",
-        "    <div class=\"right-hand\"></div>",
-        "    <div class=\"left-hand\"></div>",
-        "    <div class=\"right-feet\"></div>",
-        "    <div class=\"left-feet\"></div>",
-        "  </div>",
-        "  <div class=\"penguin-top\">",
-        "    <div class=\"right-cheek\"></div>",
-        "    <div class=\"left-cheek\"></div>",
-        "    <div class=\"belly\"></div>",
-        "    <div class=\"right-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"left-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"blush-right\"></div>",
-        "    <div class=\"blush-left\"></div>",
-        "    <div class=\"beak-top\"></div>",
-        "    <div class=\"beak-bottom\"></div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'message: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.');",
-        "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
+        {
+          "text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.'",
+          "testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?, 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.')"
+        },
+        {
+          "text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.'",
+          "testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?, 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .penguin {",
+            "    --penguin-skin: gray;",
+            "    --penguin-belly: white;",
+            "    --penguin-beak: orange;",
+            "    position: relative;",
+            "    margin: auto;",
+            "    display: block;",
+            "    margin-top: 5%;",
+            "    width: 300px;",
+            "    height: 300px;",
+            "  }",
+            "  ",
+            "  .penguin-top {",
+            "    top: 10%;",
+            "    left: 25%;",
+            "  ",
+            "    /* change code below */",
+            "    background: var(--pengiun-skin);",
+            "    /* change code above */",
+            "  ",
+            "    width: 50%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .penguin-bottom {",
+            "    top: 40%;",
+            "    left: 23.5%;",
+            "  ",
+            "    /* change code below */",
+            "    background: var(--pengiun-skin);",
+            "    /* change code above */",
+            "  ",
+            "    width: 53%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-hand {",
+            "    top: 0%;",
+            "    left: -5%;",
+            "    background: var(--penguin-skin, black);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 120% 30%;",
+            "    transform: rotate(45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .left-hand {",
+            "    top: 0%;",
+            "    left: 75%;",
+            "    background: var(--penguin-skin, black);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 30% 120%;",
+            "    transform: rotate(-45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .right-cheek {",
+            "    top: 15%;",
+            "    left: 35%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .left-cheek {",
+            "    top: 15%;",
+            "    left: 5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .belly {",
+            "    top: 60%;",
+            "    left: 2.5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 95%;",
+            "    height: 100%;",
+            "    border-radius: 120% 120% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-feet {",
+            "    top: 85%;",
+            "    left: 60%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(-80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .left-feet {",
+            "    top: 85%;",
+            "    left: 25%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .right-eye {",
+            "    top: 45%;",
+            "    left: 60%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .left-eye {",
+            "    top: 45%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .sparkle {",
+            "    top: 25%;",
+            "    left: 15%;",
+            "    background: white;",
+            "    width: 35%;",
+            "    height: 35%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-right {",
+            "    top: 65%;",
+            "    left: 15%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-left {",
+            "    top: 65%;",
+            "    left: 70%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-top {",
+            "    top: 60%;",
+            "    left: 40%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 20%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-bottom {",
+            "    top: 65%;",
+            "    left: 42%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 16%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  body {",
+            "    background:#c6faf1;",
+            "  }",
+            "  ",
+            "  .penguin * {",
+            "    position: absolute;",
+            "  }",
+            "</style>",
+            "<div class=\"penguin\">",
+            "  <div class=\"penguin-bottom\">",
+            "    <div class=\"right-hand\"></div>",
+            "    <div class=\"left-hand\"></div>",
+            "    <div class=\"right-feet\"></div>",
+            "    <div class=\"left-feet\"></div>",
+            "  </div>",
+            "  <div class=\"penguin-top\">",
+            "    <div class=\"right-cheek\"></div>",
+            "    <div class=\"left-cheek\"></div>",
+            "    <div class=\"belly\"></div>",
+            "    <div class=\"right-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"left-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"blush-right\"></div>",
+            "    <div class=\"blush-left\"></div>",
+            "    <div class=\"beak-top\"></div>",
+            "    <div class=\"beak-bottom\"></div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9d7295424fe3d0e10cad14",
@@ -4557,219 +5310,231 @@
         "<hr>",
         "Define a variable named <code>--penguin-belly</code> in the <code>:root</code> selector and give it the value of <code>pink</code>. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  :root {",
-        "    ",
-        "    /* add code below */",
-        "    ",
-        "    /* add code above */",
-        "  }",
-        "  ",
-        "  body {",
-        "    background: var(--penguin-belly, #c6faf1);",
-        "  }",
-        "  ",
-        "  .penguin {",
-        "    --penguin-skin: gray;",
-        "    --penguin-beak: orange;",
-        "    position: relative;",
-        "    margin: auto;",
-        "    display: block;",
-        "    margin-top: 5%;",
-        "    width: 300px;",
-        "    height: 300px;",
-        "  }",
-        "  ",
-        "  .right-cheek {",
-        "    top: 15%;",
-        "    left: 35%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .left-cheek {",
-        "    top: 15%;",
-        "    left: 5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .belly {",
-        "    top: 60%;",
-        "    left: 2.5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 95%;",
-        "    height: 100%;",
-        "    border-radius: 120% 120% 100% 100%;",
-        "  }",
-        "  ",
-        "  .penguin-top {",
-        "    top: 10%;",
-        "    left: 25%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 50%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .penguin-bottom {",
-        "    top: 40%;",
-        "    left: 23.5%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 53%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-hand {",
-        "    top: 0%;",
-        "    left: -5%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 120% 30%;",
-        "    transform: rotate(45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .left-hand {",
-        "    top: 0%;",
-        "    left: 75%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 30% 120%;",
-        "    transform: rotate(-45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .right-feet {",
-        "    top: 85%;",
-        "    left: 60%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(-80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .left-feet {",
-        "    top: 85%;",
-        "    left: 25%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .right-eye {",
-        "    top: 45%;",
-        "    left: 60%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .left-eye {",
-        "    top: 45%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .sparkle {",
-        "    top: 25%;",
-        "    left: 15%;",
-        "    background: white;",
-        "    width: 35%;",
-        "    height: 35%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-right {",
-        "    top: 65%;",
-        "    left: 15%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-left {",
-        "    top: 65%;",
-        "    left: 70%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-top {",
-        "    top: 60%;",
-        "    left: 40%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 20%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-bottom {",
-        "    top: 65%;",
-        "    left: 42%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 16%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .penguin * {",
-        "    position: absolute;",
-        "  }",
-        "</style>",
-        "<div class=\"penguin\">",
-        "  <div class=\"penguin-bottom\">",
-        "    <div class=\"right-hand\"></div>",
-        "    <div class=\"left-hand\"></div>",
-        "    <div class=\"right-feet\"></div>",
-        "    <div class=\"left-feet\"></div>",
-        "  </div>",
-        "  <div class=\"penguin-top\">",
-        "    <div class=\"right-cheek\"></div>",
-        "    <div class=\"left-cheek\"></div>",
-        "    <div class=\"belly\"></div>",
-        "    <div class=\"right-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"left-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"blush-right\"></div>",
-        "    <div class=\"blush-left\"></div>",
-        "    <div class=\"beak-top\"></div>",
-        "    <div class=\"beak-bottom\"></div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'message: declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.');"
+        {
+          "text": "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'",
+          "testString": "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  :root {",
+            "    ",
+            "    /* add code below */",
+            "    ",
+            "    /* add code above */",
+            "  }",
+            "  ",
+            "  body {",
+            "    background: var(--penguin-belly, #c6faf1);",
+            "  }",
+            "  ",
+            "  .penguin {",
+            "    --penguin-skin: gray;",
+            "    --penguin-beak: orange;",
+            "    position: relative;",
+            "    margin: auto;",
+            "    display: block;",
+            "    margin-top: 5%;",
+            "    width: 300px;",
+            "    height: 300px;",
+            "  }",
+            "  ",
+            "  .right-cheek {",
+            "    top: 15%;",
+            "    left: 35%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .left-cheek {",
+            "    top: 15%;",
+            "    left: 5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .belly {",
+            "    top: 60%;",
+            "    left: 2.5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 95%;",
+            "    height: 100%;",
+            "    border-radius: 120% 120% 100% 100%;",
+            "  }",
+            "  ",
+            "  .penguin-top {",
+            "    top: 10%;",
+            "    left: 25%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 50%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .penguin-bottom {",
+            "    top: 40%;",
+            "    left: 23.5%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 53%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-hand {",
+            "    top: 0%;",
+            "    left: -5%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 120% 30%;",
+            "    transform: rotate(45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .left-hand {",
+            "    top: 0%;",
+            "    left: 75%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 30% 120%;",
+            "    transform: rotate(-45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .right-feet {",
+            "    top: 85%;",
+            "    left: 60%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(-80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .left-feet {",
+            "    top: 85%;",
+            "    left: 25%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .right-eye {",
+            "    top: 45%;",
+            "    left: 60%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .left-eye {",
+            "    top: 45%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .sparkle {",
+            "    top: 25%;",
+            "    left: 15%;",
+            "    background: white;",
+            "    width: 35%;",
+            "    height: 35%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-right {",
+            "    top: 65%;",
+            "    left: 15%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-left {",
+            "    top: 65%;",
+            "    left: 70%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-top {",
+            "    top: 60%;",
+            "    left: 40%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 20%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-bottom {",
+            "    top: 65%;",
+            "    left: 42%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 16%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .penguin * {",
+            "    position: absolute;",
+            "  }",
+            "</style>",
+            "<div class=\"penguin\">",
+            "  <div class=\"penguin-bottom\">",
+            "    <div class=\"right-hand\"></div>",
+            "    <div class=\"left-hand\"></div>",
+            "    <div class=\"right-feet\"></div>",
+            "    <div class=\"left-feet\"></div>",
+            "  </div>",
+            "  <div class=\"penguin-top\">",
+            "    <div class=\"right-cheek\"></div>",
+            "    <div class=\"left-cheek\"></div>",
+            "    <div class=\"belly\"></div>",
+            "    <div class=\"right-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"left-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"blush-right\"></div>",
+            "    <div class=\"blush-left\"></div>",
+            "    <div class=\"beak-top\"></div>",
+            "    <div class=\"beak-bottom\"></div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9d72a1424fe3d0e10cad15",
@@ -4780,221 +5545,233 @@
         "<hr>",
         "Change the value of <code>--penguin-belly</code> to <code>white</code> in the <code>penguin</code> class."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  :root {",
-        "    --penguin-skin: gray;",
-        "    --penguin-belly: pink;",
-        "    --penguin-beak: orange;",
-        "  }",
-        "  ",
-        "  body {",
-        "    background: var(--penguin-belly, #c6faf1);",
-        "  }",
-        "  ",
-        "  .penguin {",
-        "    ",
-        "    /* add code below */",
-        "    ",
-        "    /* add code above */",
-        "    ",
-        "    position: relative;",
-        "    margin: auto;",
-        "    display: block;",
-        "    margin-top: 5%;",
-        "    width: 300px;",
-        "    height: 300px;",
-        "  }",
-        "  ",
-        "  .right-cheek {",
-        "    top: 15%;",
-        "    left: 35%;",
-        "    background: var(--penguin-belly, pink);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .left-cheek {",
-        "    top: 15%;",
-        "    left: 5%;",
-        "    background: var(--penguin-belly, pink);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .belly {",
-        "    top: 60%;",
-        "    left: 2.5%;",
-        "    background: var(--penguin-belly, pink);",
-        "    width: 95%;",
-        "    height: 100%;",
-        "    border-radius: 120% 120% 100% 100%;",
-        "  }",
-        "  ",
-        "  .penguin-top {",
-        "    top: 10%;",
-        "    left: 25%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 50%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .penguin-bottom {",
-        "    top: 40%;",
-        "    left: 23.5%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 53%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-hand {",
-        "    top: 0%;",
-        "    left: -5%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 120% 30%;",
-        "    transform: rotate(45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .left-hand {",
-        "    top: 0%;",
-        "    left: 75%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 30% 120%;",
-        "    transform: rotate(-45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .right-feet {",
-        "    top: 85%;",
-        "    left: 60%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(-80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .left-feet {",
-        "    top: 85%;",
-        "    left: 25%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .right-eye {",
-        "    top: 45%;",
-        "    left: 60%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .left-eye {",
-        "    top: 45%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .sparkle {",
-        "    top: 25%;",
-        "    left: 15%;",
-        "    background: white;",
-        "    width: 35%;",
-        "    height: 35%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-right {",
-        "    top: 65%;",
-        "    left: 15%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-left {",
-        "    top: 65%;",
-        "    left: 70%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-top {",
-        "    top: 60%;",
-        "    left: 40%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 20%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-bottom {",
-        "    top: 65%;",
-        "    left: 42%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 16%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .penguin * {",
-        "    position: absolute;",
-        "  }",
-        "</style>",
-        "<div class=\"penguin\">",
-        "  <div class=\"penguin-bottom\">",
-        "    <div class=\"right-hand\"></div>",
-        "    <div class=\"left-hand\"></div>",
-        "    <div class=\"right-feet\"></div>",
-        "    <div class=\"left-feet\"></div>",
-        "  </div>",
-        "  <div class=\"penguin-top\">",
-        "    <div class=\"right-cheek\"></div>",
-        "    <div class=\"left-cheek\"></div>",
-        "    <div class=\"belly\"></div>",
-        "    <div class=\"right-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"left-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"blush-right\"></div>",
-        "    <div class=\"blush-left\"></div>",
-        "    <div class=\"beak-top\"></div>",
-        "    <div class=\"beak-bottom\"></div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'message: The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.');"
+        {
+          "text": "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.'",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  :root {",
+            "    --penguin-skin: gray;",
+            "    --penguin-belly: pink;",
+            "    --penguin-beak: orange;",
+            "  }",
+            "  ",
+            "  body {",
+            "    background: var(--penguin-belly, #c6faf1);",
+            "  }",
+            "  ",
+            "  .penguin {",
+            "    ",
+            "    /* add code below */",
+            "    ",
+            "    /* add code above */",
+            "    ",
+            "    position: relative;",
+            "    margin: auto;",
+            "    display: block;",
+            "    margin-top: 5%;",
+            "    width: 300px;",
+            "    height: 300px;",
+            "  }",
+            "  ",
+            "  .right-cheek {",
+            "    top: 15%;",
+            "    left: 35%;",
+            "    background: var(--penguin-belly, pink);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .left-cheek {",
+            "    top: 15%;",
+            "    left: 5%;",
+            "    background: var(--penguin-belly, pink);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .belly {",
+            "    top: 60%;",
+            "    left: 2.5%;",
+            "    background: var(--penguin-belly, pink);",
+            "    width: 95%;",
+            "    height: 100%;",
+            "    border-radius: 120% 120% 100% 100%;",
+            "  }",
+            "  ",
+            "  .penguin-top {",
+            "    top: 10%;",
+            "    left: 25%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 50%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .penguin-bottom {",
+            "    top: 40%;",
+            "    left: 23.5%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 53%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-hand {",
+            "    top: 0%;",
+            "    left: -5%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 120% 30%;",
+            "    transform: rotate(45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .left-hand {",
+            "    top: 0%;",
+            "    left: 75%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 30% 120%;",
+            "    transform: rotate(-45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .right-feet {",
+            "    top: 85%;",
+            "    left: 60%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(-80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .left-feet {",
+            "    top: 85%;",
+            "    left: 25%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .right-eye {",
+            "    top: 45%;",
+            "    left: 60%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .left-eye {",
+            "    top: 45%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .sparkle {",
+            "    top: 25%;",
+            "    left: 15%;",
+            "    background: white;",
+            "    width: 35%;",
+            "    height: 35%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-right {",
+            "    top: 65%;",
+            "    left: 15%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-left {",
+            "    top: 65%;",
+            "    left: 70%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-top {",
+            "    top: 60%;",
+            "    left: 40%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 20%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-bottom {",
+            "    top: 65%;",
+            "    left: 42%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 16%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .penguin * {",
+            "    position: absolute;",
+            "  }",
+            "</style>",
+            "<div class=\"penguin\">",
+            "  <div class=\"penguin-bottom\">",
+            "    <div class=\"right-hand\"></div>",
+            "    <div class=\"left-hand\"></div>",
+            "    <div class=\"right-feet\"></div>",
+            "    <div class=\"left-feet\"></div>",
+            "  </div>",
+            "  <div class=\"penguin-top\">",
+            "    <div class=\"right-cheek\"></div>",
+            "    <div class=\"left-cheek\"></div>",
+            "    <div class=\"belly\"></div>",
+            "    <div class=\"right-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"left-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"blush-right\"></div>",
+            "    <div class=\"blush-left\"></div>",
+            "    <div class=\"beak-top\"></div>",
+            "    <div class=\"beak-bottom\"></div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9d72ad424fe3d0e10cad16",
@@ -5005,248 +5782,266 @@
         "<hr>",
         "In the <code>:root</code> selector of the <code>media query</code>, change it so <code>--penguin-size</code> is redefined and given a value of <code>200px</code>. Also, redefine <code>--penguin-skin</code> and give it a value of <code>black</code>. Then resize the preview to see this change in action."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  :root {",
-        "    --penguin-size: 300px;",
-        "    --penguin-skin: gray;",
-        "    --penguin-belly: white;",
-        "    --penguin-beak: orange;",
-        "  }",
-        "  ",
-        "  @media (max-width: 350px) {",
-        "    :root {",
-        "      ",
-        "      /* add code below */",
-        "      ",
-        "      /* add code above */",
-        "      ",
-        "    }",
-        "  }",
-        "  ",
-        "  .penguin {",
-        "    position: relative;",
-        "    margin: auto;",
-        "    display: block;",
-        "    margin-top: 5%;",
-        "    width: var(--penguin-size, 300px);",
-        "    height: var(--penguin-size, 300px);",
-        "  }",
-        "  ",
-        "  .right-cheek {",
-        "    top: 15%;",
-        "    left: 35%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .left-cheek {",
-        "    top: 15%;",
-        "    left: 5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 60%;",
-        "    height: 70%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .belly {",
-        "    top: 60%;",
-        "    left: 2.5%;",
-        "    background: var(--penguin-belly, white);",
-        "    width: 95%;",
-        "    height: 100%;",
-        "    border-radius: 120% 120% 100% 100%;",
-        "  }",
-        "  ",
-        "  .penguin-top {",
-        "    top: 10%;",
-        "    left: 25%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 50%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 60% 60%;",
-        "  }",
-        "  ",
-        "  .penguin-bottom {",
-        "    top: 40%;",
-        "    left: 23.5%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 53%;",
-        "    height: 45%;",
-        "    border-radius: 70% 70% 100% 100%;",
-        "  }",
-        "  ",
-        "  .right-hand {",
-        "    top: 5%;",
-        "    left: 25%;",
-        "    background: var(--penguin-skin, black);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 120% 30%;",
-        "    transform: rotate(130deg);",
-        "    z-index: -1;",
-        "    animation-duration: 3s;",
-        "    animation-name: wave;",
-        "    animation-iteration-count: infinite;",
-        "    transform-origin:0% 0%;",
-        "    animation-timing-function: linear;",
-        "  }",
-        "  ",
-        "  @keyframes wave {",
-        "      10% {",
-        "        transform: rotate(110deg);",
-        "      }",
-        "      20% {",
-        "        transform: rotate(130deg);",
-        "      }",
-        "      30% {",
-        "        transform: rotate(110deg);",
-        "      } ",
-        "      40% {",
-        "        transform: rotate(130deg);",
-        "      }  ",
-        "    }",
-        "  ",
-        "  .left-hand {",
-        "    top: 0%;",
-        "    left: 75%;",
-        "    background: var(--penguin-skin, gray);",
-        "    width: 30%;",
-        "    height: 60%;",
-        "    border-radius: 30% 30% 30% 120%;",
-        "    transform: rotate(-45deg);",
-        "    z-index: -1;",
-        "  }",
-        "  ",
-        "  .right-feet {",
-        "    top: 85%;",
-        "    left: 60%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(-80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .left-feet {",
-        "    top: 85%;",
-        "    left: 25%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 15%;",
-        "    height: 30%;",
-        "    border-radius: 50% 50% 50% 50%;",
-        "    transform: rotate(80deg);",
-        "    z-index: -2222;",
-        "  }",
-        "  ",
-        "  .right-eye {",
-        "    top: 45%;",
-        "    left: 60%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .left-eye {",
-        "    top: 45%;",
-        "    left: 25%;",
-        "    background: black;",
-        "    width: 15%;",
-        "    height: 17%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .sparkle {",
-        "    top: 25%;",
-        "    left:-23%;",
-        "    background: white;",
-        "    width: 150%;",
-        "    height: 100%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-right {",
-        "    top: 65%;",
-        "    left: 15%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .blush-left {",
-        "    top: 65%;",
-        "    left: 70%;",
-        "    background: pink;",
-        "    width: 15%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-top {",
-        "    top: 60%;",
-        "    left: 40%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 20%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  .beak-bottom {",
-        "    top: 65%;",
-        "    left: 42%;",
-        "    background: var(--penguin-beak, orange);",
-        "    width: 16%;",
-        "    height: 10%;",
-        "    border-radius: 50%;",
-        "  }",
-        "  ",
-        "  body {",
-        "    background:#c6faf1;",
-        "  }",
-        "  ",
-        "  .penguin * {",
-        "    position: absolute;",
-        "  }",
-        "</style>",
-        "<div class=\"penguin\">",
-        "  <div class=\"penguin-bottom\">",
-        "    <div class=\"right-hand\"></div>",
-        "    <div class=\"left-hand\"></div>",
-        "    <div class=\"right-feet\"></div>",
-        "    <div class=\"left-feet\"></div>",
-        "  </div>",
-        "  <div class=\"penguin-top\">",
-        "    <div class=\"right-cheek\"></div>",
-        "    <div class=\"left-cheek\"></div>",
-        "    <div class=\"belly\"></div>",
-        "    <div class=\"right-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"left-eye\">",
-        "      <div class=\"sparkle\"></div>",
-        "    </div>",
-        "    <div class=\"blush-right\"></div>",
-        "    <div class=\"blush-left\"></div>",
-        "    <div class=\"beak-top\"></div>",
-        "    <div class=\"beak-bottom\"></div>",
-        "  </div>",
-        "</div>"
-      ],
       "tests": [
-        "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-size\\s*?:\\s*?200px\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), 'message: <code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.');",
-        "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), 'message: <code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.');"
+        {
+          "text": "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.'",
+          "testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-size\\s*?:\\s*?200px\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.')"
+        },
+        {
+          "text": "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.'",
+          "testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  :root {",
+            "    --penguin-size: 300px;",
+            "    --penguin-skin: gray;",
+            "    --penguin-belly: white;",
+            "    --penguin-beak: orange;",
+            "  }",
+            "  ",
+            "  @media (max-width: 350px) {",
+            "    :root {",
+            "      ",
+            "      /* add code below */",
+            "      ",
+            "      /* add code above */",
+            "      ",
+            "    }",
+            "  }",
+            "  ",
+            "  .penguin {",
+            "    position: relative;",
+            "    margin: auto;",
+            "    display: block;",
+            "    margin-top: 5%;",
+            "    width: var(--penguin-size, 300px);",
+            "    height: var(--penguin-size, 300px);",
+            "  }",
+            "  ",
+            "  .right-cheek {",
+            "    top: 15%;",
+            "    left: 35%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .left-cheek {",
+            "    top: 15%;",
+            "    left: 5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 60%;",
+            "    height: 70%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .belly {",
+            "    top: 60%;",
+            "    left: 2.5%;",
+            "    background: var(--penguin-belly, white);",
+            "    width: 95%;",
+            "    height: 100%;",
+            "    border-radius: 120% 120% 100% 100%;",
+            "  }",
+            "  ",
+            "  .penguin-top {",
+            "    top: 10%;",
+            "    left: 25%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 50%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 60% 60%;",
+            "  }",
+            "  ",
+            "  .penguin-bottom {",
+            "    top: 40%;",
+            "    left: 23.5%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 53%;",
+            "    height: 45%;",
+            "    border-radius: 70% 70% 100% 100%;",
+            "  }",
+            "  ",
+            "  .right-hand {",
+            "    top: 5%;",
+            "    left: 25%;",
+            "    background: var(--penguin-skin, black);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 120% 30%;",
+            "    transform: rotate(130deg);",
+            "    z-index: -1;",
+            "    animation-duration: 3s;",
+            "    animation-name: wave;",
+            "    animation-iteration-count: infinite;",
+            "    transform-origin:0% 0%;",
+            "    animation-timing-function: linear;",
+            "  }",
+            "  ",
+            "  @keyframes wave {",
+            "      10% {",
+            "        transform: rotate(110deg);",
+            "      }",
+            "      20% {",
+            "        transform: rotate(130deg);",
+            "      }",
+            "      30% {",
+            "        transform: rotate(110deg);",
+            "      } ",
+            "      40% {",
+            "        transform: rotate(130deg);",
+            "      }  ",
+            "    }",
+            "  ",
+            "  .left-hand {",
+            "    top: 0%;",
+            "    left: 75%;",
+            "    background: var(--penguin-skin, gray);",
+            "    width: 30%;",
+            "    height: 60%;",
+            "    border-radius: 30% 30% 30% 120%;",
+            "    transform: rotate(-45deg);",
+            "    z-index: -1;",
+            "  }",
+            "  ",
+            "  .right-feet {",
+            "    top: 85%;",
+            "    left: 60%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(-80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .left-feet {",
+            "    top: 85%;",
+            "    left: 25%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 15%;",
+            "    height: 30%;",
+            "    border-radius: 50% 50% 50% 50%;",
+            "    transform: rotate(80deg);",
+            "    z-index: -2222;",
+            "  }",
+            "  ",
+            "  .right-eye {",
+            "    top: 45%;",
+            "    left: 60%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .left-eye {",
+            "    top: 45%;",
+            "    left: 25%;",
+            "    background: black;",
+            "    width: 15%;",
+            "    height: 17%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .sparkle {",
+            "    top: 25%;",
+            "    left:-23%;",
+            "    background: white;",
+            "    width: 150%;",
+            "    height: 100%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-right {",
+            "    top: 65%;",
+            "    left: 15%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .blush-left {",
+            "    top: 65%;",
+            "    left: 70%;",
+            "    background: pink;",
+            "    width: 15%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-top {",
+            "    top: 60%;",
+            "    left: 40%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 20%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  .beak-bottom {",
+            "    top: 65%;",
+            "    left: 42%;",
+            "    background: var(--penguin-beak, orange);",
+            "    width: 16%;",
+            "    height: 10%;",
+            "    border-radius: 50%;",
+            "  }",
+            "  ",
+            "  body {",
+            "    background:#c6faf1;",
+            "  }",
+            "  ",
+            "  .penguin * {",
+            "    position: absolute;",
+            "  }",
+            "</style>",
+            "<div class=\"penguin\">",
+            "  <div class=\"penguin-bottom\">",
+            "    <div class=\"right-hand\"></div>",
+            "    <div class=\"left-hand\"></div>",
+            "    <div class=\"right-feet\"></div>",
+            "    <div class=\"left-feet\"></div>",
+            "  </div>",
+            "  <div class=\"penguin-top\">",
+            "    <div class=\"right-cheek\"></div>",
+            "    <div class=\"left-cheek\"></div>",
+            "    <div class=\"belly\"></div>",
+            "    <div class=\"right-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"left-eye\">",
+            "      <div class=\"sparkle\"></div>",
+            "    </div>",
+            "    <div class=\"blush-right\"></div>",
+            "    <div class=\"blush-left\"></div>",
+            "    <div class=\"beak-top\"></div>",
+            "    <div class=\"beak-bottom\"></div>",
+            "  </div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     }
-  ]
+  ],
+  "fileName": "01-responsive-web-design/basic-css.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
 }
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/basic-html-and-html5.json b/packages/learn/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
index 9e9d4dc4f9..9e1b5d03b8 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
@@ -4,21 +4,6 @@
   "time": "5 hours",
   "helpRoom": "Help",
   "challenges": [
-    {
-      "id": "560add10cb82ac38a17513be",
-      "title": "Learn How freeCodeCamp Works",
-      "description": [
-        "",
-        "",
-        "Welcome to freeCodeCamp! <br><br>Check out the lesson map on the left. We have thousands of coding lessons to help you improve your skills. <br><br>You can earn verified certificates by completing certificate's 5 required projects.<br><br>And yes - all of this is 100% free, thanks to the thousands of campers who donate to our nonprofit.",
-        "",
-        "@@STEP@@"
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7
-    },
     {
       "id": "bd7123c8c441eddfaeb5bdef",
       "title": "Say Hello to HTML Elements",
@@ -36,13 +21,10 @@
         "<hr>",
         "To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\"."
       ],
-      "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\".');"
+          "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",
@@ -117,6 +99,18 @@
             "Для прохождения этого испытания измените текст элемента <code>h1</code> с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h1>Hello</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -129,12 +123,23 @@
         "<hr>",
         "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\".');"
+        {
+          "text": "Create an <code>h2</code> element.'",
+          "testString": "assert(($(\"h2\").length > 0), 'Create an <code>h2</code> element.')"
+        },
+        {
+          "text": "Make sure your <code>h2</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'Make sure your <code>h2</code> element has a closing tag.')"
+        },
+        {
+          "text": "Your <code>h2</code> element should have the text \"CatPhotoApp\".'",
+          "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'Your <code>h2</code> element should have the text \"CatPhotoApp\".')"
+        },
+        {
+          "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,
@@ -182,6 +187,18 @@
             "Добавьте метку <code>h2</code> с текстом \"CatPhotoApp\" для создания второго HTML <code>элемента</code> под вашим элементом <code>h1</code> с текстом \"Hello World\"."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h1>Hello World</h1>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -194,11 +211,19 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Create a <code>p</code> element.'",
+          "testString": "assert(($(\"p\").length > 0), 'Create a <code>p</code> element.')"
+        },
+        {
+          "text": "Your <code>p</code> element should have the text \"Hello Paragraph\".'",
+          "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".')"
+        },
+        {
+          "text": "Make sure your <code>p</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure your <code>p</code> element has a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -242,6 +267,19 @@
             "Создайте элемент <code>p</code> под вашим элементом <code>h2</code> и присвойте ему текст \"Hello Paragraph\"."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h1>Hello World</h1>",
+            "<h2>CatPhotoApp</h2>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -254,15 +292,11 @@
         "<hr>",
         "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>.');"
+        {
+          "text": "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.'",
+          "testString": "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -306,6 +340,22 @@
             "Замените текст внутри вашего элемента <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>"
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h1>Hello World</h1>",
+            "",
+            "<h2>CatPhotoApp</h2>",
+            "",
+            "<p>Hello Paragraph</p>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -318,20 +368,23 @@
         "<hr>",
         "Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
       ],
-      "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: 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>.');"
+        {
+          "text": "Make your <code>h1</code> element visible on your page by uncommenting it.'",
+          "testString": "assert($(\"h1\").length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.')"
+        },
+        {
+          "text": "Make your <code>h2</code> element visible on your page by uncommenting it.'",
+          "testString": "assert($(\"h2\").length > 0, 'Make your <code>h2</code> element visible on your page by uncommenting it.')"
+        },
+        {
+          "text": "Make your <code>p</code> element visible on your page by uncommenting it.'",
+          "testString": "assert($(\"p\").length > 0, 'Make your <code>p</code> element visible on your page by uncommenting it.')"
+        },
+        {
+          "text": "Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.'",
+          "testString": "assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\\n/g, 'Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -375,6 +428,24 @@
             "Раскомментируйте свои элементы <code>h1</code>, <code>h2</code> и <code>p</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<!--",
+            "<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>",
+            "-->"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -386,21 +457,27 @@
         "<hr>",
         "Comment out your <code>h1</code> element and your <code>p</code> element, but not your <code>h2</code> element."
       ],
-      "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: 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.');"
+        {
+          "text": "Comment out your <code>h1</code> element so that it is not visible on your page.'",
+          "testString": "assert(($(\"h1\").length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.')"
+        },
+        {
+          "text": "Leave your <code>h2</code> element uncommented so that it is visible on your page.'",
+          "testString": "assert(($(\"h2\").length > 0), 'Leave your <code>h2</code> element uncommented so that it is visible on your page.')"
+        },
+        {
+          "text": "Comment out your <code>p</code> element so that it is not visible on your page.'",
+          "testString": "assert(($(\"p\").length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.')"
+        },
+        {
+          "text": "Be sure to close each of your comments with <code>--&#62;</code>.'",
+          "testString": "assert(code.match(/[^fc]-->/g).length > 1, 'Be sure to close each of your comments with <code>--&#62;</code>.')"
+        },
+        {
+          "text": "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.'",
+          "testString": "assert((code.match(/<([a-z0-9]){1, 'Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -440,6 +517,24 @@
             "Закомментируйте ваши элементы <code>h1</code> и <code>p</code>, но оставьте ваш элемент <code>h2</code> раскомментированным."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<!--",
+            "<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>",
+            "-->"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -451,17 +546,19 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Delete your <code>h1</code> element.'",
+          "testString": "assert(($(\"h1\").length == 0), 'Delete your <code>h1</code> element.')"
+        },
+        {
+          "text": "Leave your <code>h2</code> element on the page.'",
+          "testString": "assert(($(\"h2\").length > 0), 'Leave your <code>h2</code> element on the page.')"
+        },
+        {
+          "text": "Leave your <code>p</code> element on the page.'",
+          "testString": "assert(($(\"p\").length > 0), 'Leave your <code>p</code> element on the page.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -501,6 +598,22 @@
             "Удалите ваш <code>h1</code> элемент, чтобы упростить общий вид."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -515,19 +628,35 @@
         "Create a second <code>p</code> element after the existing <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
         "Wrap the paragraphs with an opening and closing <code>main</code> 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($(\"p\").length > 1, 'message: You need 2 <code>p</code> elements with Kitty Ipsum text.');",
-        "assert(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.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.');",
-        "assert($('main').length === 1, 'message: Your code should have one <code>main</code> element.');",
-        "assert($(\"main\").children(\"p\").length === 2, 'message: The <code>main</code> element should have two paragraph elements as children.');",
-        "assert(code.match(/<main>\\s*?<p>/g), 'message: The opening <code>main</code> tag should come before the first paragraph tag.');",
-        "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'message: The closing <code>main</code> tag should come after the second closing paragraph tag.');"
+        {
+          "text": "You need 2 <code>p</code> elements with Kitty Ipsum text.'",
+          "testString": "assert($(\"p\").length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')"
+        },
+        {
+          "text": "Make sure each of your <code>p</code> elements has a closing tag.'",
+          "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')"
+        },
+        {
+          "text": "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.'",
+          "testString": "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.')"
+        },
+        {
+          "text": "Your code should have one <code>main</code> element.'",
+          "testString": "assert($('main').length === 1, 'Your code should have one <code>main</code> element.')"
+        },
+        {
+          "text": "The <code>main</code> element should have two paragraph elements as children.'",
+          "testString": "assert($(\"main\").children(\"p\").length === 2, 'The <code>main</code> element should have two paragraph elements as children.')"
+        },
+        {
+          "text": "The opening <code>main</code> tag should come before the first paragraph tag.'",
+          "testString": "assert(code.match(/<main>\\s*?<p>/g), 'The opening <code>main</code> tag should come before the first paragraph tag.')"
+        },
+        {
+          "text": "The closing <code>main</code> tag should come after the second closing paragraph tag.'",
+          "testString": "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'The closing <code>main</code> tag should come after the second closing paragraph tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -544,6 +673,20 @@
             "Coloque tags <code>main</code> de abertura e fechamento ao redor dos parágrafos."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -566,19 +709,19 @@
         "<code>https://bit.ly/fcc-relaxing-cat</code>",
         "Finally don't forget to give your image an <code>alt</code> text."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  ",
-        "  ",
-        "  <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>",
-        "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Your page should have an image element.'",
+          "testString": "assert($(\"img\").length > 0, 'Your page should have an image element.')"
+        },
+        {
+          "text": "Your image should have a <code>src</code> attribute that points to the kitten image.'",
+          "testString": "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", 'Your image should have a <code>src</code> attribute that points to the kitten image.')"
+        },
+        {
+          "text": "Your image element <strong>must</strong> have an <code>alt</code> attribute.'",
+          "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'Your image element <strong>must</strong> have an <code>alt</code> attribute.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -638,8 +781,25 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/add-images-to-your-website"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-images-to-your-website",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  ",
+            "  ",
+            "  <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>",
+            "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08816",
@@ -652,22 +812,19 @@
         "<hr>",
         "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": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  ",
-        "  ",
-        "  ",
-        "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "  ",
-        "  <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>",
-        "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".'",
+          "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".')"
+        },
+        {
+          "text": "You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>'",
+          "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>')"
+        },
+        {
+          "text": "Make sure your <code>a</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -720,6 +877,27 @@
             "Создайте элемент <code>a</code>, который присоединяет <code>http://freecatphotoapp.com</code> и имеет значение \"cat photos\" в качестве <code>текста якоря</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  ",
+            "  ",
+            "  ",
+            "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+            "  ",
+            "  <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>",
+            "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -736,37 +914,37 @@
         "Remove the <code>target=\"_blank\"</code> attribute from the anchor tag since this causes the linked document to open in a new window tab.",
         "Then add an <code>id</code> attribute with a value of \"footer\" to the <code>&lt;footer&gt;</code> element at the bottom of the page."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  ",
-        "  <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>",
-        "  ",
-        "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "  ",
-        "  <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. 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>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>",
-        "  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>",
-        "  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>",
-        "  ",
-        "</main>",
-        "  ",
-        "<footer>Copyright Cat Photo App</footer>"
-      ],
       "tests": [
-        "assert($('a').length == 1, 'message: There should be only one anchor tag on your page.');",
-        "assert($('footer').length == 1, 'message: There should be only one <code>footer</code> tag on your page.');",
-        "assert($('a').eq(0).attr('href') == \"#footer\", 'message: The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".');",
-        "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'message: The <code>a</code> tag should not have a <code>target</code> attribute');",
-        "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'message: The <code>a</code> text should be \"Jump to Bottom\".');",
-        "assert($('footer').eq(0).attr('id') == \"footer\", 'message: The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".');"
+        {
+          "text": "There should be only one anchor tag on your page.'",
+          "testString": "assert($('a').length == 1, 'There should be only one anchor tag on your page.')"
+        },
+        {
+          "text": "There should be only one <code>footer</code> tag on your page.'",
+          "testString": "assert($('footer').length == 1, 'There should be only one <code>footer</code> tag on your page.')"
+        },
+        {
+          "text": "The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".'",
+          "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".')"
+        },
+        {
+          "text": "The <code>a</code> tag should not have a <code>target</code> attribute'",
+          "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'The <code>a</code> tag should not have a <code>target</code> attribute')"
+        },
+        {
+          "text": "The <code>a</code> text should be \"Jump to Bottom\".'",
+          "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'The <code>a</code> text should be \"Jump to Bottom\".')"
+        },
+        {
+          "text": "The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".'",
+          "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
       "translations": {
         "pt-br": {
-          "title":
-            "Crie links para seções internas de uma página com elementos âncora",
+          "title": "Crie links para seções internas de uma página com elementos âncora",
           "description": [
             "Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.",
             "O formato é parecido com um link externo, só que, ao invés de uma URL no atributo <code>href</code>, você usa o símbolo <code>#</code> e uma palavra para descrever a seção para a qual você quer pular.",
@@ -781,6 +959,32 @@
             "<strong>Nota</strong><br>Adicionamos mais texto gatinho ipsum para os parágrafos para mostrar melhor o efeito de clicar no link interno para pular para o final da página. Além disso, essa mudança só vai se aplicar para esse desafio. O próximo desafio vai voltar a mostrar seu link externo."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  ",
+            "  <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>",
+            "  ",
+            "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+            "  ",
+            "  <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. 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>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>",
+            "  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>",
+            "  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>",
+            "  ",
+            "</main>",
+            "  ",
+            "<footer>Copyright Cat Photo App</footer>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -798,27 +1002,39 @@
         "<hr>",
         "Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>main</code> element). The new paragraph should have text that says \"View more cat photos\", where \"cat photos\" is a link, and the rest of the text is plain text."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  ",
-        "  <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>",
-        "  ",
-        "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "  ",
-        "  <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>",
-        "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
-        "</main>"
-      ],
       "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. There should be at least 3 total <code>p</code> tags in your HTML code.');",
-        "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.');"
+        {
+          "text": "You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".'",
+          "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".')"
+        },
+        {
+          "text": "Your <code>a</code> element should have the anchor text of \"cat photos\"'",
+          "testString": "assert($(\"a\").text().match(/cat\\sphotos/gi), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')"
+        },
+        {
+          "text": "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.'",
+          "testString": "assert($(\"p\") && $(\"p\").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.')"
+        },
+        {
+          "text": "Your <code>a</code> element should be nested within your new <code>p</code> element.'",
+          "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'Your <code>a</code> element should be nested within your new <code>p</code> element.')"
+        },
+        {
+          "text": "Your <code>p</code> element should have the text \"View more \" (with a space after it).'",
+          "testString": "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)), 'Your <code>p</code> element should have the text \"View more \" (with a space after it).')"
+        },
+        {
+          "text": "Your <code>a</code> element should <em>not</em> have the text \"View more\".'",
+          "testString": "assert(!$(\"a\").text().match(/View\\smore/gi), 'Your <code>a</code> element should <em>not</em> have the text \"View more\".')"
+        },
+        {
+          "text": "Make sure each of your <code>p</code> elements has a closing tag.'",
+          "testString": "assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')"
+        },
+        {
+          "text": "Make sure each of your <code>a</code> elements has a closing tag.'",
+          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -871,92 +1087,28 @@
             "Теперь вложите ваш существующий элемент <code>a</code> внутрь нового элемента <code>p</code> (сразу после существующего элемента <code>main</code>) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный."
           ]
         }
-      }
-    },
-    {
-      "id": "560add71cb82ac38a17513c2",
-      "title": "Join a freeCodeCamp Study Group in Your City",
-      "description": [
-        [
-          "",
-          "",
-          "You can code together with other campers in your city by joining a local freeCodeCamp study group. <br><br> Click the button below to open our study group directory. <br><br>Find your local study group and click it. This will take you to their Facebook group. <br><br>Click the <bold>Join group</bold> button. <br><br>You'll get a notification from Facebook once the group has accepted you. Then you can go back and introduce yourself. <br><br>If you don't have a Facebook account or don't want to code with other campers in your city, you can skip this step.",
-          "https://study-group-directory.freecodecamp.org/"
-        ]
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "translations": {
-        "es": {
-          "title": "Únete a un Campamento en Tu Ciudad",
-          "description": [
-            [
-              "https://i.imgur.com/NAOFJWN.jpg",
-              "Una imagen de algunos de nuestros campistas compartiendo en un café local. 3 hombres y 3 mujeres están sentados alrededor de una mesa con portátiles afuera, y están sonriendo y programando.",
-              "Nuestros Campamentos te ayudan a programar con otros campistas en tu ciudad. Puedes coordinar grupos de estudio o atender eventos de programación locales juntos.",
-              ""
-            ],
-            [
-              "https://i.imgur.com/fTFMjwf.gif",
-              "Un gif mostrándote como puedes pulsar en el enlace inferior, encontrar tu ciudad en la lista de Campamentos, entonces haz clic en el enlace de Facebook para tu ciudad y unirte al grupo de Facebook de tu ciudad.",
-              "Encuentra tu ciudad en esta lista y haz clic en esta. Esto te llevara al grupo de Facebook del Campamento de tu ciudad. Da clic en el botón de \"Unirse al grupo\" para unirte a el grupo. Alguien del mismo campamento debería aprobarte en breve.",
-              "http://forum.freecodecamp.org/t/free-code-camp-city-based-local-groups/19574"
-            ]
-          ]
-        },
-        "de": {
-          "title": "Tritt einem Campsite in deiner Stadt bei",
-          "description": [
-            [
-              "https://i.imgur.com/XugIMb4.jpg",
-              "Ein Foto von einigen Campern bei einem Treffen in einem lokalen Cafe.",
-              "Unsere Campsites sind Facebook Gruppen die dir helfen dich mit anderen Campern aus deiner Stadt zu treffen. Du kannst diese Gruppen verwenden um an \"Coffee-and-Code\" Treffen, wo du andere Camper in einem Cafe triffst um gemeinsam zu programmieren, teilzunehmen oder zu organisieren",
-              ""
-            ],
-            [
-              "https://i.imgur.com/fTFMjwf.gif",
-              "Ein GIF das zeigt wie du auf den untenstehenden Link klickst, deine Stadt aus der Liste aller Campsites suchst, auf den Facebook Link klickst und der Facebook Gruppe beitrittst.",
-              "Finde deine Stadt auf dieser Liste und klick sie an. Du wirst auf die Facebook Gruppe des Campsites deiner Stadt geleitet. Klick den \"Gruppe beitreten\" Button um eine Beitrittsanfrage zu stellen. Jemand aus der Gruppe sollte dich in kürzester Zeit annehmen.",
-              "http://forum.freecodecamp.org/t/free-code-camp-city-based-local-groups/19574"
-            ]
-          ]
-        },
-        "it": {
-          "title": "Unisciti ad un gruppo Free Code Camp nella tua città",
-          "description": [
-            [
-              "https://i.imgur.com/XugIMb4.jpg",
-              "Una foto di alcuni dei nostri camper riuniti in un bar locale.",
-              "È possibile programmare insieme ad altri campers nella tua città aderendo ad un gruppo Free Code Camp vicino a te.",
-              ""
-            ],
-            [
-              "https://i.imgur.com/fTFMjwf.gif",
-              "Una gif che mostra come è possibile fare clic sul link qui sotto, e trovare la tua città nella lista dei gruppi locali.",
-              "Trova la tua città in questa lista e cliccala. Verrai indirizzato alla sua pagina Facebook. Fai clic sul pulsante \" Entra nel gruppo \". Qualcuno del gruppo dovrebbe approvare a breve la tua richiesta. Se la tua città non è in questo elenco, scorri alla parte superiore di questo articolo wiki per le istruzioni su come iniziare un gruppo nella tua città. ",
-              "http://forum.freecodecamp.org/t/free-code-camp-city-based-local-groups/19574"
-            ]
-          ]
-        }
-        }
       },
-      {
-        "id": "58d9cc820ce2197370032a13",
-        "title": "Become a Supporter",
-        "description": [
-        [
-          "",
-          "",
-          "freeCodeCamp is a small nonprofit with a big mission: to help you improve your coding skills and expand your career. Help us pay for servers and other costs. Set up a monthly donation you can afford.",
-          "https://donate.freecodecamp.org"
-        ]
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  ",
+            "  <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>",
+            "  ",
+            "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+            "  ",
+            "  <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>",
+            "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedf08817",
@@ -968,19 +1120,11 @@
         "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.",
         "For example: <code>href=\"#\"</code>"
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>.</p>",
-        "  ",
-        "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "  ",
-        "  <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>",
-        "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
-        "</main>"
-      ],
       "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 \"#\".');"
+        {
+          "text": "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".'",
+          "testString": "assert($(\"a\").attr(\"href\") === \"#\", '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,
@@ -1021,6 +1165,26 @@
             "Замените значение атрибута <code>href</code> вашего элемента <code>a</code> на <code>#</code>, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>.</p>",
+            "  ",
+            "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+            "  ",
+            "  <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>",
+            "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1035,21 +1199,19 @@
         "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": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "  ",
-        "  <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>",
-        "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"a\").children(\"img\").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.');"
+        {
+          "text": "Nest the existing <code>img</code> element within an <code>a</code> element.'",
+          "testString": "assert($(\"a\").children(\"img\").length > 0, 'Nest the existing <code>img</code> element within an <code>a</code> element.')"
+        },
+        {
+          "text": "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.'",
+          "testString": "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.')"
+        },
+        {
+          "text": "Make sure each of your <code>a</code> elements has a closing tag.'",
+          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1099,6 +1261,26 @@
             "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+            "  ",
+            "  <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>",
+            "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1113,22 +1295,23 @@
         "<hr>",
         "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": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "  ",
-        "  <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>",
-        "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Create a <code>ul</code> element.'",
+          "testString": "assert($(\"ul\").length > 0, 'Create a <code>ul</code> element.')"
+        },
+        {
+          "text": "You should have three <code>li</code> elements within your <code>ul</code> element.'",
+          "testString": "assert($(\"ul li\").length > 2, 'You should have three <code>li</code> elements within your <code>ul</code> element.')"
+        },
+        {
+          "text": "Make sure your <code>ul</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'Make sure your <code>ul</code> element has a closing tag.')"
+        },
+        {
+          "text": "Make sure your <code>li</code> elements have closing tags.'",
+          "testString": "assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'Make sure your <code>li</code> elements have closing tags.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1181,6 +1364,26 @@
             "Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трёх вещей, которые любят кошки."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+            "  ",
+            "  <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>",
+            "  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1195,33 +1398,43 @@
         "<hr>",
         "Create an ordered list of the top 3 things cats hate the most."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
-        "  ",
-        "</main>"
-      ],
       "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\").length, 1, 'message: You should have only one <code>ul</code> element.');",
-        "assert.equal($(\"ol\").length, 1, 'message: You should have only one <code>ol</code> element.');",
-        "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.');"
+        {
+          "text": "You should have an ordered list for \"Top 3 things cats hate:\"'",
+          "testString": "assert((/Top 3 things cats hate:/i).test($(\"ol\").prev().text()), 'You should have an ordered list for \"Top 3 things cats hate:\"')"
+        },
+        {
+          "text": "You should have an unordered list for \"Things cats love:\"'",
+          "testString": "assert((/Things cats love:/i).test($(\"ul\").prev().text()), 'You should have an unordered list for \"Things cats love:\"')"
+        },
+        {
+          "text": "You should have only one <code>ul</code> element.'",
+          "testString": "assert.equal($(\"ul\").length, 'You should have only one <code>ul</code> element.')"
+        },
+        {
+          "text": "You should have only one <code>ol</code> element.'",
+          "testString": "assert.equal($(\"ol\").length, 'You should have only one <code>ol</code> element.')"
+        },
+        {
+          "text": "You should have three <code>li</code> elements within your <code>ul</code> element.'",
+          "testString": "assert.equal($(\"ul li\").length, 'You should have three <code>li</code> elements within your <code>ul</code> element.')"
+        },
+        {
+          "text": "You should have three <code>li</code> elements within your <code>ol</code> element.'",
+          "testString": "assert.equal($(\"ol li\").length, 'You should have three <code>li</code> elements within your <code>ol</code> element.')"
+        },
+        {
+          "text": "Make sure your <code>ul</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.')"
+        },
+        {
+          "text": "Make sure your <code>ol</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'Make sure your <code>ol</code> element has a closing tag.')"
+        },
+        {
+          "text": "Make sure your <code>li</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1274,6 +1487,32 @@
             "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
+            "  ",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1288,31 +1527,11 @@
         "<hr>",
         "Create an <code>input</code> element of type <code>text</code> below your lists."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
-        "  ",
-        "  ",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"input[type=text]\").length > 0, 'message: Your app should have an <code>input</code> element of type <code>text</code>.');"
+        {
+          "text": "Your app should have an <code>input</code> element of type <code>text</code>.'",
+          "testString": "assert($(\"input[type=text]\").length > 0, 'Your app should have an <code>input</code> element of type <code>text</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1365,6 +1584,38 @@
             "Создайте элемент <code>input</code> типа <code>text</code> под вашими списками."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
+            "  ",
+            "  ",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1377,32 +1628,19 @@
         "<hr>",
         "Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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\">",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.'",
+          "testString": "assert($(\"input[placeholder]\").length > 0, 'Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.')"
+        },
+        {
+          "text": "Set the value of your placeholder attribute to \"cat photo URL\".'",
+          "testString": "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".')"
+        },
+        {
+          "text": "The finished <code>input</code> element should have valid syntax.'",
+          "testString": "assert($(\"input[type=text]\").length > 0 && code.match(/<input((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[\\^'\">\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'The finished <code>input</code> element should have valid syntax.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1448,8 +1686,38 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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\">",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aede08830",
@@ -1461,32 +1729,19 @@
         "<hr>",
         "Nest your text field inside a <code>form</code> element, and add the <code>action=\"/submit-cat-photo\"</code> attribute to the form element."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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\">",
-        "<main>"
-      ],
       "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.');"
+        {
+          "text": "Nest your text input element within a <code>form</code> element.'",
+          "testString": "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a <code>form</code> element.')"
+        },
+        {
+          "text": "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>'",
+          "testString": "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>')"
+        },
+        {
+          "text": "Make sure your <code>form</code> element has well-formed open and close tags.'",
+          "testString": "assert(code.match(/<\\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\\/form>/g).length === code.match(/<form [^<]*>/g).length, 'Make sure your <code>form</code> element has well-formed open and close tags.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1531,6 +1786,37 @@
             "Вложите ваше текстовое поле в элемент <code>form</code>. Добавьте атрибут <code>action=\"/submit-cat-photo\"</code> к этому элементу формы."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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\">",
+            "<main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1543,35 +1829,23 @@
         "<hr>",
         "Add a button as the last element of your <code>form</code> element with a type of <code>submit</code>, and \"Submit\" as its text."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Your form should have a button inside it.'",
+          "testString": "assert($(\"form\").children(\"button\").length > 0, 'Your form should have a button inside it.')"
+        },
+        {
+          "text": "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.'",
+          "testString": "assert($(\"button\").attr(\"type\") === \"submit\", 'Your submit button should have the attribute <code>type</code> set to <code>submit</code>.')"
+        },
+        {
+          "text": "Your submit button should only have the text \"Submit\".'",
+          "testString": "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'Your submit button should only have the text \"Submit\".')"
+        },
+        {
+          "text": "Make sure your <code>button</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1617,8 +1891,40 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form"
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form",
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bad87fee1348bd9aedc08830",
@@ -1630,33 +1936,11 @@
         "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 inputting any text. See how your HTML5 form notifies you that the field is required?"
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
-        "</main>"
-      ],
       "tests": [
-        "assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.');"
+        {
+          "text": "Your text <code>input</code> element should have the <code>required</code> attribute.'",
+          "testString": "assert($(\"input\").prop(\"required\"), 'Your text <code>input</code> element should have the <code>required</code> attribute.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1695,8 +1979,7 @@
           ]
         },
         "ru": {
-          "title":
-            "Используйте HTML5, чтобы сделать заполнение поля обязательным",
+          "title": "Используйте HTML5, чтобы сделать заполнение поля обязательным",
           "description": [
             "Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
             "Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code>&#60;input type=\"text\" required&#62;</code>",
@@ -1706,6 +1989,40 @@
             "Внимание: это поле не работает в Safari."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1723,39 +2040,35 @@
         "<hr>",
         "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>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code>."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
-        "</main>"
-      ],
       "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($(\"label\").parent().get(0).tagName.match('FORM'), 'message: Each of your radio button elements should be added within the <code>form</code> tag.');"
+        {
+          "text": "Your page should have two radio button elements.'",
+          "testString": "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')"
+        },
+        {
+          "text": "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.'",
+          "testString": "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.')"
+        },
+        {
+          "text": "Each of your two radio button elements should be nested in its own <code>label</code> element.'",
+          "testString": "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'Each of your two radio button elements should be nested in its own <code>label</code> element.')"
+        },
+        {
+          "text": "Make sure each of your <code>label</code> elements has a closing tag.'",
+          "testString": "assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'Make sure each of your <code>label</code> elements has a closing tag.')"
+        },
+        {
+          "text": "One of your radio buttons should have the label <code>indoor</code>.'",
+          "testString": "assert($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.')"
+        },
+        {
+          "text": "One of your radio buttons should have the label <code>outdoor</code>.'",
+          "testString": "assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.')"
+        },
+        {
+          "text": "Each of your radio button elements should be added within the <code>form</code> tag.'",
+          "testString": "assert($(\"label\").parent().get(0).tagName.match('FORM'), 'Each of your radio button elements should be added within the <code>form</code> tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1812,6 +2125,40 @@
             "Добавьте пару радио-кнопок к вашей форме. Одна должна соответствовать варианту <code>indoor</code>, а другая - <code>outdoor</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1827,38 +2174,23 @@
         "<hr>",
         "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": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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 for=\"indoor\"><input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
-        "    <label for=\"outdoor\"><input id=\"outdoor\" type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "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>.');"
+        {
+          "text": "Your page should have three checkbox elements.'",
+          "testString": "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')"
+        },
+        {
+          "text": "Each of your three checkbox elements should be nested in its own <code>label</code> element.'",
+          "testString": "assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.')"
+        },
+        {
+          "text": "Make sure each of your <code>label</code> elements has a closing tag.'",
+          "testString": "assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')"
+        },
+        {
+          "text": "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.'",
+          "testString": "assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'Give your checkboxes the <code>name</code> attribute of <code>personality</code>.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1915,6 +2247,42 @@
             "Добавьте набор из трёх флаговых кнопок к вашей форме. Каждый флаг должен быть вложен внутрь собственного элемента <code>label</code>. Все три флага должны иметь одинаковый атрибут <code>name</code>, значение которго равно <code>personality</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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 for=\"indoor\"><input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
+            "    <label for=\"outdoor\"><input id=\"outdoor\" type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -1927,39 +2295,15 @@
         "<hr>",
         "Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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><br>",
-        "    <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
-        "    <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
-        "    <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Your first radio button on your form should be checked by default.'",
+          "testString": "assert($('input[type=\"radio\"]').prop(\"checked\"), 'Your first radio button on your form should be checked by default.')"
+        },
+        {
+          "text": "Your first checkbox on your form should be checked by default.'",
+          "testString": "assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'Your first checkbox on your form should be checked by default.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1975,8 +2319,7 @@
           ]
         },
         "es": {
-          "title":
-            "Marca botones de radio y casillas de verificación por omisión",
+          "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:",
@@ -1986,8 +2329,7 @@
           ]
         },
         "pt-br": {
-          "title":
-            "Faça botões de opção e caixas de seleção estarem marcados por padrão",
+          "title": "Faça botões de opção e caixas de seleção estarem marcados por padrão",
           "description": [
             "Você pode fazer uma caixa de seleção ou botão de opção estar marcado por padrão usando o atributo <code>checked</code>.",
             "Para fazer isso, apenas insira a palavra \"checked\" em um elemento <code>input</code>. Por exemplo:",
@@ -2006,6 +2348,45 @@
             "Установите первую <code>радио-кнопку</code> и первый <code>флаг</code> из наборов отмеченными по-умолчанию."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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><br>",
+            "    <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
+            "    <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
+            "    <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2019,42 +2400,23 @@
         "Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
         "Hint: 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>."
       ],
-      "challengeSeed": [
-        "<h2>CatPhotoApp</h2>",
-        "<main>",
-        "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
-        "  ",
-        "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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><br>",
-        "    <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><br>",
-        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "    <button type=\"submit\">Submit</button>",
-        "  </form>",
-        "</main>"
-      ],
       "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.');"
+        {
+          "text": "Nest your <code>p</code> elements inside your <code>div</code> element.'",
+          "testString": "assert($(\"div\").children(\"p\").length > 1, 'Nest your <code>p</code> elements inside your <code>div</code> element.')"
+        },
+        {
+          "text": "Nest your <code>ul</code> element inside your <code>div</code> element.'",
+          "testString": "assert($(\"div\").children(\"ul\").length > 0, 'Nest your <code>ul</code> element inside your <code>div</code> element.')"
+        },
+        {
+          "text": "Nest your <code>ol</code> element inside your <code>div</code> element.'",
+          "testString": "assert($(\"div\").children(\"ol\").length > 0, 'Nest your <code>ol</code> element inside your <code>div</code> element.')"
+        },
+        {
+          "text": "Make sure your <code>div</code> element has a closing tag.'",
+          "testString": "assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2103,6 +2465,46 @@
             "Вложите ваши списки \"Things cats love\" и \"Things cats hate\" внутрь одного элемента <code>div</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<h2>CatPhotoApp</h2>",
+            "<main>",
+            "  <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
+            "  ",
+            "  <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></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><br>",
+            "    <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><br>",
+            "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+            "    <button type=\"submit\">Submit</button>",
+            "  </form>",
+            "</main>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2119,11 +2521,19 @@
         "<hr>",
         "Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading 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, 'message: There should be one <code>html</code> element.');",
-        "assert(code.match(/<html>\\s*?<h1>\\s*?.*?\\s*?<\\/h1>\\s*?<\\/html>/gi), 'message: The <code>html</code> tags should wrap around one <code>h1</code> element.');"
+        {
+          "text": "Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.'",
+          "testString": "assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.')"
+        },
+        {
+          "text": "There should be one <code>html</code> element.'",
+          "testString": "assert($('html').length == 1, 'There should be one <code>html</code> element.')"
+        },
+        {
+          "text": "The <code>html</code> tags should wrap around one <code>h1</code> element.'",
+          "testString": "assert(code.match(/<html>\\s*?<h1>\\s*?.*?\\s*?<\\/h1>\\s*?<\\/html>/gi), 'The <code>html</code> tags should wrap around one <code>h1</code> element.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2142,6 +2552,20 @@
             "Adicione uma tag <code>DOCTYPE</code> para HTML5 no topo do documento HTML em branco no editor de texto. Abaixo dela, adicione tags <code>html</code> de abertura e fechamento, ao redor de um elemento <code>h1</code>. O texto do <code>h1</code> pode ser qualquer um."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -2155,23 +2579,31 @@
         "<hr>",
         "Edit the markup so there's a <code>head</code> and a <code>body</code>. The <code>head</code> element should only include the <code>title</code>, and the <code>body</code> element should only include the <code>h1</code> and <code>p</code>."
       ],
-      "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(code.match(/<head>\\s*?<title>\\s*?.*?\\s*?<\\/title>\\s*?<\\/head>/gi), '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.');"
+        {
+          "text": "There should be only one <code>head</code> element on the page.'",
+          "testString": "assert($('head').length == 1, 'There should be only one <code>head</code> element on the page.')"
+        },
+        {
+          "text": "There should be only one <code>body</code> element on the page.'",
+          "testString": "assert($('body').length == 1, 'There should be only one <code>body</code> element on the page.')"
+        },
+        {
+          "text": "The <code>head</code> element should be a child of the <code>html</code> element.'",
+          "testString": "assert($('html').children('head').length == 1, 'The <code>head</code> element should be a child of the <code>html</code> element.')"
+        },
+        {
+          "text": "The <code>body</code> element should be a child of the <code>html</code> element.'",
+          "testString": "assert($('html').children('body').length == 1, 'The <code>body</code> element should be a child of the <code>html</code> element.')"
+        },
+        {
+          "text": "The <code>head</code> element should wrap around the <code>title</code> element.'",
+          "testString": "assert(code.match(/<head>\\s*?<title>\\s*?.*?\\s*?<\\/title>\\s*?<\\/head>/gi), 'The <code>head</code> element should wrap around the <code>title</code> element.')"
+        },
+        {
+          "text": "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.'",
+          "testString": "assert($('body').children('h1').length == 1 && $('body').children('p').length == 1, 'The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.')"
+        }
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2187,7 +2619,29 @@
             "Edite o código para que tenha uma <code>head</code> e um <code>body</code>. O elemento <code>head</code> deve incluir apenas o <code>title</code>, e o elemento <code>body</code> deve conter apenas o <code>h1</code> e o <code>p</code>."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<!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>  "
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     }
-  ]
-}
+  ],
+  "fileName": "01-responsive-web-design/basic-html-and-html5.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/css-flexbox.json b/packages/learn/seed/challenges/01-responsive-web-design/css-flexbox.json
index 71dfb750ed..455c074f05 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/css-flexbox.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/css-flexbox.json
@@ -4,24 +4,6 @@
   "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.",
-        "",
-        "@@STEP@@"
-      ],
-      "releasedOn": "Feb 17, 2017",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {}
-    },
     {
       "id": "587d78ab367417b2b2512af0",
       "title": "Use display: flex to Position Two Boxes",
@@ -31,41 +13,53 @@
         "<hr>",
         "Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to flex."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  #box-container {",
-        "    height: 500px;",
-        "    ",
-        "  }",
-        "  ",
-        "  #box-1 {",
-        "    background-color: dodgerblue;",
-        "    width: 50%;",
-        "    height: 50%;",
-        "    ",
-        "  }",
-        "",
-        "  #box-2 {",
-        "    background-color: orangered;",
-        "    width: 50%;",
-        "    height: 50%;",
-        "    ",
-        "  }",
-        "</style>",
-        "<div id=\"box-container\">",
-        "  <div id=\"box-1\"></div>",
-        "  <div id=\"box-2\"></div>",
-        "</div>"
-      ],
       "tests": [
-        "assert($('#box-container').css('display') == 'flex', 'message: <code>#box-container</code> should have the <code>display</code> property set to a value of flex.');"
+        {
+          "text": "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.'",
+          "testString": "assert($('#box-container').css('display') == 'flex', '<code>#box-container</code> should have the <code>display</code> property set to a value of flex.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  #box-container {",
+            "    height: 500px;",
+            "    ",
+            "  }",
+            "  ",
+            "  #box-1 {",
+            "    background-color: dodgerblue;",
+            "    width: 50%;",
+            "    height: 50%;",
+            "    ",
+            "  }",
+            "",
+            "  #box-2 {",
+            "    background-color: orangered;",
+            "    width: 50%;",
+            "    height: 50%;",
+            "    ",
+            "  }",
+            "</style>",
+            "<div id=\"box-container\">",
+            "  <div id=\"box-1\"></div>",
+            "  <div id=\"box-2\"></div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ab367417b2b2512af1",
@@ -76,112 +70,142 @@
         "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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
-        "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
-        "  <hr>",
-        "</div>",
-        "<footer>",
-        "  <div class=\"stats\">",
-        "    <div class=\"Retweets\">",
-        "      <strong>107</strong> Retweets",
-        "    </div>",
-        "    <div class=\"likes\">",
-        "      <strong>431</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.');"
+        {
+          "text": "Your <code>header</code> should have a <code>display</code> property set to flex.'",
+          "testString": "assert($('header').css('display') == 'flex', 'Your <code>header</code> should have a <code>display</code> property set to flex.')"
+        },
+        {
+          "text": "Your <code>footer</code> should have a <code>display</code> property set to flex.'",
+          "testString": "assert($('footer').css('display') == 'flex', 'Your <code>footer</code> should have a <code>display</code> property set to flex.')"
+        },
+        {
+          "text": "Your <code>h3</code> should have a <code>display</code> property set to flex.'",
+          "testString": "assert($('h3').css('display') == 'flex', 'Your <code>h3</code> should have a <code>display</code> property set to flex.')"
+        },
+        {
+          "text": "Your <code>h4</code> should have a <code>display</code> property set to flex.'",
+          "testString": "assert($('h4').css('display') == 'flex', 'Your <code>h4</code> should have a <code>display</code> property set to flex.')"
+        },
+        {
+          "text": "Your <code>.profile-name</code> should have a <code>display</code> property set to flex.'",
+          "testString": "assert($('.profile-name').css('display') == 'flex', 'Your <code>.profile-name</code> should have a <code>display</code> property set to flex.')"
+        },
+        {
+          "text": "Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.'",
+          "testString": "assert($('.follow-btn').css('display') == 'flex', 'Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.')"
+        },
+        {
+          "text": "Your <code>.stats</code> should have a <code>display</code> property set to flex.'",
+          "testString": "assert($('.stats').css('display') == 'flex', 'Your <code>.stats</code> should have a <code>display</code> property set to flex.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
+            "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
+            "  <hr>",
+            "</div>",
+            "<footer>",
+            "  <div class=\"stats\">",
+            "    <div class=\"Retweets\">",
+            "      <strong>107</strong> Retweets",
+            "    </div>",
+            "    <div class=\"likes\">",
+            "      <strong>431</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ab367417b2b2512af2",
@@ -193,40 +217,52 @@
         "<hr>",
         "Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row-reverse."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  #box-container {",
-        "    display: flex;",
-        "    height: 500px;",
-        "    ",
-        "  }",
-        "  #box-1 {",
-        "    background-color: dodgerblue;",
-        "    width: 50%;",
-        "    height: 50%;",
-        "  }",
-        "",
-        "  #box-2 {",
-        "    background-color: orangered;",
-        "    width: 50%;",
-        "    height: 50%;",
-        "  }",
-        "</style>",
-        "",
-        "<div id=\"box-container\">",
-        "  <div id=\"box-1\"></div>",
-        "  <div id=\"box-2\"></div>",
-        "</div>"
-      ],
       "tests": [
-        "assert($('#box-container').css('flex-direction') == 'row-reverse', 'message: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.');"
+        {
+          "text": "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.'",
+          "testString": "assert($('#box-container').css('flex-direction') == 'row-reverse', 'The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  #box-container {",
+            "    display: flex;",
+            "    height: 500px;",
+            "    ",
+            "  }",
+            "  #box-1 {",
+            "    background-color: dodgerblue;",
+            "    width: 50%;",
+            "    height: 50%;",
+            "  }",
+            "",
+            "  #box-2 {",
+            "    background-color: orangered;",
+            "    width: 50%;",
+            "    height: 50%;",
+            "  }",
+            "</style>",
+            "",
+            "<div id=\"box-container\">",
+            "  <div id=\"box-1\"></div>",
+            "  <div id=\"box-2\"></div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ab367417b2b2512af3",
@@ -236,109 +272,124 @@
         "<hr>",
         "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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
-        "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
-        "  <hr>",
-        "</div>",
-        "<footer>",
-        "  <div class=\"stats\">",
-        "    <div class=\"Retweets\">",
-        "      <strong>107</strong> Retweets",
-        "    </div>",
-        "    <div class=\"likes\">",
-        "      <strong>431</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(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The <code>header</code> should have a <code>flex-direction</code> property set to row.');",
-        "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
+        {
+          "text": "The <code>header</code> should have a <code>flex-direction</code> property set to row.'",
+          "testString": "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The <code>header</code> should have a <code>flex-direction</code> property set to row.')"
+        },
+        {
+          "text": "The <code>footer</code> should have a <code>flex-direction</code> property set to row.'",
+          "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The <code>footer</code> should have a <code>flex-direction</code> property set to row.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
+            "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
+            "  <hr>",
+            "</div>",
+            "<footer>",
+            "  <div class=\"stats\">",
+            "    <div class=\"Retweets\">",
+            "      <strong>107</strong> Retweets",
+            "    </div>",
+            "    <div class=\"likes\">",
+            "      <strong>431</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ac367417b2b2512af4",
@@ -348,40 +399,52 @@
         "<hr>",
         "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;",
-        "    height: 500px;",
-        "    ",
-        "  }",
-        "  #box-1 {",
-        "    background-color: dodgerblue;",
-        "    width: 50%;",
-        "    height: 50%;",
-        "  }",
-        "",
-        "  #box-2 {",
-        "    background-color: orangered;",
-        "    width: 50%;",
-        "    height: 50%;",
-        "  }",
-        "</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.');"
+        {
+          "text": "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.'",
+          "testString": "assert($('#box-container').css('flex-direction') == 'column', 'The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  #box-container {",
+            "    display: flex;",
+            "    height: 500px;",
+            "    ",
+            "  }",
+            "  #box-1 {",
+            "    background-color: dodgerblue;",
+            "    width: 50%;",
+            "    height: 50%;",
+            "  }",
+            "",
+            "  #box-2 {",
+            "    background-color: orangered;",
+            "    width: 50%;",
+            "    height: 50%;",
+            "  }",
+            "</style>",
+            "",
+            "<div id=\"box-container\">",
+            "  <div id=\"box-1\"></div>",
+            "  <div id=\"box-2\"></div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ac367417b2b2512af5",
@@ -391,105 +454,117 @@
         "<hr>",
         "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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
-        "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
-        "  <hr>",
-        "</div>",
-        "<footer>",
-        "  <div class=\"stats\">",
-        "    <div class=\"Retweets\">",
-        "      <strong>107</strong> Retweets",
-        "    </div>",
-        "    <div class=\"likes\">",
-        "      <strong>431</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.');"
+        {
+          "text": "The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.'",
+          "testString": "assert($('.profile-name').css('flex-direction') == 'column', 'The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
+            "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
+            "  <hr>",
+            "</div>",
+            "<footer>",
+            "  <div class=\"stats\">",
+            "    <div class=\"Retweets\">",
+            "      <strong>107</strong> Retweets",
+            "    </div>",
+            "    <div class=\"likes\">",
+            "      <strong>431</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ac367417b2b2512af6",
@@ -504,41 +579,53 @@
         "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: 25%;",
-        "    height: 100%;",
-        "  }",
-        "",
-        "  #box-2 {",
-        "    background-color: orangered;",
-        "    width: 25%;",
-        "    height: 100%;",
-        "  }",
-        "</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.');"
+        {
+          "text": "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.'",
+          "testString": "assert($('#box-container').css('justify-content') == 'center', 'The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  #box-container {",
+            "    background: gray;",
+            "    display: flex;",
+            "    height: 500px;",
+            "    ",
+            "  }",
+            "  #box-1 {",
+            "    background-color: dodgerblue;",
+            "    width: 25%;",
+            "    height: 100%;",
+            "  }",
+            "",
+            "  #box-2 {",
+            "    background-color: orangered;",
+            "    width: 25%;",
+            "    height: 100%;",
+            "  }",
+            "</style>",
+            "",
+            "<div id=\"box-container\">",
+            "  <div id=\"box-1\"></div>",
+            "  <div id=\"box-2\"></div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ac367417b2b2512af7",
@@ -548,106 +635,118 @@
         "<hr>",
         "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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
-        "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
-        "  <hr>",
-        "</div>",
-        "<footer>",
-        "  <div class=\"stats\">",
-        "    <div class=\"Retweets\">",
-        "      <strong>107</strong> Retweets",
-        "    </div>",
-        "    <div class=\"likes\">",
-        "      <strong>431</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(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), '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.');"
+        {
+          "text": "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.'",
+          "testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
+            "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
+            "  <hr>",
+            "</div>",
+            "<footer>",
+            "  <div class=\"stats\">",
+            "    <div class=\"Retweets\">",
+            "      <strong>107</strong> Retweets",
+            "    </div>",
+            "    <div class=\"likes\">",
+            "      <strong>431</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ad367417b2b2512af8",
@@ -662,41 +761,53 @@
         "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.');"
+        {
+          "text": "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.'",
+          "testString": "assert($('#box-container').css('align-items') == 'center', 'The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ad367417b2b2512af9",
@@ -706,110 +817,128 @@
         "<hr>",
         "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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
-        "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
-        "  <hr>",
-        "</div>",
-        "<footer>",
-        "  <div class=\"stats\">",
-        "    <div class=\"Retweets\">",
-        "      <strong>107</strong> Retweets",
-        "    </div>",
-        "    <div class=\"likes\">",
-        "      <strong>431</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.');"
+        {
+          "text": "The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.'",
+          "testString": "assert($('.follow-btn').css('align-items') == 'center', 'The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.')"
+        },
+        {
+          "text": "The <code>h3</code> element should have the <code>align-items</code> property set to a value of center.'",
+          "testString": "assert($('h3').css('align-items') == 'center', 'The <code>h3</code> element should have the <code>align-items</code> property set to a value of center.')"
+        },
+        {
+          "text": "The <code>h4</code> element should have the <code>align-items</code> property set to a value of center.'",
+          "testString": "assert($('h4').css('align-items') == 'center', 'The <code>h4</code> element should have the <code>align-items</code> property set to a value of center.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
+            "  <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
+            "  <hr>",
+            "</div>",
+            "<footer>",
+            "  <div class=\"stats\">",
+            "    <div class=\"Retweets\">",
+            "      <strong>107</strong> Retweets",
+            "    </div>",
+            "    <div class=\"likes\">",
+            "      <strong>431</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ad367417b2b2512afa",
@@ -822,65 +951,77 @@
         "<hr>",
         "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: 100%;",
-        "      ",
-        "  }",
-        "  #box-1 {",
-        "    background-color: dodgerblue;",
-        "    width: 25%;",
-        "    height: 50%;",
-        "  }",
-        "",
-        "  #box-2 {",
-        "    background-color: orangered;",
-        "    width: 25%;",
-        "    height: 50%;",
-        "  }",
-        "  #box-3 {",
-        "    background-color: violet;",
-        "    width: 25%;",
-        "    height: 50%;",
-        "  }",
-        "  #box-4 {",
-        "    background-color: yellow;",
-        "    width: 25%;",
-        "    height: 50%;",
-        "  }",
-        "  #box-5 {",
-        "    background-color: green;",
-        "    width: 25%;",
-        "    height: 50%;",
-        "  }",
-        "  #box-6 {",
-        "    background-color: black;",
-        "    width: 25%;",
-        "    height: 50%;",
-        "  }",
-        "</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.');"
+        {
+          "text": "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.'",
+          "testString": "assert($('#box-container').css('flex-wrap') == 'wrap', 'The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  #box-container {",
+            "    background: gray;",
+            "    display: flex;",
+            "    height: 100%;",
+            "      ",
+            "  }",
+            "  #box-1 {",
+            "    background-color: dodgerblue;",
+            "    width: 25%;",
+            "    height: 50%;",
+            "  }",
+            "",
+            "  #box-2 {",
+            "    background-color: orangered;",
+            "    width: 25%;",
+            "    height: 50%;",
+            "  }",
+            "  #box-3 {",
+            "    background-color: violet;",
+            "    width: 25%;",
+            "    height: 50%;",
+            "  }",
+            "  #box-4 {",
+            "    background-color: yellow;",
+            "    width: 25%;",
+            "    height: 50%;",
+            "  }",
+            "  #box-5 {",
+            "    background-color: green;",
+            "    width: 25%;",
+            "    height: 50%;",
+            "  }",
+            "  #box-6 {",
+            "    background-color: black;",
+            "    width: 25%;",
+            "    height: 50%;",
+            "  }",
+            "</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ad367417b2b2512afb",
@@ -892,42 +1033,57 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.'",
+          "testString": "assert($('#box-1').css('flex-shrink') == '1', 'The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.')"
+        },
+        {
+          "text": "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.'",
+          "testString": "assert($('#box-2').css('flex-shrink') == '2', 'The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ae367417b2b2512afc",
@@ -938,41 +1094,56 @@
         "<hr>",
         "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;",
-        "    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') == '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.');"
+        {
+          "text": "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.'",
+          "testString": "assert($('#box-1').css('flex-grow') == '1', 'The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.')"
+        },
+        {
+          "text": "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.'",
+          "testString": "assert($('#box-2').css('flex-grow') == '2', 'The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ae367417b2b2512afd",
@@ -983,43 +1154,64 @@
         "<hr>",
         "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 <code>10em</code> and <code>#box-2</code> a value of <code>20em</code>."
       ],
-      "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 <code>10em</code>.');",
-        "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 <code>20em</code>.');"
+        {
+          "text": "The <code>#box-1</code> element should have a <code>flex-basis</code> property.'",
+          "testString": "assert($('#box-1').css('flex-basis') != 'auto', 'The <code>#box-1</code> element should have a <code>flex-basis</code> property.')"
+        },
+        {
+          "text": "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.'",
+          "testString": "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), 'The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.')"
+        },
+        {
+          "text": "The <code>#box-2</code> element should have the <code>flex-basis</code> property.'",
+          "testString": "assert($('#box-2').css('flex-basis') != 'auto', 'The <code>#box-2</code> element should have the <code>flex-basis</code> property.')"
+        },
+        {
+          "text": "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.'",
+          "testString": "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), 'The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ae367417b2b2512afe",
@@ -1032,41 +1224,59 @@
         "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 grow to fill the extra space at twice the rate of <code>#box-2</code> when the container is greater than 300px and shrink at twice the rate of <code>#box-2</code> 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>.');"
+        {
+          "text": "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.'",
+          "testString": "assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', 'The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.')"
+        },
+        {
+          "text": "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.'",
+          "testString": "assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', 'The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.')"
+        },
+        {
+          "text": "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.'",
+          "testString": "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, 'Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78ae367417b2b2512aff",
@@ -1076,42 +1286,57 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.'",
+          "testString": "assert($('#box-1').css('order') == '2', 'The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.')"
+        },
+        {
+          "text": "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.'",
+          "testString": "assert($('#box-2').css('order') == '1', 'The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78af367417b2b2512b00",
@@ -1122,42 +1347,60 @@
         "<hr>",
         "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.');"
+        {
+          "text": "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.'",
+          "testString": "assert($('#box-1').css('align-self') == 'center', 'The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.')"
+        },
+        {
+          "text": "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.'",
+          "testString": "assert($('#box-2').css('align-self') == 'flex-end', '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",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     }
-  ]
-}
+  ],
+  "fileName": "01-responsive-web-design/css-flexbox.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/css-grid.json b/packages/learn/seed/challenges/01-responsive-web-design/css-grid.json
index 224a282a09..59d86dcda7 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/css-grid.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/css-grid.json
@@ -4,1282 +4,1534 @@
   "time": "5 hours",
   "helpRoom": "Help",
   "challenges": [
-    {
-      "id": "5a858937d96184f06fd60d60",
-      "title": "Introduction to the CSS Grid Challenges",
-      "description": [
-        "",
-        "",
-        "<dfn>CSS Grid</dfn> helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid.",
-        "",
-        "@@STEP@@"
-      ],
-      "releasedOn": "Feb 15, 2018",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {}
-    },
     {
       "id": "5a858944d96184f06fd60d61",
       "title": "Create Your First CSS Grid",
       "description": [
-      "Turn any HTML element into a grid container by setting its <code>display</code> property to <code>grid</code>. This gives you the ability to use all the other properties associated with CSS Grid.",
-      "<strong>Note</strong><br>In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.",
-      "<hr>",
-      "Change the display of the div with the <code>container</code> class to <code>grid</code>."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .d1{background:LightSkyBlue;}",
-      "  .d2{background:LightSalmon;}",
-      "  .d3{background:PaleTurquoise;}",
-      "  .d4{background:LightPink;}",
-      "  .d5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"d1\">1</div>",
-      "  <div class=\"d2\">2</div>",
-      "  <div class=\"d3\">3</div>",
-      "  <div class=\"d4\">4</div>",
-      "  <div class=\"d5\">5</div>",
-      "</div>"
+        "Turn any HTML element into a grid container by setting its <code>display</code> property to <code>grid</code>. This gives you the ability to use all the other properties associated with CSS Grid.",
+        "<strong>Note</strong><br>In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.",
+        "<hr>",
+        "Change the display of the div with the <code>container</code> class to <code>grid</code>."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .d1{background:LightSkyBlue;}",
+            "  .d2{background:LightSalmon;}",
+            "  .d3{background:PaleTurquoise;}",
+            "  .d4{background:LightPink;}",
+            "  .d5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"d1\">1</div>",
+            "  <div class=\"d2\">2</div>",
+            "  <div class=\"d3\">3</div>",
+            "  <div class=\"d4\">4</div>",
+            "  <div class=\"d5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9036d038fddaf9a66b5d32",
       "title": "Add Columns with grid-template-columns",
       "description": [
-      "Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the <code>grid-template-columns</code> property on a grid container as demonstrated below:",
-      "<blockquote>.container {<br>display: grid;<br>grid-template-columns: 50px 50px;<br>}</blockquote>",
-      "This will give your grid two columns that are 50px wide each.",
-      "The number of parameters given to the <code>grid-template-columns</code> property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.",
-      "<hr>",
-      "Give the grid container three columns that are <code>100px</code> wide each."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .d1{background:LightSkyBlue;}",
-      "  .d2{background:LightSalmon;}",
-      "  .d3{background:PaleTurquoise;}",
-      "  .d4{background:LightPink;}",
-      "  .d5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"d1\">1</div>",
-      "  <div class=\"d2\">2</div>",
-      "  <div class=\"d3\">3</div>",
-      "  <div class=\"d4\">4</div>",
-      "  <div class=\"d5\">5</div>",
-      "</div>"
+        "Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the <code>grid-template-columns</code> property on a grid container as demonstrated below:",
+        "<blockquote>.container {<br>display: grid;<br>grid-template-columns: 50px 50px;<br>}</blockquote>",
+        "This will give your grid two columns that are 50px wide each.",
+        "The number of parameters given to the <code>grid-template-columns</code> property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.",
+        "<hr>",
+        "Give the grid container three columns that are <code>100px</code> wide each."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "waypoint",
       "releasedOn": "Feb 15, 2018",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .d1{background:LightSkyBlue;}",
+            "  .d2{background:LightSalmon;}",
+            "  .d3{background:PaleTurquoise;}",
+            "  .d4{background:LightPink;}",
+            "  .d5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"d1\">1</div>",
+            "  <div class=\"d2\">2</div>",
+            "  <div class=\"d3\">3</div>",
+            "  <div class=\"d4\">4</div>",
+            "  <div class=\"d5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9036e138fddaf9a66b5d33",
       "title": "Add Rows with grid-template-rows",
       "description": [
-      "The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the <code>grid-template-rows</code> property in the same way you used <code>grid-template-columns</code> in previous challenge.",
-      "<hr>",
-      "Add two rows to the grid that are <code>50px</code> tall each."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .d1{background:LightSkyBlue;}",
-      "  .d2{background:LightSalmon;}",
-      "  .d3{background:PaleTurquoise;}",
-      "  .d4{background:LightPink;}",
-      "  .d5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 100px 100px 100px;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"d1\">1</div>",
-      "  <div class=\"d2\">2</div>",
-      "  <div class=\"d3\">3</div>",
-      "  <div class=\"d4\">4</div>",
-      "  <div class=\"d5\">5</div>",
-      "</div>"
+        "The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the <code>grid-template-rows</code> property in the same way you used <code>grid-template-columns</code> in previous challenge.",
+        "<hr>",
+        "Add two rows to the grid that are <code>50px</code> tall each."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .d1{background:LightSkyBlue;}",
+            "  .d2{background:LightSalmon;}",
+            "  .d3{background:PaleTurquoise;}",
+            "  .d4{background:LightPink;}",
+            "  .d5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 100px 100px 100px;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"d1\">1</div>",
+            "  <div class=\"d2\">2</div>",
+            "  <div class=\"d3\">3</div>",
+            "  <div class=\"d4\">4</div>",
+            "  <div class=\"d5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9036ee38fddaf9a66b5d34",
       "title": "Use CSS Grid units to Change the Size of Columns and Rows",
       "description": [
-      "You can use absolute and relative units like <code>px</code> and <code>em</code> in CSS Grid to define the size of rows and columns. You can use these as well:",
-      "<code>fr</code>: sets the column or row to a fraction of the available space,",
-      "<code>auto</code>: sets the column or row to the width or height of its content automatically,",
-      "<code>%</code>: adjusts the column or row to the percent width of its container.",
-      "Here's the code that generates the output in the preview:",
-      "<blockquote>grid-template-columns: auto 50px 10% 2fr 1fr;</blockquote>",
-      "This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.",
-      "<hr>",
-      "Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .d1{background:LightSkyBlue;}",
-      "  .d2{background:LightSalmon;}",
-      "  .d3{background:PaleTurquoise;}",
-      "  .d4{background:LightPink;}",
-      "  .d5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    /* modify the code below this line */",
-      "    ",
-      "    grid-template-columns: auto 50px 10% 2fr 1fr;",
-      "    ",
-      "    /* modify the code above this line */",
-      "    grid-template-rows: 50px 50px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"d1\">1</div>",
-      "  <div class=\"d2\">2</div>",
-      "  <div class=\"d3\">3</div>",
-      "  <div class=\"d4\">4</div>",
-      "  <div class=\"d5\">5</div>",
-      "</div>"
+        "You can use absolute and relative units like <code>px</code> and <code>em</code> in CSS Grid to define the size of rows and columns. You can use these as well:",
+        "<code>fr</code>: sets the column or row to a fraction of the available space,",
+        "<code>auto</code>: sets the column or row to the width or height of its content automatically,",
+        "<code>%</code>: adjusts the column or row to the percent width of its container.",
+        "Here's the code that generates the output in the preview:",
+        "<blockquote>grid-template-columns: auto 50px 10% 2fr 1fr;</blockquote>",
+        "This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.",
+        "<hr>",
+        "Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .d1{background:LightSkyBlue;}",
+            "  .d2{background:LightSalmon;}",
+            "  .d3{background:PaleTurquoise;}",
+            "  .d4{background:LightPink;}",
+            "  .d5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    /* modify the code below this line */",
+            "    ",
+            "    grid-template-columns: auto 50px 10% 2fr 1fr;",
+            "    ",
+            "    /* modify the code above this line */",
+            "    grid-template-rows: 50px 50px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"d1\">1</div>",
+            "  <div class=\"d2\">2</div>",
+            "  <div class=\"d3\">3</div>",
+            "  <div class=\"d4\">4</div>",
+            "  <div class=\"d5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9036ee38fddaf9a66b5d35",
       "title": "Create a Column Gap Using grid-column-gap",
       "description": [
-      "So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the <code>grid-column-gap</code> property like this:",
-      "<blockquote>grid-column-gap: 10px;</blockquote>",
-      "This creates 10px of empty space between all of our columns.",
-      "<hr>",
-      "Give the columns in the grid a <code>20px</code> gap."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .d1{background:LightSkyBlue;}",
-      "  .d2{background:LightSalmon;}",
-      "  .d3{background:PaleTurquoise;}",
-      "  .d4{background:LightPink;}",
-      "  .d5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"d1\">1</div>",
-      "  <div class=\"d2\">2</div>",
-      "  <div class=\"d3\">3</div>",
-      "  <div class=\"d4\">4</div>",
-      "  <div class=\"d5\">5</div>",
-      "</div>"
+        "So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the <code>grid-column-gap</code> property like this:",
+        "<blockquote>grid-column-gap: 10px;</blockquote>",
+        "This creates 10px of empty space between all of our columns.",
+        "<hr>",
+        "Give the columns in the grid a <code>20px</code> gap."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .d1{background:LightSkyBlue;}",
+            "  .d2{background:LightSalmon;}",
+            "  .d3{background:PaleTurquoise;}",
+            "  .d4{background:LightPink;}",
+            "  .d5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"d1\">1</div>",
+            "  <div class=\"d2\">2</div>",
+            "  <div class=\"d3\">3</div>",
+            "  <div class=\"d4\">4</div>",
+            "  <div class=\"d5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9036ee38fddaf9a66b5d36",
       "title": "Create a Row Gap using grid-row-gap",
       "description": [
-      "You can add a gap in between the rows of a grid using <code>grid-row-gap</code> in the same way that you added a gap in between columns in the previous challenge.",
-      "<hr>",
-      "Create a gap for the rows that is <code>5px</code> tall."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .d1{background:LightSkyBlue;}",
-      "  .d2{background:LightSalmon;}",
-      "  .d3{background:PaleTurquoise;}",
-      "  .d4{background:LightPink;}",
-      "  .d5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"d1\">1</div>",
-      "  <div class=\"d2\">2</div>",
-      "  <div class=\"d3\">3</div>",
-      "  <div class=\"d4\">4</div>",
-      "  <div class=\"d5\">5</div>",
-      "</div>"
+        "You can add a gap in between the rows of a grid using <code>grid-row-gap</code> in the same way that you added a gap in between columns in the previous challenge.",
+        "<hr>",
+        "Create a gap for the rows that is <code>5px</code> tall."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .d1{background:LightSkyBlue;}",
+            "  .d2{background:LightSalmon;}",
+            "  .d3{background:PaleTurquoise;}",
+            "  .d4{background:LightPink;}",
+            "  .d5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"d1\">1</div>",
+            "  <div class=\"d2\">2</div>",
+            "  <div class=\"d3\">3</div>",
+            "  <div class=\"d4\">4</div>",
+            "  <div class=\"d5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a9036ee38fddaf9a66b5d37",
       "title": "Add Gaps Faster with grid-gap",
       "description": [
-      "<code>grid-gap</code> is a shorthand property for <code>grid-row-gap</code> and <code>grid-column-gap</code> from the previous two challenges that's more convenient to use. If <code>grid-gap</code> has one value, it will a create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.",
-      "<hr>",
-      "Use <code>grid-gap</code> to introduce a <code>10px</code> gap between the rows and <code>20px</code> gap between the columns."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .d1{background:LightSkyBlue;}",
-      "  .d2{background:LightSalmon;}",
-      "  .d3{background:PaleTurquoise;}",
-      "  .d4{background:LightPink;}",
-      "  .d5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "<div class=\"container\">",
-      "  <div class=\"d1\">1</div>",
-      "  <div class=\"d2\">2</div>",
-      "  <div class=\"d3\">3</div>",
-      "  <div class=\"d4\">4</div>",
-      "  <div class=\"d5\">5</div>",
-      "</div>"
+        "<code>grid-gap</code> is a shorthand property for <code>grid-row-gap</code> and <code>grid-column-gap</code> from the previous two challenges that's more convenient to use. If <code>grid-gap</code> has one value, it will a create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.",
+        "<hr>",
+        "Use <code>grid-gap</code> to introduce a <code>10px</code> gap between the rows and <code>20px</code> gap between the columns."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .d1{background:LightSkyBlue;}",
+            "  .d2{background:LightSalmon;}",
+            "  .d3{background:PaleTurquoise;}",
+            "  .d4{background:LightPink;}",
+            "  .d5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "<div class=\"container\">",
+            "  <div class=\"d1\">1</div>",
+            "  <div class=\"d2\">2</div>",
+            "  <div class=\"d3\">3</div>",
+            "  <div class=\"d4\">4</div>",
+            "  <div class=\"d5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a90372638fddaf9a66b5d38",
       "title": "Use grid-column to Control Spacing",
       "description": [
-      "Up to this point, all the properties that have been discussed are for grid containers. The <code>grid-column</code> property is the first one for use on the grid items themselves.",
-      "The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.",
-      "To control the amount of columns an item will consume, you can use the <code>grid-column</code> property in conjunction with the line numbers you want the item to start and stop at.",
-      "Here's an example:",
-      "<blockquote>grid-column: 1 / 3;</blockquote>",
-      "This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.",
-      "<hr>",
-      "Make the item with the class <code>item5</code> consume the last two columns of the grid."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  ",
-      "  .item5 {",
-      "    background: PaleGreen;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "Up to this point, all the properties that have been discussed are for grid containers. The <code>grid-column</code> property is the first one for use on the grid items themselves.",
+        "The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.",
+        "To control the amount of columns an item will consume, you can use the <code>grid-column</code> property in conjunction with the line numbers you want the item to start and stop at.",
+        "Here's an example:",
+        "<blockquote>grid-column: 1 / 3;</blockquote>",
+        "This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.",
+        "<hr>",
+        "Make the item with the class <code>item5</code> consume the last two columns of the grid."
       ],
       "tests": [
-      "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'message: <code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
+        {
+          "text": "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.'",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  ",
+            "  .item5 {",
+            "    background: PaleGreen;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a90373638fddaf9a66b5d39",
       "title": "Use grid-row to Control Spacing",
       "description": [
-      "Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the <code>grid-row</code> property on a grid item.",
-      "<hr>",
-      "Make the element with the <code>item5</code> class consume the last two rows."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  ",
-      "  .item5 {",
-      "    background: PaleGreen;",
-      "    grid-column: 2 / 4;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the <code>grid-row</code> property on a grid item.",
+        "<hr>",
+        "Make the element with the <code>item5</code> class consume the last two rows."
       ],
       "tests": [
-      "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'message: <code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
+        {
+          "text": "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.'",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  ",
+            "  .item5 {",
+            "    background: PaleGreen;",
+            "    grid-column: 2 / 4;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a90374338fddaf9a66b5d3a",
       "title": "Align an Item Horizontally using justify-self",
       "description": [
-      "In CSS Grid, the content of each item is located in a box which is referred to as a <dfn>cell</dfn>. You can align the content's position within its cell horizontally using the <code>justify-self</code> property on a grid item. By default, this property has a value of <code>stetch</code>, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:",
-      "<code>start</code>: aligns the content at the left of the cell,",
-      "<code>center</code>: aligns the content in the center of the cell,",
-      "<code>end</code>: aligns the content at the right of the cell.",
-      "<hr>",
-      "Use the <code>justify-self</code> property to center the item with the class <code>item2</code>."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background: LightSkyBlue;}",
-      "  ",
-      "  .item2 {",
-      "    background: LightSalmon;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "  ",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "In CSS Grid, the content of each item is located in a box which is referred to as a <dfn>cell</dfn>. You can align the content's position within its cell horizontally using the <code>justify-self</code> property on a grid item. By default, this property has a value of <code>stetch</code>, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:",
+        "<code>start</code>: aligns the content at the left of the cell,",
+        "<code>center</code>: aligns the content in the center of the cell,",
+        "<code>end</code>: aligns the content at the right of the cell.",
+        "<hr>",
+        "Use the <code>justify-self</code> property to center the item with the class <code>item2</code>."
       ],
       "tests": [
-      "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'message: <code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
+        {
+          "text": "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.'",
+          "testString": "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background: LightSkyBlue;}",
+            "  ",
+            "  .item2 {",
+            "    background: LightSalmon;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "  ",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a90375238fddaf9a66b5d3b",
       "title": "Align an Item Vertically using align-self",
       "description": [
-      "Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the <code>align-self</code> property on an item. This property accepts all of the same values as <code>justify-self</code> from the last challenge.",
-      "<hr>",
-      "Align the item with the class <code>item3</code> vertically at the <code>end</code>."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  ",
-      "  .item3 {",
-      "    background: PaleTurquoise;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "  ",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the <code>align-self</code> property on an item. This property accepts all of the same values as <code>justify-self</code> from the last challenge.",
+        "<hr>",
+        "Align the item with the class <code>item3</code> vertically at the <code>end</code>."
       ],
       "tests": [
-      "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'message: <code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
+        {
+          "text": "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.'",
+          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  ",
+            "  .item3 {",
+            "    background: PaleTurquoise;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "  ",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a90376038fddaf9a66b5d3c",
       "title": "Align All Items Horizontally using justify-items",
       "description": [
-      "Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using <code>justify-items</code> on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move <b>all</b> the items in our grid to the desired alignment.",
-      "<hr>",
-      "Use this property to center all our items horizontally."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using <code>justify-items</code> on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move <b>all</b> the items in our grid to the desired alignment.",
+        "<hr>",
+        "Use this property to center all our items horizontally."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fdf869fb03452672e45b",
       "title": "Align All Items Vertically using align-items",
       "description": [
-      "Using the <code>align-items</code> property on a grid container will set the vertical alignment for all the items in our grid.",
-      "<hr>",
-      "Use it now to move all the items to the end of each cell."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "Using the <code>align-items</code> property on a grid container will set the vertical alignment for all the items in our grid.",
+        "<hr>",
+        "Use it now to move all the items to the end of each cell."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe0569fb03452672e45c",
       "title": "Divide the Grid Into an Area Template",
       "description": [
-      "You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using <code>grid-template-areas</code> on the container like this:",
-      "<blockquote>grid-template-areas:<br>\"header header header\"<br>\"advert content content\"<br>\"footer footer footer\";</blockquote>",
-      "The code above merges the top three cells together into an area named <code>header</code>, the bottom three cells into a <code>footer</code> area, and it makes two areas in the middle row; <code>advert</code> and <code>content</code>.",
-      "<strong>Note</strong><br>Every word in the code represents a cell and every pair of quotation marks represent a row.",
-      "In addition to custom labels, you can use a period (<code>.</code>) to designate an empty cell in the grid.",
-      "<hr>",
-      "Place the area template so that the cell labeled <code>advert</code> becomes an empty cell."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "    /* change code below this line */",
-      "    ",
-      "    grid-template-areas:",
-      "      \"header header header\"",
-      "      \"advert content content\"",
-      "      \"footer footer footer\";",
-      "    /* change code above this line */",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using <code>grid-template-areas</code> on the container like this:",
+        "<blockquote>grid-template-areas:<br>\"header header header\"<br>\"advert content content\"<br>\"footer footer footer\";</blockquote>",
+        "The code above merges the top three cells together into an area named <code>header</code>, the bottom three cells into a <code>footer</code> area, and it makes two areas in the middle row; <code>advert</code> and <code>content</code>.",
+        "<strong>Note</strong><br>Every word in the code represents a cell and every pair of quotation marks represent a row.",
+        "In addition to custom labels, you can use a period (<code>.</code>) to designate an empty cell in the grid.",
+        "<hr>",
+        "Place the area template so that the cell labeled <code>advert</code> becomes an empty cell."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "    /* change code below this line */",
+            "    ",
+            "    grid-template-areas:",
+            "      \"header header header\"",
+            "      \"advert content content\"",
+            "      \"footer footer footer\";",
+            "    /* change code above this line */",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe1369fb03452672e45d",
       "title": "Place Items in Grid Areas Using the grid-area Property",
       "description": [
-      "After creating an areas template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the <code>grid-area</code> property on an item like this:",
-      "<blockquote>.item1 { grid-area: header; }</blockquote>",
-      "This lets the grid know that you want the <code>item1</code> class to go in the area named <code>header</code>. In this case, the item will use the entire top row because that whole row is named as the header area.",
-      "<hr>",
-      "Place an element with the <code>item5</code> class in the <code>footer</code> area using the <code>grid-area</code> property."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  ",
-      "  .item5 {",
-      "    background: PaleGreen;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "    grid-template-areas: ",
-      "      \"header header header\"",
-      "      \"advert content content\"",
-      "      \"footer footer footer\";",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "After creating an areas template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the <code>grid-area</code> property on an item like this:",
+        "<blockquote>.item1 { grid-area: header; }</blockquote>",
+        "This lets the grid know that you want the <code>item1</code> class to go in the area named <code>header</code>. In this case, the item will use the entire top row because that whole row is named as the header area.",
+        "<hr>",
+        "Place an element with the <code>item5</code> class in the <code>footer</code> area using the <code>grid-area</code> property."
       ],
       "tests": [
-      "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), 'message: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
+        {
+          "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.'",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  ",
+            "  .item5 {",
+            "    background: PaleGreen;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "    grid-template-areas: ",
+            "      \"header header header\"",
+            "      \"advert content content\"",
+            "      \"footer footer footer\";",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe2669fb03452672e45e",
       "title": "Use grid-area Without Creating an Areas Template",
       "description": [
-      "The <code>grid-area</code> property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:",
-      "<blockquote>item1 { grid-area: 1/1/2/4; }</blockquote>",
-      "This is using the line numbers you learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:",
-      "<blockquote>grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;</blockquote>",
-      "So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.",
-      "<hr>",
-      "Using the <code>grid-area</code> property, place the element with <code>item5</code> class between the third and fourth horizontal lines and between the first and fourth vertical lines."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  ",
-      "  .item5 {",
-      "    background: PaleGreen;",
-      "    /* add your code below this line */",
-      "    ",
-      "    ",
-      "    /* add your code above this line */",
-      "  }",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "The <code>grid-area</code> property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:",
+        "<blockquote>item1 { grid-area: 1/1/2/4; }</blockquote>",
+        "This is using the line numbers you learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:",
+        "<blockquote>grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;</blockquote>",
+        "So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.",
+        "<hr>",
+        "Using the <code>grid-area</code> property, place the element with <code>item5</code> class between the third and fourth horizontal lines and between the first and fourth vertical lines."
       ],
       "tests": [
-      "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'message: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
+        {
+          "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.'",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  ",
+            "  .item5 {",
+            "    background: PaleGreen;",
+            "    /* add your code below this line */",
+            "    ",
+            "    ",
+            "    /* add your code above this line */",
+            "  }",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe3669fb03452672e45f",
       "title": "Reduce Repetition Using the repeat Function",
       "description": [
-      "When you used <code>grid-template-columns</code> and <code>grid-template-rows</code> to define the structure of a grid, you entered a value for each row or column you created.",
-      "Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the <code>repeat</code> function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.",
-      "Here's an example that would create the 100 row grid, each row at 50px tall.",
-      "<blockquote>grid-template-rows: repeat(100, 50px);</blockquote>",
-      "You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure. Here's what I mean:",
-      "<blockquote>grid-template-columns: repeat(2, 1fr 50px) 20px;</blockquote>",
-      "This translates to:",
-      "<blockquote>grid-template-columns: 1fr 50px 1fr 50px 20px;</blockquote>",
-      "<strong>Note</strong><br><code>1fr 50px</code> is repeated twice followed by 20px.",
-      "<hr>",
-      "Use <code>repeat</code> to remove repetition from the <code>grid-template-columns</code> property."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    /* change the code below this line */",
-      "    ",
-      "    grid-template-columns: 1fr 1fr 1fr;",
-      "    ",
-      "    /* change the code above this line */",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "When you used <code>grid-template-columns</code> and <code>grid-template-rows</code> to define the structure of a grid, you entered a value for each row or column you created.",
+        "Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the <code>repeat</code> function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.",
+        "Here's an example that would create the 100 row grid, each row at 50px tall.",
+        "<blockquote>grid-template-rows: repeat(100, 50px);</blockquote>",
+        "You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure. Here's what I mean:",
+        "<blockquote>grid-template-columns: repeat(2, 1fr 50px) 20px;</blockquote>",
+        "This translates to:",
+        "<blockquote>grid-template-columns: 1fr 50px 1fr 50px 20px;</blockquote>",
+        "<strong>Note</strong><br><code>1fr 50px</code> is repeated twice followed by 20px.",
+        "<hr>",
+        "Use <code>repeat</code> to remove repetition from the <code>grid-template-columns</code> property."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?, '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    /* change the code below this line */",
+            "    ",
+            "    grid-template-columns: 1fr 1fr 1fr;",
+            "    ",
+            "    /* change the code above this line */",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe4469fb03452672e460",
       "title": "Limit Item Size Using the minmax Function",
       "description": [
-      "There's another built-in function to use with <code>grid-template-columns</code> and <code>grid-template-rows</code> called <code>minmax</code>. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:",
-      "<blockquote>grid-template-columns: 100px minmax(50px, 200px);</blockquote>",
-      "In the code above, <code>grid-template-columns</code> is set to create three columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.",
-      "<hr>",
-      "Using the <code>minmax</code> function, replace the <code>1fr</code> in the <code>repeat</code> function with a column size that has the minimum width of <code>90px</code> and the maximum width of <code>1fr</code>, and resize the preview panel to see the effect."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    /* change the code below this line */",
-      "    ",
-      "    grid-template-columns: repeat(3, 1fr);",
-      "    ",
-      "    /* change the code above this line */",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "There's another built-in function to use with <code>grid-template-columns</code> and <code>grid-template-rows</code> called <code>minmax</code>. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:",
+        "<blockquote>grid-template-columns: 100px minmax(50px, 200px);</blockquote>",
+        "In the code above, <code>grid-template-columns</code> is set to create three columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.",
+        "<hr>",
+        "Using the <code>minmax</code> function, replace the <code>1fr</code> in the <code>repeat</code> function with a column size that has the minimum width of <code>90px</code> and the maximum width of <code>1fr</code>, and resize the preview panel to see the effect."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?, '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    /* change the code below this line */",
+            "    ",
+            "    grid-template-columns: repeat(3, 1fr);",
+            "    ",
+            "    /* change the code above this line */",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe5469fb03452672e461",
       "title": "Create Flexible Layouts Using auto-fill",
       "description": [
-      "The repeat function comes with a option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining <code>auto-fill</code> with <code>minmax</code>.",
-      "In the preview, <code>grid-template-columns</code> is set to",
-      "<blockquote>repeat(auto-fill, minmax(60px, 1fr));</blockquote>",
-      "When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.",
-      "<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new one.",
-      "<hr>",
-      "In the first grid, use <code>auto-fill</code> with <code>repeat</code> to fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>. Then resize the preview to see auto-fill in action."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 100px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    /* change the code below this line */",
-      "    ",
-      "    grid-template-columns: repeat(3, minmax(60px, 1fr));",
-      "    ",
-      "    /* change the code above this line */",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "  ",
-      "  .container2 {",
-      "    font-size: 40px;",
-      "    min-height: 100px;",
-      "    width: 100%;",
-      "    background: Silver;",
-      "    display: grid;",
-      "    grid-template-columns: repeat(3, minmax(60px, 1fr));",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>",
-      "<div class=\"container2\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "The repeat function comes with a option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining <code>auto-fill</code> with <code>minmax</code>.",
+        "In the preview, <code>grid-template-columns</code> is set to",
+        "<blockquote>repeat(auto-fill, minmax(60px, 1fr));</blockquote>",
+        "When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.",
+        "<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new one.",
+        "<hr>",
+        "In the first grid, use <code>auto-fill</code> with <code>repeat</code> to fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>. Then resize the preview to see auto-fill in action."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: <code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
+        {
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?, '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 100px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    /* change the code below this line */",
+            "    ",
+            "    grid-template-columns: repeat(3, minmax(60px, 1fr));",
+            "    ",
+            "    /* change the code above this line */",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "  ",
+            "  .container2 {",
+            "    font-size: 40px;",
+            "    min-height: 100px;",
+            "    width: 100%;",
+            "    background: Silver;",
+            "    display: grid;",
+            "    grid-template-columns: repeat(3, minmax(60px, 1fr));",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>",
+            "<div class=\"container2\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe6269fb03452672e462",
       "title": "Create Flexible Layouts Using auto-fit",
       "description": [
-      "<code>auto-fit</code> works almost identical to <code>auto-fill</code>. The only difference is that when the container's size exceeds the size of all the items combined, <code>auto-fill</code> keeps inserting empty rows or columns and pushes your items to the side, while <code>auto-fit</code> collapses those empty rows or columns and stretches your items to fit the size of the container.",
-      "<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new one.",
-      "<hr>",
-      "In the second grid, use <code>auto-fit</code> with <code>repeat</code> to fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>. Then resize the preview to see the difference."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1{background:LightSkyBlue;}",
-      "  .item2{background:LightSalmon;}",
-      "  .item3{background:PaleTurquoise;}",
-      "  .item4{background:LightPink;}",
-      "  .item5{background:PaleGreen;}",
-      "  ",
-      "  .container {",
-      "    font-size: 40px;",
-      "    min-height: 100px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "  ",
-      "  .container2 {",
-      "    font-size: 40px;",
-      "    min-height: 100px;",
-      "    width: 100%;",
-      "    background: Silver;",
-      "    display: grid;",
-      "    /* change the code below this line */",
-      "    ",
-      "    grid-template-columns: repeat(3, minmax(60px, 1fr));",
-      "    ",
-      "    /* change the code above this line */",
-      "    grid-template-rows: 1fr 1fr 1fr;",
-      "    grid-gap: 10px;",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>",
-      "<div class=\"container2\">",
-      "  <div class=\"item1\">1</div>",
-      "  <div class=\"item2\">2</div>",
-      "  <div class=\"item3\">3</div>",
-      "  <div class=\"item4\">4</div>",
-      "  <div class=\"item5\">5</div>",
-      "</div>"
+        "<code>auto-fit</code> works almost identical to <code>auto-fill</code>. The only difference is that when the container's size exceeds the size of all the items combined, <code>auto-fill</code> keeps inserting empty rows or columns and pushes your items to the side, while <code>auto-fit</code> collapses those empty rows or columns and stretches your items to fit the size of the container.",
+        "<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new one.",
+        "<hr>",
+        "In the second grid, use <code>auto-fit</code> with <code>repeat</code> to fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>. Then resize the preview to see the difference."
       ],
       "tests": [
-      "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: <code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
+        {
+          "text": "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.'",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?, '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1{background:LightSkyBlue;}",
+            "  .item2{background:LightSalmon;}",
+            "  .item3{background:PaleTurquoise;}",
+            "  .item4{background:LightPink;}",
+            "  .item5{background:PaleGreen;}",
+            "  ",
+            "  .container {",
+            "    font-size: 40px;",
+            "    min-height: 100px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "  ",
+            "  .container2 {",
+            "    font-size: 40px;",
+            "    min-height: 100px;",
+            "    width: 100%;",
+            "    background: Silver;",
+            "    display: grid;",
+            "    /* change the code below this line */",
+            "    ",
+            "    grid-template-columns: repeat(3, minmax(60px, 1fr));",
+            "    ",
+            "    /* change the code above this line */",
+            "    grid-template-rows: 1fr 1fr 1fr;",
+            "    grid-gap: 10px;",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>",
+            "<div class=\"container2\">",
+            "  <div class=\"item1\">1</div>",
+            "  <div class=\"item2\">2</div>",
+            "  <div class=\"item3\">3</div>",
+            "  <div class=\"item4\">4</div>",
+            "  <div class=\"item5\">5</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe7769fb03452672e463",
       "title": "Use Media Queries to Create Responsive Layouts",
       "description": [
-      "CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.",
-      "In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.",
-      "<hr>",
-      "When the viewport width is <code>400px</code> or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1 {",
-      "    background: LightSkyBlue;",
-      "    grid-area: header;",
-      "  }",
-      "  ",
-      "  .item2 {",
-      "    background: LightSalmon;",
-      "    grid-area: advert;",
-      "  }",
-      "  ",
-      "  .item3 {",
-      "    background: PaleTurquoise;",
-      "    grid-area: content;",
-      "  }",
-      "  ",
-      "  .item4 {",
-      "    background: lightpink;",
-      "    grid-area: footer;",
-      "  }",
-      "  ",
-      "  .container {",
-      "    font-size: 1.5em;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: 1fr;",
-      "    grid-template-rows: 50px auto 1fr auto;",
-      "    grid-gap: 10px;",
-      "    grid-template-areas:",
-      "      \"header\"",
-      "      \"advert\"",
-      "      \"content\"",
-      "      \"footer\";",
-      "  }",
-      "  ",
-      "  @media (min-width: 300px){",
-      "    .container{",
-      "      grid-template-columns: auto 1fr;",
-      "      grid-template-rows: auto 1fr auto;",
-      "      grid-template-areas:",
-      "        \"advert header\"",
-      "        \"advert content\"",
-      "        \"advert footer\";",
-      "    }",
-      "  }",
-      "  ",
-      "  @media (min-width: 400px){",
-      "    .container{",
-      "      /* change the code below this line */",
-      "    ",
-      "      grid-template-areas:",
-      "        \"advert header\"",
-      "        \"advert content\"",
-      "        \"advert footer\";",
-      "    ",
-      "    /* change the code above this line */",
-      "    }",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">header</div>",
-      "  <div class=\"item2\">advert</div>",
-      "  <div class=\"item3\">content</div>",
-      "  <div class=\"item4\">footer</div>",
-      "</div>"
+        "CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.",
+        "In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.",
+        "<hr>",
+        "When the viewport width is <code>400px</code> or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely."
       ],
       "tests": [
-      "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'message: When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-columns</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
+        {
+          "text": "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-columns</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.'",
+          "testString": "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-columns</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1 {",
+            "    background: LightSkyBlue;",
+            "    grid-area: header;",
+            "  }",
+            "  ",
+            "  .item2 {",
+            "    background: LightSalmon;",
+            "    grid-area: advert;",
+            "  }",
+            "  ",
+            "  .item3 {",
+            "    background: PaleTurquoise;",
+            "    grid-area: content;",
+            "  }",
+            "  ",
+            "  .item4 {",
+            "    background: lightpink;",
+            "    grid-area: footer;",
+            "  }",
+            "  ",
+            "  .container {",
+            "    font-size: 1.5em;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: 1fr;",
+            "    grid-template-rows: 50px auto 1fr auto;",
+            "    grid-gap: 10px;",
+            "    grid-template-areas:",
+            "      \"header\"",
+            "      \"advert\"",
+            "      \"content\"",
+            "      \"footer\";",
+            "  }",
+            "  ",
+            "  @media (min-width: 300px){",
+            "    .container{",
+            "      grid-template-columns: auto 1fr;",
+            "      grid-template-rows: auto 1fr auto;",
+            "      grid-template-areas:",
+            "        \"advert header\"",
+            "        \"advert content\"",
+            "        \"advert footer\";",
+            "    }",
+            "  }",
+            "  ",
+            "  @media (min-width: 400px){",
+            "    .container{",
+            "      /* change the code below this line */",
+            "    ",
+            "      grid-template-areas:",
+            "        \"advert header\"",
+            "        \"advert content\"",
+            "        \"advert footer\";",
+            "    ",
+            "    /* change the code above this line */",
+            "    }",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">header</div>",
+            "  <div class=\"item2\">advert</div>",
+            "  <div class=\"item3\">content</div>",
+            "  <div class=\"item4\">footer</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "5a94fe8569fb03452672e464",
       "title": "Create Grids within Grids",
       "description": [
-      "Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you  have a grid within a grid.",
-      "For example, by setting the <code>display</code> and <code>grid-template-columns</code> properties of the element with the <code>item3</code> class, you create a grid within your grid.",
-      "<hr>",
-      "Turn the element with the <code>item3</code> class into a grid with two columns with a width of <code>auto</code> and <code>1fr</code> using <code>display</code> and <code>grid-template-columns</code>."
-      ],
-      "challengeSeed": [
-      "<style>",
-      "  .item1 {",
-      "    background: LightSkyBlue;",
-      "    grid-area: header;",
-      "  }",
-      "  ",
-      "  .item2 {",
-      "    background: LightSalmon;",
-      "    grid-area: advert;",
-      "  }",
-      "  ",
-      "  .item3 {",
-      "    background: PaleTurquoise;",
-      "    grid-area: content;",
-      "    /* enter your code below this line */",
-      "    ",
-      "    ",
-      "    /* enter your code above this line */",
-      "  }",
-      "  ",
-      "  .item4 {",
-      "    background: lightpink;",
-      "    grid-area: footer;",
-      "  }",
-      "  ",
-      "  .itemOne {",
-      "    background: PaleGreen;",
-      "  }",
-      "  ",
-      "  .itemTwo {",
-      "    background: BlanchedAlmond;",
-      "  }",
-      "  ",
-      "  .container {",
-      "    font-size: 1.5em;",
-      "    min-height: 300px;",
-      "    width: 100%;",
-      "    background: LightGray;",
-      "    display: grid;",
-      "    grid-template-columns: auto 1fr;",
-      "    grid-template-rows: auto 1fr auto;",
-      "    grid-gap: 10px;",
-      "    grid-template-areas:",
-      "      \"advert header\"",
-      "      \"advert content\"",
-      "      \"advert footer\";",
-      "  }",
-      "</style>",
-      "  ",
-      "<div class=\"container\">",
-      "  <div class=\"item1\">header</div>",
-      "  <div class=\"item2\">advert</div>",
-      "  <div class=\"item3\">",
-      "    <div class=\"itemOne\">paragraph1</div>",
-      "    <div class=\"itemTwo\">paragraph2</div>",
-      "  </div>",
-      "  <div class=\"item4\">footer</div>",
-      "</div>"
+        "Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you  have a grid within a grid.",
+        "For example, by setting the <code>display</code> and <code>grid-template-columns</code> properties of the element with the <code>item3</code> class, you create a grid within your grid.",
+        "<hr>",
+        "Turn the element with the <code>item3</code> class into a grid with two columns with a width of <code>auto</code> and <code>1fr</code> using <code>display</code> and <code>grid-template-columns</code>."
       ],
       "tests": [
-      "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), 'message: <code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');",
-      "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'message: <code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
+        {
+          "text": "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.'",
+          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.')"
+        },
+        {
+          "text": "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.'",
+          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.')"
+        }
       ],
       "solutions": [],
       "hints": [],
       "type": "",
       "releasedOn": "",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  .item1 {",
+            "    background: LightSkyBlue;",
+            "    grid-area: header;",
+            "  }",
+            "  ",
+            "  .item2 {",
+            "    background: LightSalmon;",
+            "    grid-area: advert;",
+            "  }",
+            "  ",
+            "  .item3 {",
+            "    background: PaleTurquoise;",
+            "    grid-area: content;",
+            "    /* enter your code below this line */",
+            "    ",
+            "    ",
+            "    /* enter your code above this line */",
+            "  }",
+            "  ",
+            "  .item4 {",
+            "    background: lightpink;",
+            "    grid-area: footer;",
+            "  }",
+            "  ",
+            "  .itemOne {",
+            "    background: PaleGreen;",
+            "  }",
+            "  ",
+            "  .itemTwo {",
+            "    background: BlanchedAlmond;",
+            "  }",
+            "  ",
+            "  .container {",
+            "    font-size: 1.5em;",
+            "    min-height: 300px;",
+            "    width: 100%;",
+            "    background: LightGray;",
+            "    display: grid;",
+            "    grid-template-columns: auto 1fr;",
+            "    grid-template-rows: auto 1fr auto;",
+            "    grid-gap: 10px;",
+            "    grid-template-areas:",
+            "      \"advert header\"",
+            "      \"advert content\"",
+            "      \"advert footer\";",
+            "  }",
+            "</style>",
+            "  ",
+            "<div class=\"container\">",
+            "  <div class=\"item1\">header</div>",
+            "  <div class=\"item2\">advert</div>",
+            "  <div class=\"item3\">",
+            "    <div class=\"itemOne\">paragraph1</div>",
+            "    <div class=\"itemTwo\">paragraph2</div>",
+            "  </div>",
+            "  <div class=\"item4\">footer</div>",
+            "</div>"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
     }
-  ]
-}
+  ],
+  "fileName": "01-responsive-web-design/css-grid.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design-projects.json b/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design-projects.json
index ef34741bba..e4dbf6d61b 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design-projects.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design-projects.json
@@ -4,36 +4,6 @@
   "time": "150 hours",
   "helpRoom": "Help",
   "challenges": [
-    {
-      "id": "587d78af367417b2b2512b02",
-      "title": "Get Set for our Responsive Web Design Projects",
-      "description": [
-        "",
-        "",
-        "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.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "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.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "You can build these project challenges on your local computer or on a web-based code editor like <a href='https://www.codepen.io'>CodePen.io</a>. As long as your projects are publicly accessible online, you can submit their web addresses so you can claim your verified Responsive Web Design certificate.",
-        "https://codepen.io/accounts/signup/user/free"
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "isRequired": false,
-      "challengeType": 7
-    },
     {
       "id": "bd7158d8c442eddfaeb5bd18",
       "title": "Build a Tribute Page",
@@ -45,7 +15,6 @@
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
       "releasedOn": "January 1, 2016",
-      "challengeSeed": [],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
@@ -60,6 +29,16 @@
         "ru": {
           "title": "Создайте страницу посвященную тому что вас вдохновляет"
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -73,12 +52,21 @@
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
       "releasedOn": "January 15, 2017",
-      "challengeSeed": [],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
       "challengeType": 3,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78af367417b2b2512b04",
@@ -91,12 +79,21 @@
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
       "releasedOn": "January 15, 2017",
-      "challengeSeed": [],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
       "challengeType": 3,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "587d78b0367417b2b2512b05",
@@ -109,12 +106,21 @@
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
       "releasedOn": "January 15, 2017",
-      "challengeSeed": [],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
       "challengeType": 3,
-      "translations": {}
+      "translations": {},
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [],
+          "head": "",
+          "tail": ""
+        }
+      }
     },
     {
       "id": "bd7158d8c242eddfaeb5bd13",
@@ -126,7 +132,6 @@
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
-      "challengeSeed": [],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
@@ -141,7 +146,20 @@
         "ru": {
           "title": "Создайте сайт-портфолио"
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [],
+          "head": "",
+          "tail": ""
+        }
       }
     }
-  ]
+  ],
+  "fileName": "01-responsive-web-design/responsive-web-design-projects.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
 }
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design.json b/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design.json
index bff3a787ea..5e20799aee 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/responsive-web-design.json
@@ -4,70 +4,6 @@
   "time": "1 hour",
   "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.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "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.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "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.",
-        "",
-        "@@STEP@@",
-        "",
-        "",
-        "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.",
-        "",
-        "@@STEP@@"
-      ],
-      "releasedOn": "Feb 17, 2017",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {
-        "pt-br": {
-          "title": "Introdução aos Desafios de Web Design Responsivo",
-          "description": [
-            [
-              "",
-              "",
-              "Hoje em dia há muitos dispositivos que podem acessar a web. Eles vão de computadores grandes de mesa até os pequenos celulares. Estes dispositivos tem diferentes tamanhos de tela, resoluções e capacidade de processamento.",
-              ""
-            ],
-            [
-              "",
-              "",
-              "O Web Design Responsivo é uma abordagem para o design the conteúdo para a web que responde às limitações dos diferentes dispositivos. A estrutura das páginas e as regras CSS devem ser flexíveis para acomodar estas diferenças.",
-              ""
-            ],
-            [
-              "",
-              "",
-              "Em geral, foque o design do CSS de sua página em seu público alvo. Se você espera que a maior parte dos seus usuários utilizem seus celulares, use uma abordagem 'mobile-first.' E então adicione regras condicionais para as telas maiores. Se seus usuários utilizam computadores de mesa, foque o design em telas maiores e utilize regras condicionais para tamanhos menores.",
-              ""
-            ],
-            [
-              "",
-              "",
-              "CSS lhe dá as ferramentas para escrever regras de estilo diversas, e então aplicá-las dependendo do dispositivo que estiver acessando a página. Esta seção cobrirá as maneiras básicas de utilizar CSS para o Web Design Responsivo.",
-              ""
-            ]
-          ]
-
-        }
-      }
-    },
     {
       "id": "587d78b0367417b2b2512b08",
       "title": "Create a Media Query",
@@ -82,21 +18,15 @@
         "<hr>",
         "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 less than or equal to 800px."
       ],
-      "challengeSeed": [
-        "<style>",
-        "  p {",
-        "    font-size: 20px;",
-        "  }",
-        "  ",
-        "  /* Add media query below */",
-        "  ",
-        "</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> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');",
-        "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'message: Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
+        {
+          "text": "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.'",
+          "testString": "assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.')"
+        },
+        {
+          "text": "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.'",
+          "testString": "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.')"
+        }
       ],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
@@ -116,6 +46,27 @@
             "Adicione uma media query para que o tag <code>p</code> tenha um <code>font-size</code> de 10px quando a altura do dispositivo for menor ou igual a 800px."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  p {",
+            "    font-size: 20px;",
+            "  }",
+            "  ",
+            "  /* Add media query below */",
+            "  ",
+            "</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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -130,17 +81,19 @@
         "<hr>",
         "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=\"freeCodeCamp 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.');"
+        {
+          "text": "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.'",
+          "testString": "assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.')"
+        },
+        {
+          "text": "Your <code>img</code> tag should have a <code>display</code> set to block.'",
+          "testString": "assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.')"
+        },
+        {
+          "text": "Your <code>img</code> tag should have a <code>height</code> set to auto.'",
+          "testString": "assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.')"
+        }
       ],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
@@ -160,6 +113,22 @@
             "Adicione regras de estilo para a tag <code>img</code> para torná-la responsiva com relação ao tamanho do seu container. Ela deve ser exibida como um elemento de nível block, e deve preencher toda a largura de seu container sem esticar, mantendo as proporções originais."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  ",
+            "</style>",
+            "",
+            "<img src=\"https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg\" alt=\"freeCodeCamp stickers set\">"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -172,16 +141,15 @@
         "<hr>",
         "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=\"freeCodeCamp 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.');"
+        {
+          "text": "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.'",
+          "testString": "assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.')"
+        },
+        {
+          "text": "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.'",
+          "testString": "assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.')"
+        }
       ],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
@@ -199,6 +167,22 @@
             "Configure os valores de <code>width</code> e <code>height</code> da tag <code>img</code> como metade do seu tamanho original. Nesse caso, o valor original de <code>height</code> e o valor original de <code>width</code> são de 200px."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<style>",
+            "  ",
+            "</style>",
+            "",
+            "<img src=\"https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg\" alt=\"freeCodeCamp sticker that says 'Because CamperBot Cares'\">"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     },
     {
@@ -211,17 +195,15 @@
         "<hr>",
         "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.');"
+        {
+          "text": "Your <code>h2</code> tag should have a <code>width</code> of 80vw.'",
+          "testString": "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.')"
+        },
+        {
+          "text": "Your <code>p</code> tag should have a <code>width</code> of 75vmin.'",
+          "testString": "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.')"
+        }
       ],
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
@@ -239,7 +221,27 @@
             "Ajuste o <code>width</code> da tag <code>h2</code> para 80% da largura da janela de exibição e a <code>width</code> do parágrafo para 75% da menor dimensão da janela de exibição."
           ]
         }
+      },
+      "files": {
+        "indexhtml": {
+          "key": "indexhtml",
+          "ext": "html",
+          "name": "index",
+          "contents": [
+            "<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>"
+          ],
+          "head": "",
+          "tail": ""
+        }
       }
     }
-  ]
-}
+  ],
+  "fileName": "01-responsive-web-design/responsive-web-design.json",
+  "superBlock": "responsive-web-design",
+  "superOrder": 1
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json
new file mode 100644
index 0000000000..0972884046
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json
@@ -0,0 +1,1340 @@
+{
+  "name": "Basic Algorithm Scripting",
+  "order": 6,
+  "time": "50 hours",
+  "helpRoom": "HelpJavaScript",
+  "challenges": [
+    {
+      "id": "56533eb9ac21ba0edf2244b3",
+      "title": "Convert Celsius to Fahrenheit",
+      "description": [
+        "The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times <code>9/5</code>, plus <code>32</code>.",
+        "You are given a variable <code>celsius</code> representing a temperature in Celsius. Use the variable <code>fahrenheit</code> already defined and assign it the Fahrenheit temperature equivalent to the given Celsius temperature. Use the algorithm mentioned above to help convert the Celsius temperature to Fahrenheit.",
+        "Don't worry too much about the function and return statements as they will be covered in future challenges. For now, only use operators that you have already learned."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function convertToF(celsius) {\n  let fahrenheit = celsius * 9/5 + 32;\n\n  return fahrenheit;\n}\n\nconvertToF(30);\n"
+      ],
+      "tests": [
+        {
+          "text": "<code>convertToF(0)</code> should return a number'",
+          "testString": "assert(typeof convertToF(0) === 'number', '<code>convertToF(0)</code> should return a number')"
+        },
+        {
+          "text": "<code>convertToF(-30)</code> should return a value of <code>-22</code>'",
+          "testString": "assert(convertToF(-30) === -22, '<code>convertToF(-30)</code> should return a value of <code>-22</code>')"
+        },
+        {
+          "text": "<code>convertToF(-10)</code> should return a value of <code>14</code>'",
+          "testString": "assert(convertToF(-10) === 14, '<code>convertToF(-10)</code> should return a value of <code>14</code>')"
+        },
+        {
+          "text": "<code>convertToF(0)</code> should return a value of <code>32</code>'",
+          "testString": "assert(convertToF(0) === 32, '<code>convertToF(0)</code> should return a value of <code>32</code>')"
+        },
+        {
+          "text": "<code>convertToF(20)</code> should return a value of <code>68</code>'",
+          "testString": "assert(convertToF(20) === 68, '<code>convertToF(20)</code> should return a value of <code>68</code>')"
+        },
+        {
+          "text": "<code>convertToF(30)</code> should return a value of <code>86</code>'",
+          "testString": "assert(convertToF(30) === 86, '<code>convertToF(30)</code> should return a value of <code>86</code>')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "isRequired": true,
+      "translations": {
+        "es": {
+          "title": "Convierte celsius a fahrenheit",
+          "description": [
+            "Para probar tu aprendizaje, crearás una solucion \"desde cero\". Coloca tu código entre las líneas indicadas y este será probado contra multiples casos de prueba.",
+            "El algoritmo para convertir de Celsius a Fahrenheit consiste en multiplicar la temperatura en grados Celsius por 9/5 y al resultado agregarle 32.",
+            "Se te da una variable <code>celsius</code> representando una temperatura en Celsius. Crea una variable <code>fahrenheit</code> y aplica el algoritmo para asignar la correspondiente temperatura en Fahrenheit."
+          ]
+        },
+        "pt-br": {
+          "title": "Converta Celsius para Fahrenheit",
+          "description": [
+            "O algoritmo para converter de Celsius para Fahrenheit é a temperatura em Celsius vezes <code>9/5</code> mais <code>32</code>.",
+            "Você recebe uma variável <code>celsius</code> representando uma temperatura em Celsius. Use a variável <code>fahrenheit</code> já definida e aplique o algoritmo para atribuir a ela a temperatura correspondente em Fahrenheit."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function convertToF(celsius) {",
+            "  let fahrenheit;",
+            "  return fahrenheit;",
+            "}",
+            "",
+            "convertToF(30);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a202eed8fc186c8434cb6d61",
+      "title": "Reverse a String",
+      "description": [
+        "Reverse the provided string.",
+        "You may need to turn the string into an array before you can reverse it.",
+        "Your result must be a string.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>reverseString(\"hello\")</code> should return a string.'",
+          "testString": "assert(typeof reverseString(\"hello\") === \"string\", '<code>reverseString(\"hello\")</code> should return a string.')"
+        },
+        {
+          "text": "<code>reverseString(\"hello\")</code> should become <code>\"olleh\"</code>.'",
+          "testString": "assert(reverseString(\"hello\") === \"olleh\", '<code>reverseString(\"hello\")</code> should become <code>\"olleh\"</code>.')"
+        },
+        {
+          "text": "<code>reverseString(\"Howdy\")</code> should become <code>\"ydwoH\"</code>.'",
+          "testString": "assert(reverseString(\"Howdy\") === \"ydwoH\", '<code>reverseString(\"Howdy\")</code> should become <code>\"ydwoH\"</code>.')"
+        },
+        {
+          "text": "<code>reverseString(\"Greetings from Earth\")</code> should return <code>\"htraE morf sgniteerG\"</code>.'",
+          "testString": "assert(reverseString(\"Greetings from Earth\") === \"htraE morf sgniteerG\", '<code>reverseString(\"Greetings from Earth\")</code> should return <code>\"htraE morf sgniteerG\"</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function reverseString(str) {\n  return str.split('').reverse().join('');\n}\n\nreverseString(\"hello\");\n"
+      ],
+      "MDNlinks": [
+        "Global String Object",
+        "String.prototype.split()",
+        "Array.prototype.reverse()",
+        "Array.prototype.join()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Invierte el texto",
+          "description": [
+            "Invierte la cadena de texto que se te provee",
+            "Puede que necesites convertir la cadena de texto en un arreglo antes de que puedas invertirla",
+            "El resultado debe ser una cadena de texto",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Inverta uma string",
+          "description": [
+            "Inverta a string fornecida.",
+            "Talvez você tenha que transformar a string num array antes de invertê-la.",
+            "Seu resultado deve ser uma string.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function reverseString(str) {",
+            "  return str;",
+            "}",
+            "",
+            "reverseString(\"hello\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a302f7aae1aa3152a5b413bc",
+      "title": "Factorialize a Number",
+      "description": [
+        "Return the factorial of the provided integer.",
+        "If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n.",
+        "Factorials are often represented with the shorthand notation <code>n!</code>",
+        "For example: <code>5! = 1 * 2 * 3 * 4 * 5 = 120</code>",
+        "Only integers greater than or equal to zero will be supplied to the function.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>factorialize(5)</code> should return a number.'",
+          "testString": "assert(typeof factorialize(5) === 'number', '<code>factorialize(5)</code> should return a number.')"
+        },
+        {
+          "text": "<code>factorialize(5)</code> should return 120.'",
+          "testString": "assert(factorialize(5) === 120, '<code>factorialize(5)</code> should return 120.')"
+        },
+        {
+          "text": "<code>factorialize(10)</code> should return 3628800.'",
+          "testString": "assert(factorialize(10) === 3628800, '<code>factorialize(10)</code> should return 3628800.')"
+        },
+        {
+          "text": "<code>factorialize(20)</code> should return 2432902008176640000.'",
+          "testString": "assert(factorialize(20) === 2432902008176640000, '<code>factorialize(20)</code> should return 2432902008176640000.')"
+        },
+        {
+          "text": "<code>factorialize(0)</code> should return 1.'",
+          "testString": "assert(factorialize(0) === 1, '<code>factorialize(0)</code> should return 1.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function factorialize(num) {\n  return num < 1 ? 1 : num * factorialize(num - 1);\n}\n\nfactorialize(5);\n"
+      ],
+      "MDNlinks": [
+        "Arithmetic Operators"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Factoriza un número",
+          "description": [
+            "Crea una función que devuelva el factorial del número entero que se te provee",
+            "El factorial de un número entero positivo n es la multiplicación de todos los enteros positivos menores o iguales a n",
+            "Los factoriales son comúnmente representados con la notación <code>n!</code>",
+            "Por ejemplo: <code>5! = 1 * 2 * 3 * 4 * 5 = 120</code>",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Determine o fatorial de um número",
+          "description": [
+            "Retorne o fatorial do inteiro fornecido.",
+            "Se o inteiro é representado pela letra n, o seu fatorial é o produto de todos os inteiros positivos menores ou iguais a n.",
+            "Por exemplo: <code>5! = 1 * 2 * 3 * 4 * 5 = 120</code>",
+            "Apenas inteiros maiores ou iguais a zero serão fornecidos à função.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function factorialize(num) {",
+            "  return num;",
+            "}",
+            "",
+            "factorialize(5);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a26cbbe9ad8655a977e1ceb5",
+      "title": "Find the Longest Word in a String",
+      "description": [
+        "Return the length of the longest word in the provided sentence.",
+        "Your response should be a number.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>findLongestWordLength(\"The quick brown fox jumped over the lazy dog\")</code> should return a number.'",
+          "testString": "assert(typeof findLongestWordLength(\"The quick brown fox jumped over the lazy dog\") === \"number\", '<code>findLongestWordLength(\"The quick brown fox jumped over the lazy dog\")</code> should return a number.')"
+        },
+        {
+          "text": "<code>findLongestWordLength(\"The quick brown fox jumped over the lazy dog\")</code> should return 6.'",
+          "testString": "assert(findLongestWordLength(\"The quick brown fox jumped over the lazy dog\") === 6, '<code>findLongestWordLength(\"The quick brown fox jumped over the lazy dog\")</code> should return 6.')"
+        },
+        {
+          "text": "<code>findLongestWordLength(\"May the force be with you\")</code> should return 5.'",
+          "testString": "assert(findLongestWordLength(\"May the force be with you\") === 5, '<code>findLongestWordLength(\"May the force be with you\")</code> should return 5.')"
+        },
+        {
+          "text": "<code>findLongestWordLength(\"Google do a barrel roll\")</code> should return 6.'",
+          "testString": "assert(findLongestWordLength(\"Google do a barrel roll\") === 6, '<code>findLongestWordLength(\"Google do a barrel roll\")</code> should return 6.')"
+        },
+        {
+          "text": "<code>findLongestWordLength(\"What is the average airspeed velocity of an unladen swallow\")</code> should return 8.'",
+          "testString": "assert(findLongestWordLength(\"What is the average airspeed velocity of an unladen swallow\") === 8, '<code>findLongestWordLength(\"What is the average airspeed velocity of an unladen swallow\")</code> should return 8.')"
+        },
+        {
+          "text": "<code>findLongestWordLength(\"What if we try a super-long word such as otorhinolaryngology\")</code> should return 19.'",
+          "testString": "assert(findLongestWordLength(\"What if we try a super-long word such as otorhinolaryngology\") === 19, '<code>findLongestWordLength(\"What if we try a super-long word such as otorhinolaryngology\")</code> should return 19.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function findLongestWordLength(str) {\n  return str.split(' ').sort((a, b) => b.length - a.length)[0].length;\n}\n\nfindLongestWordLength(\"The quick brown fox jumped over the lazy dog\");\n"
+      ],
+      "MDNlinks": [
+        "String.prototype.split()",
+        "String.length"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Encuentra la palabra más larga",
+          "description": [
+            "Crea una función que devuelva la longitud de la palabra más larga en una frase dada",
+            "El resultado debe ser un número",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Encontre a palavra mais longa de uma string",
+          "description": [
+            "Retorne o tamanho da palavra mais longa da frase fornecida.",
+            "Sua resposta deve ser um número.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function findLongestWordLength(str) {",
+            "  return str.length;",
+            "}",
+            "",
+            "findLongestWordLength(\"The quick brown fox jumped over the lazy dog\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a789b3483989747d63b0e427",
+      "title": "Return Largest Numbers in Arrays",
+      "description": [
+        "Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.",
+        "Remember, you can iterate through an array with a simple for loop, and access each member with array syntax <code>arr[i]</code>.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.'",
+          "testString": "assert(largestOfFour([[4, '<code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(largestOfFour([[13, '<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>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(largestOfFour([[4, '<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>.')"
+        },
+        {
+          "text": "<code>largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])</code> should return <code>[25, 48, 21, -3]</code>.'",
+          "testString": "assert.deepEqual(largestOfFour([[17, '<code>largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])</code> should return <code>[25, 48, 21, -3]</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function largestOfFour(arr) {\n  return arr.map(subArr => Math.max.apply(null, subArr));\n}\n\nlargestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);\n"
+      ],
+      "MDNlinks": [
+        "Comparison Operators"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Devuelve el mayor entero de cada arreglo",
+          "description": [
+            "Crea una función que devuelva un arreglo que contenga el mayor de los números de cada sub-arreglo que recibe. Para simplificar las cosas, el arreglo que recibirá tendrá exactamente 4 sub-arreglos",
+            "Recuerda que puedes iterar a través de un arreglo con un búcle simple, y acceder a cada miembro utilizando la sintaxis arr[i].",
+            "Si escribes tu propio test con Chai.js, asegúrate de utilizar un operador de igualdad estricto en lugar de un operador de igualdad cuando compares arreglos. ",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Retorne os maiores números de arrays",
+          "description": [
+            "Retorne um array contendo o maior número de cada sub-array fornecido. Para simplificar, o array fornecido conterá exatamente 4 sub-arrays.",
+            "Lembre-se, você pode iterar por um array com um simples <code>for</code> e acessar cada membro do array com a sintaxe <code>arr[i]</code>.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function largestOfFour(arr) {",
+            "  // You can do this!",
+            "  return arr;",
+            "}",
+            "",
+            "largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "acda2fb1324d9b0fa741e6b5",
+      "title": "Confirm the Ending",
+      "description": [
+        "Check if a string (first argument, <code>str</code>) ends with the given target string (second argument, <code>target</code>).",
+        "This challenge <em>can</em> be solved with the <code>.endsWith()</code> method, which was introduced in ES2015. But for the purpose of this challenge, we would like you to use one of the JavaScript substring methods instead.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>confirmEnding(\"Bastian\", \"n\")</code> should return true.'",
+          "testString": "assert(confirmEnding(\"Bastian\", '<code>confirmEnding(\"Bastian\", \"n\")</code> should return true.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"Congratulation\", \"on\")</code> should return true.'",
+          "testString": "assert(confirmEnding(\"Congratulation\", '<code>confirmEnding(\"Congratulation\", \"on\")</code> should return true.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"Connor\", \"n\")</code> should return false.'",
+          "testString": "assert(confirmEnding(\"Connor\", '<code>confirmEnding(\"Connor\", \"n\")</code> should return false.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"Walking on water and developing software from a specification are easy if both are frozen\"&#44; \"specification\"&#41;</code> should return false.'",
+          "testString": "assert(confirmEnding(\"Walking on water and developing software from a specification are easy if both are frozen\", '<code>confirmEnding(\"Walking on water and developing software from a specification are easy if both are frozen\"&#44; \"specification\"&#41;</code> should return false.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"He has to give me a new name\", \"name\")</code> should return true.'",
+          "testString": "assert(confirmEnding(\"He has to give me a new name\", '<code>confirmEnding(\"He has to give me a new name\", \"name\")</code> should return true.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"Open sesame\", \"same\")</code> should return true.'",
+          "testString": "assert(confirmEnding(\"Open sesame\", '<code>confirmEnding(\"Open sesame\", \"same\")</code> should return true.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"Open sesame\", \"pen\")</code> should return false.'",
+          "testString": "assert(confirmEnding(\"Open sesame\", '<code>confirmEnding(\"Open sesame\", \"pen\")</code> should return false.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"Open sesame\", \"game\")</code> should return false.'",
+          "testString": "assert(confirmEnding(\"Open sesame\", '<code>confirmEnding(\"Open sesame\", \"game\")</code> should return false.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing\", \"mountain\")</code> should return false.'",
+          "testString": "assert(confirmEnding(\"If you want to save our world, '<code>confirmEnding(\"If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing\", \"mountain\")</code> should return false.')"
+        },
+        {
+          "text": "<code>confirmEnding(\"Abstraction\", \"action\")</code> should return true.'",
+          "testString": "assert(confirmEnding(\"Abstraction\", '<code>confirmEnding(\"Abstraction\", \"action\")</code> should return true.')"
+        },
+        {
+          "text": "Do not use the built-in method <code>.endsWith()</code> to solve the challenge.'",
+          "testString": "assert(!(/\\.endsWith\\(.*?\\)\\s*?;?/.test(code)) && !(/\\['endsWith'\\]/.test(code)), 'Do not use the built-in method <code>.endsWith()</code> to solve the challenge.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function confirmEnding(str, target) {\n  return str.substring(str.length - target.length) === target;\n}\n\nconfirmEnding(\"Bastian\", \"n\");\n"
+      ],
+      "MDNlinks": [
+        "String.prototype.substr()",
+        "String.prototype.substring()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Confirma la terminación",
+          "description": [
+            "Verifica si una cadena de texto (primer argumento) termina con otra cadena de texto (segundo argumento).",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Confirme o final",
+          "description": [
+            "Verifique se uma string (primeiro argumento, <code>str</code>) termina com a string alvo fornecida (segundo argumento, <code>target</code>).",
+            "Esse desafio <em>pode</em> ser resolvido com o método <code>.endsWith()</code>, que foi introduzido na ES2015. Mas para o propósito desse desafio, nós gostaríamos que, ao invés dele, você usasse algum dos métodos de substring do JavaScript.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function confirmEnding(str, target) {",
+            "  // \"Never give up and good luck will find you.\"",
+            "  // -- Falcor",
+            "  return str;",
+            "}",
+            "",
+            "confirmEnding(\"Bastian\", \"n\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "afcc8d540bea9ea2669306b6",
+      "title": "Repeat a String Repeat a String",
+      "description": [
+        "Repeat a given string <code>str</code> (first argument) for <code>num</code> times (second argument). Return an empty string if <code>num</code> is not a positive number.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>repeatStringNumTimes(\"*\", 3)</code> should return <code>\"***\"</code>.'",
+          "testString": "assert(repeatStringNumTimes(\"*\", '<code>repeatStringNumTimes(\"*\", 3)</code> should return <code>\"***\"</code>.')"
+        },
+        {
+          "text": "<code>repeatStringNumTimes(\"abc\", 3)</code> should return <code>\"abcabcabc\"</code>.'",
+          "testString": "assert(repeatStringNumTimes(\"abc\", '<code>repeatStringNumTimes(\"abc\", 3)</code> should return <code>\"abcabcabc\"</code>.')"
+        },
+        {
+          "text": "<code>repeatStringNumTimes(\"abc\", 4)</code> should return <code>\"abcabcabcabc\"</code>.'",
+          "testString": "assert(repeatStringNumTimes(\"abc\", '<code>repeatStringNumTimes(\"abc\", 4)</code> should return <code>\"abcabcabcabc\"</code>.')"
+        },
+        {
+          "text": "<code>repeatStringNumTimes(\"abc\", 1)</code> should return <code>\"abc\"</code>.'",
+          "testString": "assert(repeatStringNumTimes(\"abc\", '<code>repeatStringNumTimes(\"abc\", 1)</code> should return <code>\"abc\"</code>.')"
+        },
+        {
+          "text": "<code>repeatStringNumTimes(\"*\", 8)</code> should return <code>\"********\"</code>.'",
+          "testString": "assert(repeatStringNumTimes(\"*\", '<code>repeatStringNumTimes(\"*\", 8)</code> should return <code>\"********\"</code>.')"
+        },
+        {
+          "text": "<code>repeatStringNumTimes(\"abc\", -2)</code> should return <code>\"\"</code>.'",
+          "testString": "assert(repeatStringNumTimes(\"abc\", '<code>repeatStringNumTimes(\"abc\", -2)</code> should return <code>\"\"</code>.')"
+        },
+        {
+          "text": "The built-in <code>repeat()</code>-method should not be used'",
+          "testString": "assert(!/\\.repeat/g.test(code), 'The built-in <code>repeat()</code>-method should not be used')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function repeatStringNumTimes(str, num) {\n  if (num < 0) return '';\n  return num === 1 ? str : str + repeatStringNumTimes(str, num-1);\n}\n\nrepeatStringNumTimes(\"abc\", 3);\n"
+      ],
+      "MDNlinks": [
+        "Global String Object"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Repite el Texto Repite el Texto",
+          "description": [
+            "Repite una cadena de texto dada (primer argumento) <code>num</code> veces (segundo argumento). Retorna una cadena de texto vacía si <code>num</code> es un número negativo.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Repita uma string Repita uma string",
+          "description": [
+            "Repita uma string <code>str</code> dada (primeiro argumento) <code>num</code> vezes (segundo argumento). Retorne uma string vazia se <code>num</code> não for um número positivo.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function repeatStringNumTimes(str, num) {",
+            "  // repeat after me",
+            "  return str;",
+            "}",
+            "",
+            "repeatStringNumTimes(\"abc\", 3);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "ac6993d51946422351508a41",
+      "title": "Truncate a String",
+      "description": [
+        "Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a <code>...</code> ending.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>truncateString(\"A-tisket a-tasket A green and yellow basket\", 8)</code> should return \"A-tisket...\".'",
+          "testString": "assert(truncateString(\"A-tisket a-tasket A green and yellow basket\", '<code>truncateString(\"A-tisket a-tasket A green and yellow basket\", 8)</code> should return \"A-tisket...\".')"
+        },
+        {
+          "text": "<code>truncateString(\"Peter Piper picked a peck of pickled peppers\", 11)</code> should return \"Peter Piper...\".'",
+          "testString": "assert(truncateString(\"Peter Piper picked a peck of pickled peppers\", '<code>truncateString(\"Peter Piper picked a peck of pickled peppers\", 11)</code> should return \"Peter Piper...\".')"
+        },
+        {
+          "text": "<code>truncateString(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length)</code> should return \"A-tisket a-tasket A green and yellow basket\".'",
+          "testString": "assert(truncateString(\"A-tisket a-tasket A green and yellow basket\", '<code>truncateString(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length)</code> should return \"A-tisket a-tasket A green and yellow basket\".')"
+        },
+        {
+          "text": "<code>truncateString(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length + 2)</code> should return \"A-tisket a-tasket A green and yellow basket\".'",
+          "testString": "assert(truncateString('A-tisket a-tasket A green and yellow basket', '<code>truncateString(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length + 2)</code> should return \"A-tisket a-tasket A green and yellow basket\".')"
+        },
+        {
+          "text": "<code>truncateString(\"A-\", 1)</code> should return \"A...\".'",
+          "testString": "assert(truncateString(\"A-\", '<code>truncateString(\"A-\", 1)</code> should return \"A...\".')"
+        },
+        {
+          "text": "<code>truncateString(\"Absolutely Longer\", 2)</code> should return \"Ab...\".'",
+          "testString": "assert(truncateString(\"Absolutely Longer\", '<code>truncateString(\"Absolutely Longer\", 2)</code> should return \"Ab...\".')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function truncateString(str, num) {\n  if (num >= str.length) {\n    return str;\n  }\n\n  return str.slice(0, num) + '...';\n}\n\ntruncateString(\"A-tisket a-tasket A green and yellow basket\", 8);\n"
+      ],
+      "MDNlinks": [
+        "String.prototype.slice()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Trunca una Cadena de Texto",
+          "description": [
+            "Trunca una cadena de texto (primer argumento) si su longitud es mayor que un máximo de caracteres dado (segundo argumento). Devuelve la cadena de texto truncada con una terminación \"...\".",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Trunque uma string",
+          "description": [
+            "Trunque uma string (primeiro argumento) se ela for mais longa do que o comprimento máximo dado (segundo argumento). Retorne a string truncada com um <code>...</code> no final.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function truncateString(str, num) {",
+            "  // Clear out that junk in your trunk",
+            "  return str;",
+            "}",
+            "",
+            "truncateString(\"A-tisket a-tasket A green and yellow basket\", 8);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/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."
+      ],
+      "solutions": [
+        "function findElement(arr, func) {\n  let num;\n\n  arr.some(e => {\n    if (func(e)) {\n      num = e;\n      return true;\n    }\n  });\n\n  return num;\n}\n\nfindElement([1, 2, 3, 4], num => num % 2 === 0);\n"
+      ],
+      "tests": [
+        {
+          "text": "<code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.'",
+          "testString": "assert.strictEqual(findElement([1, '<code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.')"
+        },
+        {
+          "text": "<code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.'",
+          "testString": "assert.strictEqual(findElement([1, '<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.org/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": "Achado não é roubado",
+          "description": [
+            "Crie uma função que itera sobre um array (primeiro argumento) e retorna o primeiro elemento do array que retornar <code>true</code> para uma função de teste (segundo argumento). Se nenhum elemento passar no teste, retorne <code>undefined</code>.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio 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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function findElement(arr, func) {",
+            "  let num = 0;",
+            "  return num;",
+            "}",
+            "",
+            "findElement([1, 2, 3, 4], num => num % 2 === 0);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/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."
+      ],
+      "solutions": [
+        "function booWho(bool) {\n  return typeof bool === \"boolean\";\n}\n\nbooWho(null);"
+      ],
+      "tests": [
+        {
+          "text": "<code>booWho(true)</code> should return true.'",
+          "testString": "assert.strictEqual(booWho(true), '<code>booWho(true)</code> should return true.')"
+        },
+        {
+          "text": "<code>booWho(false)</code> should return true.'",
+          "testString": "assert.strictEqual(booWho(false), '<code>booWho(false)</code> should return true.')"
+        },
+        {
+          "text": "<code>booWho([1, 2, 3])</code> should return false.'",
+          "testString": "assert.strictEqual(booWho([1, '<code>booWho([1, 2, 3])</code> should return false.')"
+        },
+        {
+          "text": "<code>booWho([].slice)</code> should return false.'",
+          "testString": "assert.strictEqual(booWho([].slice), '<code>booWho([].slice)</code> should return false.')"
+        },
+        {
+          "text": "<code>booWho({ \"a\": 1 })</code> should return false.'",
+          "testString": "assert.strictEqual(booWho({ \"a\": 1 }), '<code>booWho({ \"a\": 1 })</code> should return false.')"
+        },
+        {
+          "text": "<code>booWho(1)</code> should return false.'",
+          "testString": "assert.strictEqual(booWho(1), '<code>booWho(1)</code> should return false.')"
+        },
+        {
+          "text": "<code>booWho(NaN)</code> should return false.'",
+          "testString": "assert.strictEqual(booWho(NaN), '<code>booWho(NaN)</code> should return false.')"
+        },
+        {
+          "text": "<code>booWho(\"a\")</code> should return false.'",
+          "testString": "assert.strictEqual(booWho(\"a\"), '<code>booWho(\"a\")</code> should return false.')"
+        },
+        {
+          "text": "<code>booWho(\"true\")</code> should return false.'",
+          "testString": "assert.strictEqual(booWho(\"true\"), '<code>booWho(\"true\")</code> should return false.')"
+        },
+        {
+          "text": "<code>booWho(\"false\")</code> should return false.'",
+          "testString": "assert.strictEqual(booWho(\"false\"), '<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.org/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": "Bu!",
+          "description": [
+            "Verifique se um valor é classificado como um primitivo booleano. Retorne <code>true</code> ou <code>false</code>.",
+            "Primitivos booleanos são <code>true</code> e <code>false</code>.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Tente programar em par. Escreva seu próprio 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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function booWho(bool) {",
+            "  // What is the new fad diet for ghost developers? The Boolean.",
+            "  return bool;",
+            "}",
+            "",
+            "booWho(null);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>titleCase(\"I&#39;m a little tea pot\")</code> should return a string.'",
+          "testString": "assert(typeof titleCase(\"I'm a little tea pot\") === \"string\", '<code>titleCase(\"I&#39;m a little tea pot\")</code> should return a string.')"
+        },
+        {
+          "text": "<code>titleCase(\"I&#39;m a little tea pot\")</code> should return <code>I&#39;m A Little Tea Pot</code>.'",
+          "testString": "assert(titleCase(\"I'm a little tea pot\") === \"I'm A Little Tea Pot\", '<code>titleCase(\"I&#39;m a little tea pot\")</code> should return <code>I&#39;m A Little Tea Pot</code>.')"
+        },
+        {
+          "text": "<code>titleCase(\"sHoRt AnD sToUt\")</code> should return <code>Short And Stout</code>.'",
+          "testString": "assert(titleCase(\"sHoRt AnD sToUt\") === \"Short And Stout\", '<code>titleCase(\"sHoRt AnD sToUt\")</code> should return <code>Short And Stout</code>.')"
+        },
+        {
+          "text": "<code>titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\")</code> should return <code>Here Is My Handle Here Is My Spout</code>.'",
+          "testString": "assert(titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\") === \"Here Is My Handle Here Is My Spout\", '<code>titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\")</code> should return <code>Here Is My Handle Here Is My Spout</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function titleCase(str) {\n  return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).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.org/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 Uma String Num Título",
+          "description": [
+            "Retorne a string fornecida com a primeira letra de cada palavra em maiúsculo. Certifique-se de que o resto da palavra esteja minúsculo.",
+            "Para o propósito desse exercício, você também deve deixar maiúscula a primeira letra das palavras de ligação como \"the\" e \"of\".",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function titleCase(str) {",
+            "  return str;",
+            "}",
+            "",
+            "titleCase(\"I'm a little tea pot\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "579e2a2c335b9d72dd32e05c",
+      "title": "Slice and Splice",
+      "description": [
+        "You are given two arrays and an index.",
+        "Use the array methods <code>slice</code> and <code>splice</code> to copy each element of the first array into the second array, in order.",
+        "Begin inserting elements at index <code>n</code> of the second array.",
+        "Return the resulting array. The input arrays should remain the same after the function runs.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>frankenSplice([1, 2, 3], [4, 5], 1)</code> should return <code>[4, 1, 2, 3, 5]</code>.'",
+          "testString": "assert.deepEqual(frankenSplice([1, '<code>frankenSplice([1, 2, 3], [4, 5], 1)</code> should return <code>[4, 1, 2, 3, 5]</code>.')"
+        },
+        {
+          "text": "<code>frankenSplice([1, 2], [\"a\", \"b\"], 1)</code> should return <code>[\"a\", 1, 2, \"b\"]</code>.'",
+          "testString": "assert.deepEqual(frankenSplice(testArr1, '<code>frankenSplice([1, 2], [\"a\", \"b\"], 1)</code> should return <code>[\"a\", 1, 2, \"b\"]</code>.')"
+        },
+        {
+          "text": "<code>frankenSplice([\"claw\", \"tentacle\"], [\"head\", \"shoulders\", \"knees\", \"toes\"], 2)</code> should return <code>[\"head\", \"shoulders\", \"claw\", \"tentacle\", \"knees\", \"toes\"]</code>.'",
+          "testString": "assert.deepEqual(frankenSplice([\"claw\", '<code>frankenSplice([\"claw\", \"tentacle\"], [\"head\", \"shoulders\", \"knees\", \"toes\"], 2)</code> should return <code>[\"head\", \"shoulders\", \"claw\", \"tentacle\", \"knees\", \"toes\"]</code>.')"
+        },
+        {
+          "text": "All elements from the first array should be added to the second array in their original order.'",
+          "testString": "assert.deepEqual(frankenSplice([1, 'All elements from the first array should be added to the second array in their original order.')"
+        },
+        {
+          "text": "The first array should remain the same after the function runs.'",
+          "testString": "assert(testArr1[0] === 1 && testArr1[1] === 2, 'The first array should remain the same after the function runs.')"
+        },
+        {
+          "text": "The second array should remain the same after the function runs.'",
+          "testString": "assert(testArr2[0] === \"a\" && testArr2[1] === \"b\", 'The second array should remain the same after the function runs.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "isBeta": true,
+      "solutions": [
+        "function frankenSplice(arr1, arr2, n) {\n  // It's alive. It's alive!\n  let result = arr2.slice();\n  for (let i = 0; i < arr1.length; i++) {\n    result.splice(n+i, 0, arr1[i]);\n  }\n  return result;\n}\n\nfrankenSplice([1, 2, 3], [4, 5], 1);\n"
+      ],
+      "MDNlinks": [
+        "Array.prototype.slice()",
+        "Array.prototype.splice()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "pt-br": {
+          "title": "Slice e splice",
+          "description": [
+            "Você recebe dois arrays e um índice.",
+            "Use os métodos de array <code>slice</code> e <code>splice</code> para copiar cada elemento do primeiro array para o segundo array, em ordem.",
+            "Comece a inserir elementos no índice <code>n</code> do segundo array.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function frankenSplice(arr1, arr2, n) {",
+            "  // It's alive. It's alive!",
+            "  return arr2;",
+            "}",
+            "",
+            "frankenSplice([1, 2, 3], [4, 5, 6], 1);"
+          ],
+          "head": "",
+          "tail": "let testArr1 = [1, 2];\nlet testArr2 = [\"a\", \"b\"];"
+        }
+      }
+    },
+    {
+      "id": "adf08ec01beb4f99fc7a68f2",
+      "title": "Falsy Bouncer",
+      "description": [
+        "Remove all falsy values from an array.",
+        "Falsy values in JavaScript are <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, and <code>NaN</code>.",
+        "Hint: Try converting each value to a Boolean.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>bouncer([7, \"ate\", \"\", false, 9])</code> should return <code>[7, \"ate\", 9]</code>.'",
+          "testString": "assert.deepEqual(bouncer([7, '<code>bouncer([7, \"ate\", \"\", false, 9])</code> should return <code>[7, \"ate\", 9]</code>.')"
+        },
+        {
+          "text": "<code>bouncer([\"a\", \"b\", \"c\"])</code> should return <code>[\"a\", \"b\", \"c\"]</code>.'",
+          "testString": "assert.deepEqual(bouncer([\"a\", '<code>bouncer([\"a\", \"b\", \"c\"])</code> should return <code>[\"a\", \"b\", \"c\"]</code>.')"
+        },
+        {
+          "text": "<code>bouncer([false, null, 0, NaN, undefined, \"\"])</code> should return <code>[]</code>.'",
+          "testString": "assert.deepEqual(bouncer([false, '<code>bouncer([false, null, 0, NaN, undefined, \"\"])</code> should return <code>[]</code>.')"
+        },
+        {
+          "text": "<code>bouncer([1, null, NaN, 2, undefined])</code> should return <code>[1, 2]</code>.'",
+          "testString": "assert.deepEqual(bouncer([1, '<code>bouncer([1, null, NaN, 2, undefined])</code> should return <code>[1, 2]</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function bouncer(arr) {\n  return arr.filter(e => e);\n}\n\nbouncer([7, \"ate\", \"\", false, 9]);\n"
+      ],
+      "MDNlinks": [
+        "Boolean Objects",
+        "Array.prototype.filter()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Detector de Mentiras",
+          "description": [
+            "Remueve todos los valores falsy de un arreglo dado",
+            "En JavaScript, los valores falsy son los siguientes: <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, y <code>NaN</code>.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Detector de mentiras",
+          "description": [
+            "Remova todos os valores falsos de um array.",
+            "Valores falsos em JavaScript são <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code> e <code>NaN</code>.",
+            "Dica: Tente converter cada valor para um booleano.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function bouncer(arr) {",
+            "  // Don't show a false ID to this bouncer.",
+            "  return arr;",
+            "}",
+            "",
+            "bouncer([7, \"ate\", \"\", false, 9]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a24c1a4622e3c05097f71d67",
+      "title": "Where do I Belong",
+      "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).",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.'",
+          "testString": "assert(getIndexToIns([10, '<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([10, '<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return a number.')"
+        },
+        {
+          "text": "<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.'",
+          "testString": "assert(getIndexToIns([10, '<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([10, '<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return a number.')"
+        },
+        {
+          "text": "<code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.'",
+          "testString": "assert(getIndexToIns([40, '<code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([40, 60], 50)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([40, '<code>getIndexToIns([40, 60], 50)</code> should return a number.')"
+        },
+        {
+          "text": "<code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.'",
+          "testString": "assert(getIndexToIns([3, '<code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([3, 10, 5], 3)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([3, '<code>getIndexToIns([3, 10, 5], 3)</code> should return a number.')"
+        },
+        {
+          "text": "<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.'",
+          "testString": "assert(getIndexToIns([5, '<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([5, '<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return a number.')"
+        },
+        {
+          "text": "<code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.'",
+          "testString": "assert(getIndexToIns([2, '<code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([2, 20, 10], 19)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([2, '<code>getIndexToIns([2, 20, 10], 19)</code> should return a number.')"
+        },
+        {
+          "text": "<code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.'",
+          "testString": "assert(getIndexToIns([2, '<code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([2, 5, 10], 15)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([2, '<code>getIndexToIns([2, 5, 10], 15)</code> should return a number.')"
+        },
+        {
+          "text": "<code>getIndexToIns([], 1)</code> should return <code>0</code>.'",
+          "testString": "assert(getIndexToIns([], '<code>getIndexToIns([], 1)</code> should return <code>0</code>.')"
+        },
+        {
+          "text": "<code>getIndexToIns([], 1)</code> should return a number.'",
+          "testString": "assert(typeof(getIndexToIns([], '<code>getIndexToIns([], 1)</code> should return a number.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function getIndexToIns(arr, num) {\n  arr = arr.sort((a, b) => a - b);\n\n  for (let i = 0; i < arr.length; i++) {\n    if (arr[i] >= num) {\n      return i;\n    }\n  }\n\n  return arr.length;\n}\n\ngetIndexToIns([40, 60], 50);\n"
+      ],
+      "MDNlinks": [
+        "Array.prototype.sort()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "¿Cuál es mi Asiento?",
+          "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).",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Onde é meu lugar?",
+          "description": [
+            "Retorne o menor índice no qual um valor (segundo argumento) deve ser inserido num array (primeiro argumento) depois que ele foi ordenado. 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 <code>1.5</code> é maior 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, depois de ordenado, o array será <code>[3,5,20]</code> e <code>19</code> é menor que <code>20</code> (índice 2) e maior que <code>5</code> (index 1).",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function getIndexToIns(arr, num) {",
+            "  // Find my place in this sorted array.",
+            "  return num;",
+            "}",
+            "",
+            "getIndexToIns([40, 60], 50);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>mutation([\"hello\", \"hey\"])</code> should return false.'",
+          "testString": "assert(mutation([\"hello\", '<code>mutation([\"hello\", \"hey\"])</code> should return false.')"
+        },
+        {
+          "text": "<code>mutation([\"hello\", \"Hello\"])</code> should return true.'",
+          "testString": "assert(mutation([\"hello\", '<code>mutation([\"hello\", \"Hello\"])</code> should return true.')"
+        },
+        {
+          "text": "<code>mutation([\"zyxwvutsrqponmlkjihgfedcba\", \"qrstu\"])</code> should return true.'",
+          "testString": "assert(mutation([\"zyxwvutsrqponmlkjihgfedcba\", '<code>mutation([\"zyxwvutsrqponmlkjihgfedcba\", \"qrstu\"])</code> should return true.')"
+        },
+        {
+          "text": "<code>mutation([\"Mary\", \"Army\"])</code> should return true.'",
+          "testString": "assert(mutation([\"Mary\", '<code>mutation([\"Mary\", \"Army\"])</code> should return true.')"
+        },
+        {
+          "text": "<code>mutation([\"Mary\", \"Aarmy\"])</code> should return true.'",
+          "testString": "assert(mutation([\"Mary\", '<code>mutation([\"Mary\", \"Aarmy\"])</code> should return true.')"
+        },
+        {
+          "text": "<code>mutation([\"Alien\", \"line\"])</code> should return true.'",
+          "testString": "assert(mutation([\"Alien\", '<code>mutation([\"Alien\", \"line\"])</code> should return true.')"
+        },
+        {
+          "text": "<code>mutation([\"floor\", \"for\"])</code> should return true.'",
+          "testString": "assert(mutation([\"floor\", '<code>mutation([\"floor\", \"for\"])</code> should return true.')"
+        },
+        {
+          "text": "<code>mutation([\"hello\", \"neo\"])</code> should return false.'",
+          "testString": "assert(mutation([\"hello\", '<code>mutation([\"hello\", \"neo\"])</code> should return false.')"
+        },
+        {
+          "text": "<code>mutation([\"voodoo\", \"no\"])</code> should return false.'",
+          "testString": "assert(mutation([\"voodoo\", '<code>mutation([\"voodoo\", \"no\"])</code> should return false.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function mutation(arr) {\n  let hash = Object.create(null);\n\n  arr[0].toLowerCase().split('').forEach(c => hash[c] = true);\n\n  return !arr[1].toLowerCase().split('').filter(c => !hash[c]).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.org/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 <code>true</code> se a string no primeiro elemento do array contiver todas as letras da string no segundo elemento do array.",
+            "Por exemplo, para os argumentos <code>[\"hello\", \"Hello\"]</code>, sua função deve retornar <code>true</code>, porque todas as letras da segunda string estão presentes na primeira, ignorando maiúsculas e minúsculas.",
+            "Para os argumentos <code>[\"hello\", \"hey\"]</code>, sua função deve retornar <code>false</code> porque a string \"hello\" não contém um \"y\".",
+            "Finalmente, para <code>[\"Alien\", \"line\"]</code>, sua função deve retornar <code>true</code> porque todas as letras em \"line\" estão presentes em \"Alien\".",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function mutation(arr) {",
+            "  return arr;",
+            "}",
+            "",
+            "mutation([\"hello\", \"hey\"]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a9bd25c716030ec90084d8a1",
+      "title": "Chunky Monkey",
+      "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.",
+        "Remember to use <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.'",
+          "testString": "assert.deepEqual(chunkArrayInGroups([\"a\", '<code>chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.')"
+        },
+        {
+          "text": "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.'",
+          "testString": "assert.deepEqual(chunkArrayInGroups([0, '<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.')"
+        },
+        {
+          "text": "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.'",
+          "testString": "assert.deepEqual(chunkArrayInGroups([0, '<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.')"
+        },
+        {
+          "text": "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.'",
+          "testString": "assert.deepEqual(chunkArrayInGroups([0, '<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.')"
+        },
+        {
+          "text": "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.'",
+          "testString": "assert.deepEqual(chunkArrayInGroups([0, '<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(chunkArrayInGroups([0, '<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>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(chunkArrayInGroups([0, '<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  let out = [];\n\n  for (let i = 0; i < arr.length; i += size) {\n    out.push(arr.slice(i, i + size));\n  }\n\n  return out;\n}\n\nchunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2);\n"
+      ],
+      "MDNlinks": [
+        "Array.prototype.push()",
+        "Array.prototype.slice()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "En mil Pedazos",
+          "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.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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",
+          "description": [
+            "Escreva uma função que divide um array (primeiro argumento) em grupos de comprimento <code>size</code> (segundo argumento) e retorna esses grupos num array bidimensional.",
+            "Lembre-se de <a href=\"http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se ficar travado. Escreva seu próprio código."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function chunkArrayInGroups(arr, size) {",
+            "  // Break it up.",
+            "  return arr;",
+            "}",
+            "",
+            "chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
new file mode 100644
index 0000000000..9f25bfdafd
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
@@ -0,0 +1,1153 @@
+{
+  "name": "Basic Data Structures",
+  "order": 5,
+  "time": "1 hour",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7b7e367417b2b2512b20",
+      "title": "Use an Array to Store a Collection of Data",
+      "description": [
+        "The below is an example of the simplest implementation of an array data structure. This is known as a <dfn>one-dimensional array</dfn>, meaning it only has one level, or that it does not have any other arrays nested within it. Notice it contains <dfn>booleans</dfn>, <dfn>strings</dfn>, and <dfn>numbers</dfn>, among other valid JavaScript data types:",
+        "<blockquote>let simpleArray = ['one', 2, 'three’, true, false, undefined, null];<br>console.log(simpleArray.length);<br>// logs 7</blockquote>",
+        "All array's have a length property, which as shown above, can be very easily accessed with the syntax <code>Array.length</code>.",
+        "A more complex implementation of an array can be seen below. This is known as a <dfn>multi-dimensional array</dfn>, or an array that contains other arrays. Notice that this array also contains JavaScript <dfn>objects</dfn>, which we will examine very closely in our next section, but for now, all you need to know is that arrays are also capable of storing complex objects.",
+        "<blockquote>let complexArray = [<br>  [<br>    {<br>      one: 1,<br>      two: 2<br>    },<br>    {<br>      three: 3,<br>      four: 4<br>    }<br>  ],<br>  [<br>    {<br>      a: \"a\",<br>      b: \"b\"<br>    },<br>    {<br>      c: \"c\",<br>      d: “d”<br>    }<br>  ]<br>];</blockquote>",
+        "<hr>",
+        "We have defined a variable called <code>yourArray</code>. Complete the statement by assigning an array of at least 5 elements in length to the <code>yourArray</code> variable. Your array should contain at least one <dfn>string</dfn>, one <dfn>number</dfn>, and one <dfn>boolean</dfn>."
+      ],
+      "tests": [
+        {
+          "text": "yourArray is an array'",
+          "testString": "assert.strictEqual(Array.isArray(yourArray), 'yourArray is an array')"
+        },
+        {
+          "text": "<code>yourArray</code> is at least 5 elements long'",
+          "testString": "assert.isAtLeast(yourArray.length, '<code>yourArray</code> is at least 5 elements long')"
+        },
+        {
+          "text": "<code>yourArray</code> contains at least one <code>boolean</code>'",
+          "testString": "assert(yourArray.filter( el => typeof el === 'boolean').length >= 1, '<code>yourArray</code> contains at least one <code>boolean</code>')"
+        },
+        {
+          "text": "<code>yourArray</code> contains at least one <code>number</code>'",
+          "testString": "assert(yourArray.filter( el => typeof el === 'number').length >= 1, '<code>yourArray</code> contains at least one <code>number</code>')"
+        },
+        {
+          "text": "<code>yourArray</code> contains at least one <code>string</code>'",
+          "testString": "assert(yourArray.filter( el => typeof el === 'string').length >= 1, '<code>yourArray</code> contains at least one <code>string</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let yourArray; // change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "5a661e0f1068aca922b3ef17",
+      "title": "Access an Array's Contents Using Bracket Notation",
+      "description": [
+        "The fundamental feature of any data structure is, of course, the ability to not only store data, but to be able to retrieve that data on command. So, now that we've learned how to create an array, let's begin to think about how we can access that array's information.",
+        "When we define a simple array as seen below, there are 3 items in it:",
+        "<blockquote>let ourArray = [\"a\", \"b\", \"c\"];</blockquote>",
+        "In an array, each array item has an <dfn>index</dfn>.  This index doubles as the position of that item in the array, and how you reference it. However, it is important to note, that JavaScript arrays are <dfn>zero-indexed</dfn>, meaning that the first element of an array is actually at the <em><strong>zeroth</strong></em> position, not the first.",
+        "In order to retrieve an element from an array we can enclose an index in brackets and append it to the end of an array, or more commonly, to a variable which references an array object. This is known as <dfn>bracket notation</dfn>.",
+        "For example, if we want to retrieve the <code>\"a\"</code> from <code>ourArray</code> and assign it to a variable, we can do so with the following code:",
+        "<blockquote>let ourVariable = ourArray[0];<br>// ourVariable equals \"a\"</blockquote>",
+        "In addition to accessing the value associated with an index, you can also <em>set</em> an index to a value using the same notation:",
+        "<blockquote>ourArray[1] = \"not b anymore\";<br>// ourArray now equals [\"a\", \"not b anymore\", \"c\"];</blockquote>",
+        "Using bracket notation, we have now reset the item at index 1 from <code>\"b\"</code>, to <code>\"not b anymore\"</code>.",
+        "<hr>",
+        "In order to complete this challenge, set the 2nd position (index <code>1</code>) of <code>myArray</code> to anything you want, besides <code>\"b\"</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray[0]</code> is equal to <code>\"a\"</code>'",
+          "testString": "assert.strictEqual(myArray[0], '<code>myArray[0]</code> is equal to <code>\"a\"</code>')"
+        },
+        {
+          "text": "<code>myArray[1]</code> is no longer set to <code>\"b\"</code>'",
+          "testString": "assert.notStrictEqual(myArray[1], '<code>myArray[1]</code> is no longer set to <code>\"b\"</code>')"
+        },
+        {
+          "text": "<code>myArray[2]</code> is equal to <code>\"c\"</code>'",
+          "testString": "assert.strictEqual(myArray[2], '<code>myArray[2]</code> is equal to <code>\"c\"</code>')"
+        },
+        {
+          "text": "<code>myArray[3]</code> is equal to <code>\"d\"</code>'",
+          "testString": "assert.strictEqual(myArray[3], '<code>myArray[3]</code> is equal to <code>\"d\"</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let myArray = [\"a\", \"b\", \"c\", \"d\"];",
+            "// change code below this line",
+            "",
+            "//change code above this line",
+            "console.log(myArray);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 other words, arrays are <dfn>mutable</dfn>. In this challenge, we will look at two methods with which we can programmatically modify an array: <code>Array.push()</code> and <code>Array.unshift()</code>. ",
+        "Both methods take one or more elements as parameters and add those elements to the array the method is being called on; the <code>push()</code> method adds elements to the end of an array, and <code>unshift()</code> adds elements to the beginning. Consider the following:",
+        "<blockquote>let twentyThree = 'XXIII';<br>let romanNumerals = ['XXI', 'XXII'];<br><br>romanNumerals.unshift('XIX', 'XX');<br>// now equals ['XIX', 'XX', 'XXI', 'XXII']<br><br>romanNumerals.push(twentyThree);<br>// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']",
+        "Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.",
+        "<hr>",
+        "We have defined a function, <code>mixedNumbers</code>, which we are passing an array as an argument. Modify the function by using <code>push()</code> and <code>unshift()</code> to add <code>'I', 2, 'three'</code> to the beginning of the array and <code>7, 'VIII', 9</code> to the end so that the returned array contains representations of the numbers 1-9 in order."
+      ],
+      "tests": [
+        {
+          "text": "<code>mixedNumbers([\"IV\", 5, \"six\"])</code> should now return <code>[\"I\", 2, \"three\", \"IV\", 5, \"six\", 7, \"VIII\", 9]</code>'",
+          "testString": "assert.deepEqual(mixedNumbers(['IV', '<code>mixedNumbers([\"IV\", 5, \"six\"])</code> should now return <code>[\"I\", 2, \"three\", \"IV\", 5, \"six\", 7, \"VIII\", 9]</code>')"
+        },
+        {
+          "text": "The <code>mixedNumbers</code> function should utilize the <code>push()</code> method'",
+          "testString": "assert.notStrictEqual(mixedNumbers.toString().search(/\\.push\\(/), 'The <code>mixedNumbers</code> function should utilize the <code>push()</code> method')"
+        },
+        {
+          "text": "The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method'",
+          "testString": "assert.notStrictEqual(mixedNumbers.toString().search(/\\.unshift\\(/), 'The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function mixedNumbers(arr) {",
+            "  // change code below this line",
+            "",
+            "  // change code above this line",
+            "  return arr;",
+            "}",
+            "",
+            "// do not change code below this line",
+            "console.log(mixedNumbers(['IV', 5, 'six']));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d78b2367417b2b2512b0f",
+      "title": "Remove Items from an Array with pop() and shift()",
+      "description": [
+        "Both <code>push()</code> and <code>unshift()</code> have corresponding methods that are nearly functional opposites: <code>pop()</code> and <code>shift()</code>. As you may have guessed by now, instead of adding, <code>pop()</code> <em>removes</em> an element from the end of an array, while <code>shift()</code> removes an element from the beginning. The key difference between <code>pop()</code> and <code>shift()</code> and their cousins <code>push()</code> and <code>unshift()</code>, 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:",
+        "<blockquote>let greetings = ['whats up?', 'hello', 'see ya!'];<br><br>greetings.pop();<br>// now equals ['whats up?', 'hello']<br><br>greetings.shift();<br>// now equals ['hello']</blockquote>",
+        "We can also return the value of the removed element with either method like this:",
+        "<blockquote>let popped = greetings.pop();<br>// returns 'hello'<br>// greetings now equals []</blockquote>",
+        "<hr>",
+        "We have defined a function, <code>popShift</code>, which takes an array as an argument and returns a new array. Modify the function, using <code>pop()</code> and <code>shift()</code>, 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."
+      ],
+      "tests": [
+        {
+          "text": "<code>popShift([\"challenge\", \"is\", \"not\", \"complete\"])</code> should return <code>[\"challenge\", \"complete\"]</code>'",
+          "testString": "assert.deepEqual(popShift(['challenge', '<code>popShift([\"challenge\", \"is\", \"not\", \"complete\"])</code> should return <code>[\"challenge\", \"complete\"]</code>')"
+        },
+        {
+          "text": "The <code>popShift</code> function should utilize the <code>pop()</code> method'",
+          "testString": "assert.notStrictEqual(popShift.toString().search(/\\.pop\\(/), 'The <code>popShift</code> function should utilize the <code>pop()</code> method')"
+        },
+        {
+          "text": "The <code>popShift</code> function should utilize the <code>shift()</code> method'",
+          "testString": "assert.notStrictEqual(popShift.toString().search(/\\.shift\\(/), 'The <code>popShift</code> function should utilize the <code>shift()</code> method')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function popShift(arr) {",
+            "  let popped; // change this line",
+            "  let shifted; // change this line",
+            "  return [shifted, popped];",
+            "}",
+            "",
+            "// do not change code below this line",
+            "console.log(popShift(['challenge', 'is', 'not', 'complete']));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 <code>shift()</code> and <code>pop()</code>, 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 <code>splice()</code> comes in. <code>splice()</code> allows us to do just that: <strong>remove any number of consecutive elements</strong> from anywhere in an array.",
+        "<code>splice()</code> can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of <code>splice()</code> are integers which represent indexes, or positions, of the array that <code>splice()</code> is being called upon. And remember, arrays are <em>zero-indexed</em>, so to indicate the first element of an array, we would use <code>0</code>. <code>splice()</code>'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:",
+        "<blockquote>let array = ['today', 'was', 'not', 'so', 'great'];<br><br>array.splice(2, 2);<br>// remove 2 elements beginning with the 3rd element<br>// array now equals ['today', 'was', 'great']</blockquote>",
+        "<code>splice()</code> not only modifies the array it's being called on, but it also returns a new array containing the value of the removed elements:",
+        "<blockquote>let array = ['I', 'am', 'feeling', 'really', 'happy'];<br><br>let newArray = array.splice(3, 2);<br>// newArray equals ['really', 'happy']</blockquote>",
+        "<hr>",
+        "We've defined a function, <code>sumOfTen</code>, which takes an array as an argument and returns the sum of that array's elements. Modify the function, using <code>splice()</code>, so that it returns a value of <code>10</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>sumOfTen</code> should return 10'",
+          "testString": "assert.strictEqual(sumOfTen([2, '<code>sumOfTen</code> should return 10')"
+        },
+        {
+          "text": "The <code>sumOfTen</code> function should utilize the <code>splice()</code> method'",
+          "testString": "assert.notStrictEqual(sumOfTen.toString().search(/\\.splice\\(/), 'The <code>sumOfTen</code> function should utilize the <code>splice()</code> method')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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",
+            "console.log(sumOfTen([2, 5, 1, 5, 2, 1]));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d78b3367417b2b2512b11",
+      "title": "Add Items Using splice()",
+      "description": [
+        "Remember in the last challenge we mentioned that <code>splice()</code> can take up to three parameters? Well, we can go one step further with <code>splice()</code> &mdash; in addition to removing elements, we can use that third parameter, which represents one or more elements, to <em>add</em> 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:",
+        "<blockquote>function colorChange(arr, index, newColor) {<br>&nbsp;&nbsp;arr.splice(index, 1, newColor);<br>&nbsp;&nbsp;return arr;<br>}<br><br>let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];<br><br>colorScheme = colorChange(colorScheme, 2, '#332327');<br>// we have removed '#bb7e8c' and added '#332327' in its place<br>// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']</blockquote>",
+        "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 <code>splice()</code> to its maximum potential can have.",
+        "<hr>",
+        "We have defined a function, <code>htmlColorNames</code>, which takes an array of HTML colors as an argument. Modify the function using <code>splice()</code> to remove the first two elements of the array and add <code>'DarkSalmon'</code> and <code>'BlanchedAlmond'</code> in their respective places."
+      ],
+      "tests": [
+        {
+          "text": "<code>htmlColorNames</code> should return <code>[\"DarkSalmon\", \"BlanchedAlmond\", \"LavenderBlush\", \"PaleTurqoise\", \"FireBrick\"]</code>'",
+          "testString": "assert.deepEqual(htmlColorNames(['DarkGoldenRod', '<code>htmlColorNames</code> should return <code>[\"DarkSalmon\", \"BlanchedAlmond\", \"LavenderBlush\", \"PaleTurqoise\", \"FireBrick\"]</code>')"
+        },
+        {
+          "text": "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method'",
+          "testString": "assert(/.splice/.test(code), 'The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method')"
+        },
+        {
+          "text": "You should not use <code>shift()</code> or <code>unshift()</code>.'",
+          "testString": "assert(!/shift|unshift/.test(code), 'You should not use <code>shift()</code> or <code>unshift()</code>.')"
+        },
+        {
+          "text": "You should not use array bracket notation.'",
+          "testString": "assert(!/\\[\\d\\]\\s*=/.test(code), 'You should not use array bracket notation.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function htmlColorNames(arr) {",
+            "  // change code below this line",
+            "  ",
+            "  // change code above this line",
+            "  return arr;",
+            "} ",
+            " ",
+            "// do not change code below this line",
+            "console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7a367417b2b2512b12",
+      "title": "Copy Array Items Using slice()",
+      "description": [
+        "The next method we will cover is <code>slice()</code>. <code>slice()</code>, rather than modifying an array, copies, or <em>extracts</em>, a given number of elements to a new array, leaving the array it is called upon untouched. <code>slice()</code> takes only 2 parameters &mdash; 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:",
+        "<blockquote>let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];<br><br>let todaysWeather = weatherConditions.slice(1, 3);<br>// todaysWeather equals ['snow', 'sleet'];<br>// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']<br></blockquote>",
+        "In effect, we have created a new array by extracting elements from an existing array.",
+        "<hr>",
+        "We have defined a function, <code>forecast</code>, that takes an array as an argument. Modify the function using <code>slice()</code> to extract information from the argument array and return a new array that contains the elements <code>'warm'</code> and <code>'sunny'</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>forecast</code> should return <code>[\"warm\", \"sunny\"]'",
+          "testString": "assert.deepEqual(forecast(['cold', '<code>forecast</code> should return <code>[\"warm\", \"sunny\"]')"
+        },
+        {
+          "text": "The <code>forecast</code> function should utilize the <code>slice()</code> method'",
+          "testString": "assert(/\\.slice\\(/.test(code), 'The <code>forecast</code> function should utilize the <code>slice()</code> method')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function forecast(arr) {",
+            "  // change code below this line",
+            "  ",
+            "  return arr;",
+            "}",
+            "",
+            "// do not change code below this line",
+            "console.log(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7b367417b2b2512b13",
+      "title": "Copy an Array with the Spread Operator",
+      "description": [
+        "While <code>slice()</code> allows us to be selective about what elements of an array to copy, among several other useful tasks, ES6's new <dfn>spread operator</dfn> allows us to easily copy <em>all</em> of an array's elements, in order, with a simple and highly readable syntax. The spread syntax simply looks like this: <code>...</code>",
+        "In practice, we can use the spread operator to copy an array like so:",
+        "<blockquote>let thisArray = [true, true, undefined, false, null];<br>let thatArray = [...thisArray];<br>// thatArray equals [true, true, undefined, false, null]<br>// thisArray remains unchanged, and is identical to thatArray</blockquote>",
+        "<hr>",
+        "We have defined a function, <code>copyMachine</code> which takes <code>arr</code> (an array) and <code>num</code> (a number) as arguments. The function is supposed to return a new array made up of <code>num</code> copies of <code>arr</code>. We have done most of the work for you, but it doesn't work quite right yet. Modify the function using spread syntax so that it works correctly (hint: another method we have already covered might come in handy here!)."
+      ],
+      "tests": [
+        {
+          "text": "<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>'",
+          "testString": "assert.deepEqual(copyMachine([true, '<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>')"
+        },
+        {
+          "text": "<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>'",
+          "testString": "assert.deepEqual(copyMachine([1, '<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>')"
+        },
+        {
+          "text": "<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>'",
+          "testString": "assert.deepEqual(copyMachine([true, '<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>')"
+        },
+        {
+          "text": "<code>copyMachine([\"it works\"], 3)</code> should return <code>[[\"it works\"], [\"it works\"], [\"it works\"]]</code>'",
+          "testString": "assert.deepEqual(copyMachine(['it works'], '<code>copyMachine([\"it works\"], 3)</code> should return <code>[[\"it works\"], [\"it works\"], [\"it works\"]]</code>')"
+        },
+        {
+          "text": "The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>'",
+          "testString": "assert.notStrictEqual(copyMachine.toString().indexOf('.concat(_toConsumableArray(arr))'), 'The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function copyMachine(arr, num) {",
+            "  let newArr = [];",
+            "  while (num >= 1) {",
+            "    // change code below this line",
+            "",
+            "    // change code above this line",
+            "    num--;",
+            "  }",
+            "  return newArr;",
+            "}",
+            "",
+            "// change code here to test different cases:",
+            "console.log(copyMachine([true, false, true], 2));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7b367417b2b2512b17",
+      "title": "Combine Arrays with the Spread Operator",
+      "description": [
+        "Another huge advantage of the <dfn>spread</dfn> operator, 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:",
+        "<blockquote>let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];<br><br>let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];<br>// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']</blockquote>",
+        "Using spread syntax, we have just achieved an operation that would have been more more complex and more verbose had we used traditional methods.",
+        "<hr>",
+        "We have defined a function <code>spreadOut</code> that returns the variable <code>sentence</code>, modify the function using the <dfn>spread</dfn> operator so that it returns the array <code>['learning', 'to', 'code', 'is', 'fun']</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>spreadOut</code> should return <code>[\"learning\", \"to\", \"code\", \"is\", \"fun\"]</code>'",
+          "testString": "assert.deepEqual(spreadOut(), '<code>spreadOut</code> should return <code>[\"learning\", \"to\", \"code\", \"is\", \"fun\"]</code>')"
+        },
+        {
+          "text": "The <code>spreadOut</code> function should utilize spread syntax'",
+          "testString": "assert.notStrictEqual(spreadOut.toString().search(/[...]/), 'The <code>spreadOut</code> function should utilize spread syntax')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function spreadOut() {",
+            "  let fragment = ['to', 'code'];",
+            "  let sentence; // change this line",
+            "  return sentence;",
+            "}",
+            "",
+            "// do not change code below this line",
+            "console.log(spreadOut());"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7b367417b2b2512b14",
+      "title": "Check For The Presence of an Element With indexOf()",
+      "description": [
+        "Since arrays can be changed, or <em>mutated</em>, 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, <code>indexOf()</code>, that allows us to quickly and easily check for the presence of an element on an array. <code>indexOf()</code> takes an element as a parameter, and when called, it returns the position, or index, of that element, or <code>-1</code> if the element does not exist on the array.",
+        "For example:",
+        "<blockquote>let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];<br><br>fruits.indexOf('dates') // returns -1<br>fruits.indexOf('oranges') // returns 2<br>fruits.indexOf('pears') // returns 1, the first index at which the element exists</blockquote>",
+        "<hr>",
+        "<code>indexOf()</code> can be incredibly useful for quickly checking for the presence of an element on an array. We have defined a function, <code>quickCheck</code>, that takes an array and an element as arguments. Modify the function using <code>indexOf()</code> so that it returns <code>true</code> if the passed element exists on the array, and <code>false</code> if it does not."
+      ],
+      "tests": [
+        {
+          "text": "<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"mushrooms\")</code> should return <code>false</code>'",
+          "testString": "assert.strictEqual(quickCheck(['squash', '<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"mushrooms\")</code> should return <code>false</code>')"
+        },
+        {
+          "text": "<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"onions\")</code> should return <code>true</code>'",
+          "testString": "assert.strictEqual(quickCheck(['squash', '<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"onions\")</code> should return <code>true</code>')"
+        },
+        {
+          "text": "<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>'",
+          "testString": "assert.strictEqual(quickCheck([3, '<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>')"
+        },
+        {
+          "text": "<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>'",
+          "testString": "assert.strictEqual(quickCheck([true, '<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>')"
+        },
+        {
+          "text": "The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method'",
+          "testString": "assert.notStrictEqual(quickCheck.toString().search(/\\.indexOf\\(/), 'The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function quickCheck(arr, elem) {",
+            "  // change code below this line",
+            "",
+            "  // change code above this line",
+            "}",
+            "",
+            "// change code here to test different cases:",
+            "console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7b367417b2b2512b15",
+      "title": "Iterate Through All an Array's Items Using For Loops",
+      "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 criteria. JavaScript offers several built in methods that each iterate over arrays in slightly different ways to achieve different results (such as <code>every()</code>, <code>forEach()</code>, <code>map()</code>, etc.), however the technique which is most flexible and offers us the greatest amount of control is a simple <code>for</code> loop.",
+        "Consider the following:",
+        "<blockquote>function greaterThanTen(arr) {<br>&nbsp;&nbsp;let newArr = [];<br>&nbsp;&nbsp;for (let i = 0; i < arr.length; i++) {<br>&nbsp;&nbsp;&nbsp;&nbsp;if (arr[i] > 10) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newArr.push(arr[i]);<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;return newArr;<br>}<br><br>greaterThanTen([2, 12, 8, 14, 80, 0, 1]);<br>// returns [12, 14, 80]</blockquote>",
+        "Using a <code>for</code> 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 <code>10</code>, and returned a new array containing those items.",
+        "<hr>",
+        "We have defined a function, <code>filteredArray</code>, which takes <code>arr</code>, a nested array, and <code>elem</code> as arguments, and returns a new array. <code>elem</code> represents an element that may or may not be present on one or more of the arrays nested within <code>arr</code>. Modify the function, using a <code>for</code> loop, to return a filtered version of the passed array such that any array nested within <code>arr</code> containing <code>elem</code> has been removed."
+      ],
+      "tests": [
+        {
+          "text": "<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>'",
+          "testString": "assert.deepEqual(filteredArray([ [10, '<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>')"
+        },
+        {
+          "text": "<code>filteredArray([ [\"trumpets\", 2], [\"flutes\", 4], [\"saxophones\", 2] ], 2)</code> should return <code>[ [\"flutes\", 4] ]</code>'",
+          "testString": "assert.deepEqual(filteredArray([ ['trumpets', '<code>filteredArray([ [\"trumpets\", 2], [\"flutes\", 4], [\"saxophones\", 2] ], 2)</code> should return <code>[ [\"flutes\", 4] ]</code>')"
+        },
+        {
+          "text": "<code>filteredArray([ [\"amy\", \"beth\", \"sam\"], [\"dave\", \"sean\", \"peter\"] ], \"peter\")</code> should return <code>[ [\"amy\", \"beth\", \"sam\"] ]</code>'",
+          "testString": "assert.deepEqual(filteredArray([['amy', '<code>filteredArray([ [\"amy\", \"beth\", \"sam\"], [\"dave\", \"sean\", \"peter\"] ], \"peter\")</code> should return <code>[ [\"amy\", \"beth\", \"sam\"] ]</code>')"
+        },
+        {
+          "text": "<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>'",
+          "testString": "assert.deepEqual(filteredArray([[3, '<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>')"
+        },
+        {
+          "text": "The <code>filteredArray</code> function should utilize a <code>for</code> loop'",
+          "testString": "assert.notStrictEqual(filteredArray.toString().search(/for/), 'The <code>filteredArray</code> function should utilize a <code>for</code> loop')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function filteredArray(arr, elem) {",
+            "  let newArr = [];",
+            "  // change code below this line",
+            "",
+            "  // change code above this line",
+            "  return newArr;",
+            "}",
+            "",
+            "// change code here to test different cases:",
+            "console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7b367417b2b2512b16",
+      "title": "Create complex multi-dimensional arrays",
+      "description": [
+        "Awesome! You have just learned a ton about arrays! This has been a fairly high level overview, and there is plenty more to learn about working with arrays, much of which you will see in later sections. But before moving on to looking at <dfn>Objects</dfn>, lets take one more look, and see how arrays can become a bit more complex than what we have seen in previous challenges.",
+        "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, known as a <dfn>multi-dimensional</dfn>, or nested array. Consider the following example:",
+        "<blockquote>let nestedArray = [ // top, or first level - the outer most array<br>&nbsp;&nbsp;['deep'], // an array within an array, 2 levels of depth<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;['deeper'], ['deeper'] // 2 arrays nested 3 levels deep<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['deepest'], ['deepest'] // 2 arrays nested 4 levels deep<br>&nbsp;&nbsp;&nbsp;&nbsp;],<br>&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['deepest-est?'] // an array nested 5 levels deep<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;]<br>];</blockquote>",
+        "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:",
+        "<blockquote>console.log(nestedArray[2][1][0][0][0]);<br>// logs: deepest-est?</blockquote>",
+        "And now that we know where that piece of data is, we can reset it if we need to:",
+        "<blockquote>nestedArray[2][1][0][0][0] = 'deeper still';<br><br>console.log(nestedArray[2][1][0][0][0]);<br>// now logs: deeper still</blockquote>",
+        "<hr>",
+        "We have defined a variable, <code>myNestedArray</code>, set equal to an array. Modify <code>myNestedArray</code>, using any combination of <dfn>strings</dfn>, <dfn>numbers</dfn>, and <dfn>booleans</dfn> for data elements, so that it has exactly five levels of depth (remember, the outer-most array is level 1). Somewhere on the third level, include the string <code>'deep'</code>, on the fourth level, include the string <code>'deeper'</code>, and on the fifth level, include the string <code>'deepest'</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements'",
+          "testString": "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), '<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements')"
+        },
+        {
+          "text": "<code>myNestedArray</code> should have exactly 5 levels of depth'",
+          "testString": "assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, '<code>myNestedArray</code> should have exactly 5 levels of depth')"
+        },
+        {
+          "text": "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deep\"</code> on an array nested 3 levels deep'",
+          "testString": "assert((function howDeep(array, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deep\"</code> on an array nested 3 levels deep')"
+        },
+        {
+          "text": "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deeper\"</code> on an array nested 4 levels deep'",
+          "testString": "assert((function howDeep(array, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deeper\"</code> on an array nested 4 levels deep')"
+        },
+        {
+          "text": "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deepest\"</code> on an array nested 5 levels deep'",
+          "testString": "assert((function howDeep(array, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deepest\"</code> on an array nested 5 levels deep')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let myNestedArray = [",
+            "  // change code below this line",
+            "  ['unshift', false, 1, 2, 3, 'complex', 'nested'],",
+            "  ['loop', 'shift', 6, 7, 1000, 'method'],",
+            "  ['concat', false, true, 'spread', 'array'],",
+            "  ['mutate', 1327.98, 'splice', 'slice', 'push'],",
+            "  ['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']",
+            "  // change code above this line",
+            "];"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7c367417b2b2512b18",
+      "title": "Add Key-Value Pairs to JavaScript Objects",
+      "description": [
+        "At their most basic, objects are just collections of <dfn>key-value pairs</dfn>, or in other words, pieces of data mapped to unique identifiers that we call <dfn>properties</dfn> or <dfn>keys</dfn>. Let's take a look at a very simple example:",
+        "<blockquote>let FCC_User = {<br>  username: 'awesome_coder',<br>  followers: 572,<br>  points: 1741,<br>  completedProjects: 15<br>};</blockquote>",
+        "The above code defines an object called <code>FCC_User</code> that has four <dfn>properties</dfn>, each of which map to a specific value. If we wanted to know the number of <code>followers</code> <code>FCC_User</code> has, we can access that property by writing:",
+        "<blockquote>let userData = FCC_User.followers;<br>// userData equals 572</blockquote>",
+        "This is called <dfn>dot notation</dfn>. Alternatively, we can also access the property with brackets, like so:",
+        "<blockquote>let userData = FCC_User['followers']<br>// userData equals 572</blockquote>",
+        "Notice that with <dfn>bracket notation</dfn>, we enclosed <code>followers</code> in quotes. This is because the brackets actually allow us to pass a variable in to be evaluated as a property name (hint: keep this in mind for later!). Had we passed <code>followers</code> in without the quotes, the JavaScript engine would have attempted to evaluate it as a variable, and a <code>ReferenceError: followers is not defined</code> would have been thrown.",
+        "<hr>",
+        "Using the same syntax, we can also <em><strong>add new</strong></em> key-value pairs to objects. We've created a <code>foods</code> object with three entries. Add three more entries: <code>bananas</code> with a value of <code>13</code>, <code>grapes</code> with a value of <code>35</code>, and <code>strawberries</code> with a value of <code>27</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>foods</code> is an object'",
+          "testString": "assert(typeof foods === 'object', '<code>foods</code> is an object')"
+        },
+        {
+          "text": "The <code>foods</code> object has a key <code>\"bananas\"</code> with a value of <code>13</code>'",
+          "testString": "assert(foods.bananas === 13, 'The <code>foods</code> object has a key <code>\"bananas\"</code> with a value of <code>13</code>')"
+        },
+        {
+          "text": "The <code>foods</code> object has a key <code>\"grapes\"</code> with a value of <code>35</code>'",
+          "testString": "assert(foods.grapes === 35, 'The <code>foods</code> object has a key <code>\"grapes\"</code> with a value of <code>35</code>')"
+        },
+        {
+          "text": "The <code>foods</code> object has a key <code>\"strawberries\"</code> with a value of <code>27</code>'",
+          "testString": "assert(foods.strawberries === 27, 'The <code>foods</code> object has a key <code>\"strawberries\"</code> with a value of <code>27</code>')"
+        },
+        {
+          "text": "The key-value pairs should be set using dot or bracket notation'",
+          "testString": "assert(code.search(/bananas:/) === -1 && code.search(/grapes:/) === -1 && code.search(/strawberries:/) === -1, 'The key-value pairs should be set using dot or bracket notation')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let foods = {",
+            "  apples: 25,",
+            "  oranges: 32,",
+            "  plums: 28",
+            "};",
+            "",
+            "// change code below this line",
+            "",
+            "// change code above this line",
+            "",
+            "console.log(foods);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7c367417b2b2512b19",
+      "title": "Modify an Object Nested Within an Object",
+      "description": [
+        "Now let's take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth, and their values can be any type of data supported by JavaScript, including arrays and even other objects. Consider the following:",
+        "<blockquote>let nestedObject = {<br>  id: 28802695164,<br>  date: 'December 31, 2016',<br>  data: {<br>    totalUsers: 99,<br>    online: 80,<br>    onlineStatus: {<br>      active: 67,<br>      away: 13<br>    }<br>  }<br>};</blockquote>",
+        "<code>nestedObject</code> has three unique keys: <code>id</code>, whose value is a number, <code>date</code> whose value is a string, and <code>data</code>, whose value is an object which has yet another object nested within it. While structures can quickly become complex, we can still use the same notations to access the information we need.",
+        "<hr>",
+        "Here we've defined an object, <code>userActivity</code>, 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 <code>online</code> key to <code>45</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties'",
+          "testString": "assert('id' in userActivity && 'date' in userActivity && 'data' in userActivity, '<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties')"
+        },
+        {
+          "text": "<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>'",
+          "testString": "assert('totalUsers' in userActivity.data && 'online' in userActivity.data, '<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>')"
+        },
+        {
+          "text": "The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>'",
+          "testString": "assert(userActivity.data.online === 45, 'The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>')"
+        },
+        {
+          "text": "The <code>online</code> property is set using dot or bracket notation'",
+          "testString": "assert.strictEqual(code.search(/online: 45/), 'The <code>online</code> property is set using dot or bracket notation')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let userActivity = {",
+            "  id: 23894201352,",
+            "  date: 'January 1, 2017',",
+            "  data: {",
+            "    totalUsers: 51,",
+            "    online: 42",
+            "  }",
+            "};",
+            "",
+            "// change code below this line",
+            "",
+            "// change code above this line",
+            "",
+            "console.log(userActivity);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7c367417b2b2512b1a",
+      "title": "Access Property Names with Bracket Notation",
+      "description": [
+        "In the first object challenge we mentioned the use of bracket notation as a way to access property values using the evaluation of a variable. For instance, imagine that our <code>foods</code> object is being used in a program for a supermarket cash register. We have some function that sets the <code>selectedFood</code> and we want to check our <code>foods</code> object for the presence of that food. This might look like:",
+        "<blockquote>let selectedFood = getCurrentFood(scannedItem);<br>let inventory = foods[selectedFood];</blockquote>",
+        "This code will evaluate the value stored in the <code>selectedFood</code> variable and return the value of that key in the <code>foods</code> object, or <code>undefined</code> if it is not present. Bracket notation is very useful because sometimes object properties are not known before runtime or we need to access them in a more dynamic way.",
+        "<hr>",
+        "We've defined a function, <code>checkInventory</code>, which receives a scanned item as an argument. Return the current value of the <code>scannedItem</code> key in the <code>foods</code> object. You can assume that only valid keys will be provided as an argument to <code>checkInventory</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>checkInventory</code> is a function'",
+          "testString": "assert.strictEqual(typeof checkInventory, '<code>checkInventory</code> is a function')"
+        },
+        {
+          "text": "The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>'",
+          "testString": "assert.deepEqual(foods, 'The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>')"
+        },
+        {
+          "text": "<code>checkInventory(\"apples\")</code> should return <code>25</code>'",
+          "testString": "assert.strictEqual(checkInventory('apples'), '<code>checkInventory(\"apples\")</code> should return <code>25</code>')"
+        },
+        {
+          "text": "<code>checkInventory(\"bananas\")</code> should return <code>13</code>'",
+          "testString": "assert.strictEqual(checkInventory('bananas'), '<code>checkInventory(\"bananas\")</code> should return <code>13</code>')"
+        },
+        {
+          "text": "<code>checkInventory(\"strawberries\")</code> should return <code>27</code>'",
+          "testString": "assert.strictEqual(checkInventory('strawberries'), '<code>checkInventory(\"strawberries\")</code> should return <code>27</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let foods = {",
+            "  apples: 25,",
+            "  oranges: 32,",
+            "  plums: 28,",
+            "  bananas: 13,",
+            "  grapes: 35,",
+            "  strawberries: 27",
+            "};",
+            "// do not change code above this line",
+            "",
+            "function checkInventory(scannedItem) {",
+            "  // change code below this line",
+            "",
+            "}",
+            "",
+            "// change code below this line to test different cases:",
+            "console.log(checkInventory(\"apples\"));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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, <strong><em>and</em></strong>, they provide very fast lookup time. Throughout 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.",
+        "In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can <em>remove</em> a key-value pair from an object.",
+        "Let's revisit our <code>foods</code> object example one last time. If we wanted to remove the <code>apples</code> key, we can remove it by using the <code>delete</code> keyword like this:",
+        "<blockquote>delete foods.apples;</blockquote>",
+        "<hr>",
+        "Use the delete keyword to remove the <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys from the <code>foods</code> object."
+      ],
+      "tests": [
+        {
+          "text": "The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>'",
+          "testString": "assert(!foods.hasOwnProperty('oranges') && !foods.hasOwnProperty('plums') && !foods.hasOwnProperty('strawberries') && Object.keys(foods).length === 3, 'The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>')"
+        },
+        {
+          "text": "The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>'",
+          "testString": "assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, 'The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let foods = {",
+            "  apples: 25,",
+            "  oranges: 32,",
+            "  plums: 28,",
+            "  bananas: 13,",
+            "  grapes: 35,",
+            "  strawberries: 27",
+            "};",
+            "",
+            "// change code below this line",
+            "",
+            "// change code above this line",
+            "",
+            "console.log(foods);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 us with two different ways to do this. One uses the <code>hasOwnProperty()</code> method and the other uses the <code>in</code> keyword. If we have an object <code>users</code> with a property of <code>Alan</code>, we could check for its presence in either of the following ways:",
+        "<blockquote>users.hasOwnProperty('Alan');<br>'Alan' in users;<br>// both return true</blockquote>",
+        "<hr>",
+        "We've created an object, <code>users</code>, with some users in it and a function <code>isEveryoneHere</code>, which we pass the <code>users</code> object to as an argument. Finish writing this function so that it returns <code>true</code> only if the <code>users</code> object contains all four names, <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>, as keys, and <code>false</code> otherwise."
+      ],
+      "tests": [
+        {
+          "text": "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>'",
+          "testString": "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>')"
+        },
+        {
+          "text": "The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object'",
+          "testString": "assert(isEveryoneHere(users) === true, 'The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object')"
+        },
+        {
+          "text": "The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object'",
+          "testString": "assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, 'The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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",
+            "}",
+            "",
+            "console.log(isEveryoneHere(users));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 <dfn>for...in</dfn> statement. For our <code>users</code> object, this could look like:",
+        "<blockquote>for (let user in users) {<br>  console.log(user);<br>};<br><br>// logs:<br>Alan<br>Jeff<br>Sarah<br>Ryan</blockquote>",
+        "In this statement, we defined a variable <code>user</code>, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console.",
+        "<strong>NOTE:</strong><br>Objects do not maintain an ordering to stored keys like arrays do; thus a keys position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.",
+        "<hr>",
+        "We've defined a function, <code>countOnline</code>; use a <dfn>for...in</dfn> statement within this function to loop through the users in the <code>users</code> object and return the number of users whose <code>online</code> property is set to <code>true</code>."
+      ],
+      "tests": [
+        {
+          "text": "The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>'",
+          "testString": "assert(users.Alan.online === false && users.Jeff.online === true &&  users.Sarah.online === false &&  users.Ryan.online === true, 'The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>')"
+        },
+        {
+          "text": "The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>'",
+          "testString": "assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, 'The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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",
+            "}",
+            "",
+            "console.log(countOnline(users));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 <code>Object.keys()</code> 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.",
+        "<hr>",
+        "Finish writing the <code>getArrayOfUsers</code> function so that it returns an array containing all the properties in the object it receives as an argument."
+      ],
+      "tests": [
+        {
+          "text": "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>'",
+          "testString": "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>')"
+        },
+        {
+          "text": "The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object'",
+          "testString": "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 <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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",
+            "}",
+            "",
+            "console.log(getArrayOfUsers(users));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 <dfn>Map</dfn> and <dfn>Set</dfn> 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!",
+        "<hr>",
+        "Take a look at the object we've provided in the code editor. The <code>user</code> object contains three keys. The <code>data</code> key contains five keys, one of which contains an array of <code>friends</code>. From this, you can see how flexible objects are as data structures. We've started writing a function <code>addFriend</code>. Finish writing it so that it takes a <code>user</code> object and adds the name of the <code>friend</code> argument to the array stored in <code>user.data.friends</code> and returns that array."
+      ],
+      "tests": [
+        {
+          "text": "The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys'",
+          "testString": "assert('name' in user && 'age' in user && 'data' in user, 'The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys')"
+        },
+        {
+          "text": "The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object'",
+          "testString": "assert((function() { let L1 = user.data.friends.length; addFriend(user, 'The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object')"
+        },
+        {
+          "text": "<code>addFriend(user, \"Pete\")</code> should return <code>[\"Sam\", \"Kira\", \"Tomo\", \"Pete\"]</code>'",
+          "testString": "assert.deepEqual((function() { delete user.data.friends; user.data.friends = ['Sam', '<code>addFriend(user, \"Pete\")</code> should return <code>[\"Sam\", \"Kira\", \"Tomo\", \"Pete\"]</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "solutions": [],
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let user = {",
+            "  name: 'Kenneth',",
+            "  age: 28,",
+            "  data: {",
+            "    username: 'kennethCodesAllDay',",
+            "    joinDate: 'March 26, 2016',",
+            "    organization: 'freeCodeCamp',",
+            "    friends: [",
+            "      'Sam',",
+            "      'Kira',",
+            "      'Tomo'",
+            "    ],",
+            "    location: {",
+            "      city: 'San Francisco',",
+            "      state: 'CA',",
+            "      country: 'USA'",
+            "    }",
+            "  }",
+            "};",
+            "",
+            "function addFriend(userObj, friend) {",
+            "  // change code below this line  ",
+            "",
+            "  // change code above this line",
+            "}",
+            "",
+            "console.log(addFriend(user, 'Pete'));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/basic-data-structures.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
new file mode 100644
index 0000000000..da9f98a36a
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
@@ -0,0 +1,7647 @@
+{
+  "name": "Basic JavaScript",
+  "time": "10 hours",
+  "order": 1,
+  "helpRoom": "HelpJavaScript",
+  "challenges": [
+    {
+      "id": "bd7123c9c441eddfaeb4bdef",
+      "title": "Comment Your JavaScript Code",
+      "description": [
+        "Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.",
+        "There are two ways to write comments in JavaScript:",
+        "Using <code>//</code> will tell JavaScript to ignore the remainder of the text on the current line:",
+        "<blockquote>// This is an in-line comment.</blockquote>",
+        "You can make a multi-line comment beginning with <code>/*</code> and ending with <code>*/</code>:",
+        "<blockquote>/* This is a <br>   multi-line comment */</blockquote>",
+        "<strong>Best Practice</strong><br>As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code&mdash;both for others <em>and</em> for your future self.",
+        "<hr>",
+        "Try creating one of each type of comment."
+      ],
+      "solutions": [
+        "// Fake Comment\n/* Another Comment */"
+      ],
+      "tests": [
+        {
+          "text": "Create a <code>//</code> style comment that contains at least five letters.'",
+          "testString": "assert(code.match(/(\\/\\/)...../g), 'Create a <code>//</code> style comment that contains at least five letters.')"
+        },
+        {
+          "text": "Create a <code>/* */</code> style comment that contains at least five letters.'",
+          "testString": "assert(code.match(/(\\/\\*)([^\\*\\/]{5, 'Create a <code>/* */</code> style comment that contains at least five letters.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Agrega comentarios a tu código JavaScript",
+          "description": [
+            "Los comentarios son líneas de código que el computador ignorará intencionalmente. Los comentarios son una gran forma de dejarte notas a ti mismo y a otras personas que luego tendrán que averiguar lo que hace que el código. ",
+            "Vamos a echar un vistazo a las dos maneras en las que puedes agregar tus comentarios en JavaScript.",
+            "El comentario de doble barra comentará el resto del texto en la línea donde se ubica:",
+            "<code>// Este es un comentario.</code>",
+            "El comentario de barra-estrella-estrella-barra, comentará todo lo que haya entre los caracteres <code>/*</code> y <code>*/</code>:",
+            "<code>/* Este es también un comentario */</code>",
+            "Trata de crear uno de cada uno."
+          ]
+        },
+        "fr": {
+          "title": "Commentez votre code JavaScript",
+          "description": [
+            "Les commentaires sont des lignes de code que JavaScript va intentionnellement ignorer. Les commentaires sont un bon moyen de laisser des notes à votre intention ou pour d'autres personnes qui devront comprendre ce que fait votre code.",
+            "Il y a deux façons d'écrire des commentaires en JavaScript.",
+            "Utiliser <code>//</code> indiquera à JavaScript d'ignorer le reste du texte sur cette même ligne:",
+            "<code>// Voici un commentaire sur une ligne.</code>",
+            "Vous pouvez commenter plusieurs lignes en commençant par <code>/*</code> et en finissant par <code>*/</code>:",
+            "<code>/*Voici un commentaire <br>   sur plusieurs lignes */</code>",
+            "<strong>Conseils</strong>",
+            "Lorsque vous écrivez votre code, vous devriez ajouter régulièrement des commentaires pour clarifier l'objectif de certaines parties de votre code. De bons commentaires peuvent aider les autres <em>et</em> vous-même à mieux comprendre votre code.",
+            "<hr>",
+            "Essayez de créer un commentaire de chaque type."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            " "
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c443eddfaeb5bdef",
+      "title": "Declare JavaScript Variables",
+      "description": [
+        "In computer science, <dfn>data</dfn> is anything that is meaningful to the computer. JavaScript provides seven different <dfn>data types</dfn> which are <code>undefined</code>, <code>null</code>, <code>boolean</code>, <code>string</code>, <code>symbol</code>, <code>number</code>, and <code>object</code>.",
+        "For example, computers distinguish between numbers, such as the number <code>12</code>, and <code>strings</code>, such as <code>\"12\"</code>, <code>\"dog\"</code>, or <code>\"123 cats\"</code>, which are collections of characters. Computers can perform mathematical operations on a number, but not on a string.",
+        "<dfn>Variables</dfn> allow computers to store and manipulate data in a dynamic fashion. They do this by using a \"label\" to point to the data rather than using the data itself. Any of the seven data types may be stored in a variable.",
+        "<code>Variables</code> are similar to the x and y variables you use in mathematics, which means they're a simple name to represent the data we want to refer to. Computer <code>variables</code> differ from mathematical variables in that they can store different values at different times.",
+        "We tell JavaScript to create or <dfn>declare</dfn> a variable by putting the keyword <code>var</code> in front of it, like so:",
+        "<blockquote>var ourName;</blockquote>",
+        "creates a <code>variable</code> called <code>ourName</code>. In JavaScript we end statements with semicolons.",
+        "<code>Variable</code> names can be made up of numbers, letters, and <code>$</code> or <code>_</code>, but may not contain spaces or start with a number.",
+        "<hr>",
+        "Use the <code>var</code> keyword to create a variable called <code>myName</code>.",
+        "<strong>Hint</strong><br>Look at the <code>ourName</code> example if you get stuck."
+      ],
+      "solutions": [
+        "var myName;"
+      ],
+      "tests": [
+        {
+          "text": "You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon'",
+          "testString": "assert(/var\\s+myName\\s*;/.test(code), 'You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Declara variables en JavaScript",
+          "description": [
+            "Cuando almacenamos datos en una <code>estructura de datos</code>, la llamamos una <code>variable</code>. Estas variables no son diferentes de las variables x e y que utilizas en matemáticas. ",
+            "Vamos a crear nuestra primera variable y a llamarla \"myName\".",
+            "Te darás cuenta que en <code>myName</code>, no usamos un espacio, y que la \" N\"se escribe con mayúscula. Las variables en JavaScript se escriben con <code>capitalización camello (camel case)</code>. Un ejemplo de capitalización camello: capitalizacionCamello.",
+            "Ahora, utiliza la palabra clave <code>var</code> para crear una variable llamada <code>myName</code>. Establecele como valor tu nombre, entre comillas dobles. ",
+            "Mira el ejemplo con <code>ourName</code> si te quedas atascado."
+          ]
+        },
+        "fr": {
+          "title": "Déclarer des variables en JavaScript",
+          "description": [
+            "En informatique, une <dfn>donnée</dfn> comporte tout ce qui peut avoir du sens pour l'ordinateur. JavaScript dispose de sept <code>types de données</code> différents qui sont <code>undefined</code>, <code>null</code>, <code>boolean</code>, <code>string</code>, <code>symbol</code>, <code>number</code> et <code>object</code>.",
+            "Par exemple, les ordinateurs font la différence entre les nombres tel que <code>12</code> et les <code>strings</code>, tels que <code>\"12\"</code>, <code>\"dog\"</code>, ou <code>\"123 cats\"</code>, qui sont des collections de caractères. Les ordinateurs peuvent faire des opérations mathématiques sur un nombre, mais pas sur une chaîne de caractères.",
+            "Les <dfn>variables</dfn> permettent aux ordinateurs de stocker et manipuler les données de façon dynamique. Ils font cela en utilisant un <blockquote>label</blockquote> qui réfère à la donnée plutôt que d'utiliser la donnée elle-même. Les sept types de données peuvent être stockés dans une variable.",
+            "Les <code>variables</code> sont similaires aux x et y que vous utilisez en mathématiques, ce qui veut dire que ce sont des noms simples qui représentent les données que l'on veut utiliser. Les <code>variables</code> de l'ordinateur diffèrent de celles des mathématiques car elles peuvent stocker différentes valeurs à différents moments.",
+            "On peut dire à JavaScript de créer ou <code>déclarer</code> une variable en la précédant du mot-clé <code>var</code>, comme ceci:",
+            "<code>var notreNom</code>;",
+            "crée une <code>variable</code> appelée <code>notreNom</code>.On termine nos expressions avec un point virgule en JavaScript.",
+            "Le nom d'une <code>variable</code> peut être composé de nombres, lettres et <code>$</code> ou <code>_</code>, mais ne peut contenir d'espaces ou commencer par un nombre.",
+            "<hr>",
+            "Utilisez le mot-clé <code>var</code> pour créer une variable appelée <code>monNom</code>",
+            "<strong>Conseil</strong><br>Regardez à l'exemple de <code>notreNom</code> si vous vous êtes bloqué."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourName;",
+            "",
+            "// Declare myName below this line",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myName !== \"undefined\"){(function(v){return v;})(myName);}"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244a8",
+      "title": "Storing Values with the Assignment Operator",
+      "description": [
+        "In JavaScript, you can store a value in a variable with the <dfn>assignment</dfn> operator.",
+        "<code>myVariable = 5;</code>",
+        "This assigns the <code>Number</code> value <code>5</code> to <code>myVariable</code>.",
+        "Assignment always goes from right to left. Everything to the right of the <code>=</code> operator is resolved before the value is assigned to the variable to the left of the operator.",
+        "<blockquote>myVar = 5;<br>myNum = myVar;</blockquote>",
+        "This assigns <code>5</code> to <code>myVar</code> and then resolves <code>myVar</code> to <code>5</code>  again and assigns it to <code>myNum</code>.",
+        "<hr>",
+        "Assign the value <code>7</code> to variable <code>a</code>.",
+        "Assign the contents of <code>a</code> to variable <code>b</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var a;\nvar b = 2;\na = 7;\nb = a;"
+      ],
+      "tests": [
+        {
+          "text": "Do not change code above the line'",
+          "testString": "assert(/var a;/.test(code) && /var b = 2;/.test(code), 'Do not change code above the line')"
+        },
+        {
+          "text": "<code>a</code> should have a value of 7'",
+          "testString": "assert(typeof a === 'number' && a === 7, '<code>a</code> should have a value of 7')"
+        },
+        {
+          "text": "<code>b</code> should have a value of 7'",
+          "testString": "assert(typeof b === 'number' && b === 7, '<code>b</code> should have a value of 7')"
+        },
+        {
+          "text": "<code>a</code> should be assigned to <code>b</code> with <code>=</code>'",
+          "testString": "assert(/b\\s*=\\s*a\\s*;/g.test(code), '<code>a</code> should be assigned to <code>b</code> with <code>=</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Almacenar valores con el operador igual",
+          "description": [
+            "En JavaScript, puedes almacenar un valor en una variable con la <dfn>asignación</dfn> o con el operador <code>igual</code> (<code>=</code>).",
+            "<code>miVariable = 5;</code>",
+            "Asigna el valor <code>númerico</code> de <code>5</code> a <code>miVariable</code>.",
+            "La asignación siempre va de derecha a izquierda. Todo a la derecha del operador <code>=</code> es resuelto antes que el valor es asignado a la variable a la izquierda del operador.",
+            "<blockquote>miVar = 5;<br>miNum = miVar;</blockquote>",
+            "Asigna <code>5</code> a <code>miVar</code> y entonces resuelve <code>miVar</code> a <code>5</code> otra vez y asigna esta a <code>miNum</code>.",
+            "<h4>Instrucciones</h4>",
+            "Asigna el valor <code>7</code> a la variable <code>a</code>.",
+            "Asigna el contenido de <code>a</code> a la variable <code>b</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var a;",
+            "var b = 2;",
+            "",
+            "// Only change code below this line",
+            ""
+          ],
+          "head": "if (typeof a != 'undefined') {\n  a = undefined;\n}\nif (typeof b != 'undefined') {\n  b = undefined;\n}",
+          "tail": "(function(a,b){return \"a = \" + a + \", b = \" + b;})(a,b);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244a9",
+      "title": "Initializing Variables with the Assignment Operator",
+      "description": [
+        "It is common to <dfn>initialize</dfn> a variable to an initial value in the same line as it is declared.",
+        "<code>var myVar = 0;</code>",
+        "Creates a new variable called <code>myVar</code> and assigns it an initial value of <code>0</code>.",
+        "<hr>",
+        "Define a variable <code>a</code> with <code>var</code> and initialize it to a value of <code>9</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var a = 9;"
+      ],
+      "tests": [
+        {
+          "text": "Initialize <code>a</code> to a value of <code>9</code>'",
+          "testString": "assert(/var\\s+a\\s*=\\s*9\\s*/.test(code), 'Initialize <code>a</code> to a value of <code>9</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Inicializar variables con el operador igual",
+          "description": [
+            "Es común <dfn>inicializar</dfn> una variable a un valor inicial en la misma línea que es declarada.",
+            "<code>var miVar = 0;</code>",
+            "Crea una nueva variable llamada <code>miVar</code> y le asigna un valor inicial de <code>0</code>.",
+            "<h4>Instrucciones</h4>",
+            "Define una variable <code>a</code> con <code>var</code> e inicializala a un valor de <code>9</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourVar = 19;",
+            "",
+            "// Only change code below this line",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof a !== 'undefined') {(function(a){return \"a = \" + a;})(a);} else { (function() {return 'a is undefined';})(); }"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244aa",
+      "title": "Understanding Uninitialized Variables",
+      "description": [
+        "When JavaScript variables are declared, they have an initial value of <code>undefined</code>. If you do a mathematical operation on an <code>undefined</code> variable your result will be <code>NaN</code> which means <dfn>\"Not a Number\"</dfn>. If you concatenate a string with an <code>undefined</code> variable, you will get a literal <dfn>string</dfn> of <code>\"undefined\"</code>.",
+        "<hr>",
+        "Initialize the three variables <code>a</code>, <code>b</code>, and <code>c</code> with <code>5</code>, <code>10</code>, and <code>\"I am a\"</code> respectively so that they will not be <code>undefined</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var a = 5;\nvar b = 10;\nvar c = \"I am a\";\na = a + 1;\nb = b + 5;\nc = c + \" String!\";"
+      ],
+      "tests": [
+        {
+          "text": "<code>a</code> should be defined and evaluated to have the value of <code>6</code>'",
+          "testString": "assert(typeof a === 'number' && a === 6, '<code>a</code> should be defined and evaluated to have the value of <code>6</code>')"
+        },
+        {
+          "text": "<code>b</code> should be defined and evaluated to have the value of <code>15</code>'",
+          "testString": "assert(typeof b === 'number' && b === 15, '<code>b</code> should be defined and evaluated to have the value of <code>15</code>')"
+        },
+        {
+          "text": "<code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"'",
+          "testString": "assert(!/undefined/.test(c) && c === \"I am a String!\", '<code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"')"
+        },
+        {
+          "text": "Do not change code below the line'",
+          "testString": "assert(/a = a \\+ 1;/.test(code) && /b = b \\+ 5;/.test(code) && /c = c \\+ \" String!\";/.test(code), 'Do not change code below the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Entendiendo variables sin inicializar",
+          "description": [
+            "Cuando las variables de JavaScript son declaradas, ellas tienen un valor inicial de <code>undefined</code>. Si tu haces una operación matematica sobre una variable <code>undefined</code> tu resultado sera <code>NaN</code> el cual significa <dfn>\"Not a Number\"</dfn> es decir \"No es un número\". Si tu concatenas una cadena con una variable <code>undefined</code>, vas a obtener una <dfn>cadena</dfn> literal de <code>\"undefined\"</code>.",
+            "<h4>Instrucciones</h4>",
+            "Inicializa las tres variables <code>a</code>, <code>b</code>, y <code>c</code> con <code>5</code>, <code>10</code>, y <code>\"I am a\"</code> respectivamente de manera que no sean <code>undefined</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Initialize these three variables",
+            "var a;",
+            "var b;",
+            "var c;",
+            "",
+            "// Do not change code below this line",
+            "",
+            "a = a + 1;",
+            "b = b + 5;",
+            "c = c + \" String!\";",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = '\" + c + \"'\"; })(a,b,c);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244ab",
+      "title": "Understanding Case Sensitivity in Variables",
+      "description": [
+        "In JavaScript all variables and function names are case sensitive. This means that capitalization matters.",
+        "<code>MYVAR</code> is not the same as <code>MyVar</code> nor <code>myvar</code>. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you <em>do not</em> use this language feature.",
+        "<h4>Best Practice</h4>",
+        "Write variable names in JavaScript in <dfn>camelCase</dfn>. In <dfn>camelCase</dfn>, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.",
+        "<strong>Examples:</strong>",
+        "<blockquote>var someVariable;<br>var anotherVariableName;<br>var thisVariableNameIsSoLong;</blockquote>",
+        "<hr>",
+        "Modify the existing declarations and assignments so their names use <dfn>camelCase</dfn>.<br>Do not create any new variables."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var studlyCapVar;\nvar properCamelCase;\nvar titleCaseOver;\n\nstudlyCapVar = 10;\nproperCamelCase = \"A String\";\ntitleCaseOver = 9000;"
+      ],
+      "tests": [
+        {
+          "text": "<code>studlyCapVar</code> is defined and has a value of <code>10</code>'",
+          "testString": "assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10, '<code>studlyCapVar</code> is defined and has a value of <code>10</code>')"
+        },
+        {
+          "text": "<code>properCamelCase</code> is defined and has a value of <code>\"A String\"</code>'",
+          "testString": "assert(typeof properCamelCase !== 'undefined' && properCamelCase === \"A String\", '<code>properCamelCase</code> is defined and has a value of <code>\"A String\"</code>')"
+        },
+        {
+          "text": "<code>titleCaseOver</code> is defined and has a value of <code>9000</code>'",
+          "testString": "assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000, '<code>titleCaseOver</code> is defined and has a value of <code>9000</code>')"
+        },
+        {
+          "text": "<code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.'",
+          "testString": "assert(code.match(/studlyCapVar/g).length === 2, '<code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.')"
+        },
+        {
+          "text": "<code>properCamelCase</code> should use camelCase in both declaration and assignment sections.'",
+          "testString": "assert(code.match(/properCamelCase/g).length === 2, '<code>properCamelCase</code> should use camelCase in both declaration and assignment sections.')"
+        },
+        {
+          "text": "<code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.'",
+          "testString": "assert(code.match(/titleCaseOver/g).length === 2, '<code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Entendiendo la distinción en variables",
+          "description": [
+            "En JavaScript todas las variables y nombres de funciones distinguen entre mayúsculas y minúsculas. Esto significa que la capitalización importa.",
+            "<code>MIVAR</code> no es lo mismo que <code>MiVar</code> o <code>mivar</code>. Esto hace posible tener múltiples variables distintas con el mismo nombre pero de diferente manera. Es fuertemente recomendado por el bien de la claridad, que tu <em>no</em> uses esta característica del lenguaje.",
+            "<h4>Mejor Práctica</h4>",
+            "Escribe nombres de variables en JavaScript en <dfn>capitalizaciónCamello (camelCase)</dfn>. En <dfn>capitalizaciónCamello</dfn>, los nombres de variables con múltiples palabras tienen la primera palabra en minúsculas y la primera letra de cada palabra subsecuente es capitalizada.",
+            "<strong>Ejemplos:</strong>",
+            "<blockquote>var algunaVariable;<br>var otraVariable;<br>var esteNombreDeVariableEsMuyLargo;</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Repara las declaraciones y asignaciones de variables de manera que sus nombres usen <dfn>capitalizaciónCamello</dfn>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Declarations",
+            "var StUdLyCapVaR;",
+            "var properCamelCase;",
+            "var TitleCaseOver;",
+            "",
+            "// Assignments",
+            "STUDLYCAPVAR = 10;",
+            "PRoperCAmelCAse = \"A String\";",
+            "tITLEcASEoVER = 9000;"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb3bdef",
+      "title": "Add Two Numbers with JavaScript",
+      "description": [
+        "<code>Number</code> is a data type in JavaScript which represents numeric data.",
+        "Now let's try to add two numbers using JavaScript.",
+        "JavaScript uses the <code>+</code> symbol as addition operation when placed between two numbers.",
+        "<strong>Example</strong>",
+        "<blockquote>myVar = 5 + 10; // assigned 15</blockquote>",
+        "<hr>",
+        "Change the <code>0</code> so that sum will equal <code>20</code>."
+      ],
+      "solutions": [
+        "var sum = 10 + 10;"
+      ],
+      "tests": [
+        {
+          "text": "<code>sum</code> should equal <code>20</code>'",
+          "testString": "assert(sum === 20, '<code>sum</code> should equal <code>20</code>')"
+        },
+        {
+          "text": "Use the <code>+</code> operator'",
+          "testString": "assert(/\\+/.test(code), 'Use the <code>+</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Suma dos números con JavaScript",
+          "description": [
+            "Intentemos sumar dos números con JavaScript.",
+            "JavaScript utiliza el símbolo <code>+</code> para la adición.",
+            "Cambie el <code>0</code> para que la suma seá igual a <code>20</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var sum = 10 + 0;",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return 'sum = '+z;})(sum);"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb4bdef",
+      "title": "Subtract One Number from Another with JavaScript",
+      "description": [
+        "We can also subtract one number from another.",
+        "JavaScript uses the <code>-</code> symbol for subtraction.",
+        "",
+        "<strong>Example</strong>",
+        "<blockquote>myVar = 12 - 6; // assigned 6</blockquote>",
+        "",
+        "<hr>",
+        "Change the <code>0</code> so the difference is <code>12</code>."
+      ],
+      "solutions": [
+        "var difference = 45 - 33;"
+      ],
+      "tests": [
+        {
+          "text": "Make the variable <code>difference</code> equal 12.'",
+          "testString": "assert(difference === 12, 'Make the variable <code>difference</code> equal 12.')"
+        },
+        {
+          "text": "Only subtract one number from 45.'",
+          "testString": "assert(/var\\s*difference\\s*=\\s*45\\s*-\\s*[0-9]*;(?!\\s*[a-zA-Z0-9]+)/.test(code), 'Only subtract one number from 45.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Resta un número de otro con JavaScript",
+          "description": [
+            "También podemos restar un número de otro.",
+            "JavaScript utiliza el símbolo <code>-</code> de sustracción",
+            "Cambia el <code>0</code> para que la diferencia sea <code>12</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var difference = 45 - 0;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return 'difference = '+z;})(difference);"
+        }
+      }
+    },
+    {
+      "id": "cf1231c1c11feddfaeb5bdef",
+      "title": "Multiply Two Numbers with JavaScript",
+      "description": [
+        "We can also multiply one number by another.",
+        "JavaScript uses the <code>*</code> symbol for multiplication of two numbers.",
+        "",
+        "<strong>Example</strong>",
+        "<blockquote>myVar = 13 * 13; // assigned 169</blockquote>",
+        "",
+        "<hr>",
+        "Change the <code>0</code> so that product will equal <code>80</code>."
+      ],
+      "solutions": [
+        "var product = 8 * 10;"
+      ],
+      "tests": [
+        {
+          "text": "Make the variable <code>product</code> equal 80'",
+          "testString": "assert(product === 80, 'Make the variable <code>product</code> equal 80')"
+        },
+        {
+          "text": "Use the <code>*</code> operator'",
+          "testString": "assert(/\\*/.test(code), 'Use the <code>*</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Multiplica dos números con JavaScript",
+          "description": [
+            "También podemos multiplicar un número por otro.",
+            "JavaScript utiliza el símbolo <code>*</code> de la multiplicación.",
+            "Cambie el <code>0</code> para que el producto sea igual a <code>80</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var product = 8 * 0;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return 'product = '+z;})(product);"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb6bdef",
+      "title": "Divide One Number by Another with JavaScript",
+      "description": [
+        "We can also divide one number by another.",
+        "JavaScript uses the <code>/</code> symbol for division.",
+        "",
+        "<strong>Example</strong>",
+        "<blockquote>myVar = 16 / 2; // assigned 8</blockquote>",
+        "",
+        "<hr>",
+        "Change the <code>0</code> so that the <code>quotient</code> is equal to <code>2</code>."
+      ],
+      "solutions": [
+        "var quotient = 66 / 33;"
+      ],
+      "tests": [
+        {
+          "text": "Make the variable <code>quotient</code> equal to 2.'",
+          "testString": "assert(quotient === 2, 'Make the variable <code>quotient</code> equal to 2.')"
+        },
+        {
+          "text": "Use the <code>/</code> operator'",
+          "testString": "assert(/\\d+\\s*\\/\\s*\\d+/.test(code), 'Use the <code>/</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Divide un número por otro con JavaScript",
+          "description": [
+            "También podemos dividir un número por otro.",
+            "JavaScript utiliza el símbolo <code>/</code> para dividir.",
+            "Cambia el <code>0</code> para que el cociente sea igual a <code>2</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var quotient = 66 / 0;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return 'quotient = '+z;})(quotient);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244ac",
+      "title": "Increment a Number with JavaScript",
+      "description": [
+        "You can easily <dfn>increment</dfn> or add one to a variable with the <code>++</code> operator.",
+        "<code>i++;</code>",
+        "is the equivalent of",
+        "<code>i = i + 1;</code>",
+        "<strong>Note</strong><br>The entire line becomes <code>i++;</code>, eliminating the need for the equal sign.",
+        "<hr>",
+        "Change the code to use the <code>++</code> operator on <code>myVar</code>.",
+        "<strong>Hint</strong><br>Learn more about <a href=\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_()\" target=\"_blank\">Arithmetic operators - Increment (++)</a>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myVar = 87;\nmyVar++;"
+      ],
+      "tests": [
+        {
+          "text": "<code>myVar</code> should equal <code>88</code>'",
+          "testString": "assert(myVar === 88, '<code>myVar</code> should equal <code>88</code>')"
+        },
+        {
+          "text": "<code>myVar = myVar + 1;</code> should be changed'",
+          "testString": "assert(/var\\s*myVar\\s*=\\s*87;\\s*\\/*.*\\s*myVar\\+\\+;/.test(code), '<code>myVar = myVar + 1;</code> should be changed')"
+        },
+        {
+          "text": "Use the <code>++</code> operator'",
+          "testString": "assert(/[+]{2}\\s*myVar|myVar\\s*[+]{2}/.test(code), 'Use the <code>++</code> operator')"
+        },
+        {
+          "text": "Do not change code above the line'",
+          "testString": "assert(/var myVar = 87;/.test(code), 'Do not change code above the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Incrementa un número con JavaScript",
+          "description": [
+            "Tu puedes fácilmente <dfn>incrementar</dfn> o agregar uno a una variable con el operador <code>++</code>.",
+            "<code>i++</code>",
+            "es el equivalente de",
+            "<code>i = i + 1;</code>",
+            "<strong>Nota</strong><br>Toda la línea equivale a <code>i++</code>, sin necesidad del signo igual.",
+            "<h4>Instrucciones</h4>",
+            "Cambia el código para usar el operador <code>++</code> sobre <code>myVar</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myVar = 87;",
+            "",
+            "// Only change code below this line",
+            "myVar = myVar + 1;",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return 'myVar = ' + z;})(myVar);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244ad",
+      "title": "Decrement a Number with JavaScript",
+      "description": [
+        "You can easily <dfn>decrement</dfn> or decrease a variable by one with the <code>--</code> operator.",
+        "<code>i--;</code>",
+        "is the equivalent of",
+        "<code>i = i - 1;</code>",
+        "<strong>Note</strong><br>The entire line becomes <code>i--;</code>, eliminating the need for the equal sign.",
+        "<hr>",
+        "Change the code to use the <code>--</code> operator on <code>myVar</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myVar = 11;\nmyVar--;"
+      ],
+      "tests": [
+        {
+          "text": "<code>myVar</code> should equal <code>10</code>'",
+          "testString": "assert(myVar === 10, '<code>myVar</code> should equal <code>10</code>')"
+        },
+        {
+          "text": "<code>myVar = myVar - 1;</code> should be changed'",
+          "testString": "assert(/var\\s*myVar\\s*=\\s*11;\\s*\\/*.*\\s*myVar--;/.test(code), '<code>myVar = myVar - 1;</code> should be changed')"
+        },
+        {
+          "text": "Use the <code>--</code> operator on <code>myVar</code>'",
+          "testString": "assert(/[-]{2}\\s*myVar|myVar\\s*[-]{2}/.test(code), 'Use the <code>--</code> operator on <code>myVar</code>')"
+        },
+        {
+          "text": "Do not change code above the line'",
+          "testString": "assert(/var myVar = 11;/.test(code), 'Do not change code above the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Decrementar un número con JavaScript",
+          "description": [
+            "Fácilmente puedes <dfn>decrementar</dfn> o disminuir una variable por uno con el operador <code>--</code>.",
+            "<code>i--;</code>",
+            "es el equivalente a",
+            "<code>i = i - 1;</code>",
+            "<strong>Nota</strong><br>Toda la línea equivale a <code>i--;</code>, sin necesidad del signo igual.",
+            "<h4>Instrucciones</h4>",
+            "Cambia el código para usar el operador <code>--</code> en <code>myVar</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myVar = 11;",
+            "",
+            "// Only change code below this line",
+            "myVar = myVar - 1;",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return 'myVar = ' + z;})(myVar);"
+        }
+      }
+    },
+    {
+      "id": "cf1391c1c11feddfaeb4bdef",
+      "title": "Create Decimal Numbers with JavaScript",
+      "description": [
+        "We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.",
+        "<strong>Note</strong><br>Not all real numbers can accurately be represented in <dfn>floating point</dfn>. This can lead to rounding errors. <a href=\"https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems\" target=\"_blank\">Details Here</a>.",
+        "<hr>",
+        "Create a variable <code>myDecimal</code> and give it a decimal value with a fractional part (e.g. <code>5.7</code>)."
+      ],
+      "solutions": [
+        "var myDecimal = 9.9;"
+      ],
+      "tests": [
+        {
+          "text": "<code>myDecimal</code> should be a number.'",
+          "testString": "assert(typeof myDecimal === \"number\", '<code>myDecimal</code> should be a number.')"
+        },
+        {
+          "text": "<code>myDecimal</code> should have a decimal point",
+          "testString": "assert(myDecimal % 1 != 0, '<code>myDecimal</code> should have a decimal point');"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Crea números decimales con JavaScript",
+          "description": [
+            "Podemos almacenar números decimales en variables también. Los números decimales a veces son referidos como números de <dfn>punto flotante</dfn> o <dfn>flotantes</dfn>.",
+            "<strong>Nota</strong><br>No todos los números reales pueden ser exactamente representados en <dfn>punto flotante</dfn>. Esto puede conducir a errores de redondeo. <a href=\"https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems\" target=\"_blank\">Detalles aquí</a>.",
+            "<h4>Instrucciones</h4>",
+            "Crea una variable <code>myDecimal</code> y dale un valor decimal con una parte fraccional (p.e. <code>5.7</code>)."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var ourDecimal = 5.7;",
+            "",
+            "// Only change code below this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){if(typeof myDecimal !== \"undefined\"){return myDecimal;}})();"
+        }
+      }
+    },
+    {
+      "id": "bd7993c9c69feddfaeb7bdef",
+      "title": "Multiply Two Decimals with JavaScript",
+      "description": [
+        "In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.",
+        "Let's multiply two decimals together to get their product.",
+        "<hr>",
+        "Change the <code>0.0</code> so that product will equal <code>5.0</code>."
+      ],
+      "solutions": [
+        "var product = 2.0 * 2.5;"
+      ],
+      "tests": [
+        {
+          "text": "The variable <code>product</code> should equal <code>5.0</code>.'",
+          "testString": "assert(product === 5.0, 'The variable <code>product</code> should equal <code>5.0</code>.')"
+        },
+        {
+          "text": "You should use the <code>*</code> operator'",
+          "testString": "assert(/\\*/.test(code), 'You should use the <code>*</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Multiplicar dos decimales con JavaScript",
+          "description": [
+            "En JavaScript, también puedes realizar cálculos con números decimales, al igual que con números enteros.",
+            "Vamos a multiplicar dos números decimales para obtener su producto.",
+            "<h4>Instrucciones</h4>",
+            "Cambia el <code>0.0</code> para que el producto sea igual a <code>5.0</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var product = 2.0 * 0.0;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(y){return 'product = '+y;})(product);"
+        }
+      }
+    },
+    {
+      "id": "bd7993c9ca9feddfaeb7bdef",
+      "title": "Divide One Decimal by Another with JavaScript",
+      "description": [
+        "Now let's divide one decimal by another.",
+        "<hr>",
+        "Change the <code>0.0</code> so that <code>quotient</code> will equal to <code>2.2</code>."
+      ],
+      "solutions": [],
+      "tests": [
+        {
+          "text": "The variable <code>quotient</code> should equal <code>2.2</code>'",
+          "testString": "assert(quotient === 2.2, 'The variable <code>quotient</code> should equal <code>2.2</code>')"
+        },
+        {
+          "text": "You should use the <code>/</code> operator to divide 4.4 by 2'",
+          "testString": "assert(/4\\.40*\\s*\\/\\s*2\\.*0*/.test(code), 'You should use the <code>/</code> operator to divide 4.4 by 2')"
+        },
+        {
+          "text": "The quotient variable should only be assigned once'",
+          "testString": "assert(code.match(/quotient/g).length === 1, 'The quotient variable should only be assigned once')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Divide un número decimal por otro con JavaScript",
+          "description": [
+            "Ahora vamos a dividir un decimal por otro.",
+            "<h4>Instrucciones</h4>",
+            "Cambia el <code>0.0</code> para que tu cociente sea igual a <code>2.2</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var quotient = 0.0 / 2.0; // Fix this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(y){return 'quotient = '+y;})(quotient);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244ae",
+      "title": "Finding a Remainder in JavaScript",
+      "description": [
+        "The <dfn>remainder</dfn> operator <code>%</code> gives the remainder of the division of two numbers.",
+        "<strong>Example</strong>",
+        "<blockquote>5 % 2 = 1 because<br>Math.floor(5 / 2) = 2 (Quotient)<br>2 * 2 = 4<br>5 - 4 = 1 (Remainder)</blockquote>",
+        "<strong>Usage</strong><br>In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by <code>2</code>.",
+        "<blockquote>17 % 2 = 1 (17 is Odd)<br>48 % 2 = 0 (48 is Even)</blockquote>",
+        "<strong>Note</strong><br>The <dfn>remainder</dfn> operator is sometimes incorrectly referred to as  the \"modulus\" operator. It is very similar to modulus, but does not work properly with negative numbers.",
+        "<hr>",
+        "Set <code>remainder</code> equal to the remainder of <code>11</code> divided by <code>3</code> using the <dfn>remainder</dfn> (<code>%</code>) operator."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var remainder =  11 % 3;"
+      ],
+      "tests": [
+        {
+          "text": "The variable <code>remainder</code> should be initialized'",
+          "testString": "assert(/var\\s+?remainder/.test(code), 'The variable <code>remainder</code> should be initialized')"
+        },
+        {
+          "text": "The value of <code>remainder</code> should be <code>2</code>'",
+          "testString": "assert(remainder === 2, 'The value of <code>remainder</code> should be <code>2</code>')"
+        },
+        {
+          "text": "You should use the <code>%</code> operator'",
+          "testString": "assert(/\\s+?remainder\\s*?=\\s*?.*%.*;/.test(code), 'You should use the <code>%</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Encontrar un cociente en JavaScript",
+          "description": [
+            "El operador <dfn>residuo</dfn> <code>%</code> da el residuo de la división de dos números.",
+            "<strong>Ejemplo</strong>",
+            "<blockquote>5 % 2 = 1 por que<br>Math.floor(5 / 2) = 2 (Cociente)<br>2 * 2 = 4<br>5 - 4 = 1 (Residuo)</blockquote>",
+            "<strong>Uso</strong><br>En matemáticas, se puede comprobar si un número es par o impar revisando en residuo de la división del número por <code>2</code>.",
+            "<blockquote>17 % 2 = 1 (17 es Impar)<br>48 % 2 = 0 (48 es Par)</blockquote>",
+            "<strong>Nota</strong><br>El operador <dfn>residuo</dfn> es a veces incorrectamente referenciado como el operador \"módulo\". Este es muy parecido a módulo, pero no trabaja apropiadamente con números negativos.",
+            "<h4>Instrucciones</h4>",
+            "Asigna <code>remainder</code> igual al residuo de <code>11</code> dividido por <code>3</code> usando el operador <dfn>residuo</dfn> (<code>%</code>)."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Only change code below this line",
+            "",
+            "var remainder;",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(y){return 'remainder = '+y;})(remainder);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244af",
+      "title": "Compound Assignment With Augmented Addition",
+      "description": [
+        "In programming, it is common to use assignments to modify the contents of a variable. Remember that everything to the right of the equals sign is evaluated first, so we can say:",
+        "<code>myVar = myVar + 5;</code>",
+        "to add <code>5</code> to <code>myVar</code>. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step.",
+        "One such operator is the <code>+=</code> operator.",
+        "<blockquote>var myVar = 1;<br>myVar += 5;<br>console.log(myVar); // Returns 6</blockquote>",
+        "<hr>",
+        "Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>+=</code> operator."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var a = 3;\nvar b = 17;\nvar c = 12;\n\na += 12;\nb += 9;\nc += 7;"
+      ],
+      "tests": [
+        {
+          "text": "<code>a</code> should equal <code>15</code>'",
+          "testString": "assert(a === 15, '<code>a</code> should equal <code>15</code>')"
+        },
+        {
+          "text": "<code>b</code> should equal <code>26</code>'",
+          "testString": "assert(b === 26, '<code>b</code> should equal <code>26</code>')"
+        },
+        {
+          "text": "<code>c</code> should equal <code>19</code>'",
+          "testString": "assert(c === 19, '<code>c</code> should equal <code>19</code>')"
+        },
+        {
+          "text": "You should use the <code>+=</code> operator for each variable'",
+          "testString": "assert(code.match(/\\+=/g).length === 3, 'You should use the <code>+=</code> operator for each variable')"
+        },
+        {
+          "text": "Do not modify the code above the line'",
+          "testString": "assert(/var a = 3;/.test(code) && /var b = 17;/.test(code) && /var c = 12;/.test(code), 'Do not modify the code above the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Asignación con más",
+          "description": [
+            "En programación, es común usar asignaciones para modificar el contenido de una variable. Recuerda que todo lo de la derecha del signo igual es evaluado primero, así podemos decir que:",
+            "<code>miVar = miVar + 5;</code>",
+            "para agregar <code>5</code> a <code>miVar</code>. Dado que este es un patrón común, hay operadores que realizan tanto una operación matemática como una asignación en un paso.",
+            "Uno de tales operadores es el operador <code>+=</code>.",
+            "<code>miVar += 5;</code> añadirá <code>5</code> a <code>miVar</code>.",
+            "<h4>Instrucciones</h4>",
+            "Convierte las asignaciones para <code>a</code>, <code>b</code> y <code>c</code> usando el operador <code>+=</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var a = 3;",
+            "var b = 17;",
+            "var c = 12;",
+            "",
+            "// Only modify code below this line",
+            "",
+            "a = a + 12;",
+            "b = 9 + b;",
+            "c = c + 7;",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = \" + c; })(a,b,c);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b0",
+      "title": "Compound Assignment With Augmented Subtraction",
+      "description": [
+        "Like the <code>+=</code> operator, <code>-=</code> subtracts a number from a variable.",
+        "<code>myVar = myVar - 5;</code>",
+        "will subtract <code>5</code> from <code>myVar</code>. This can be rewritten as: ",
+        "<code>myVar -= 5;</code>",
+        "<hr>",
+        "Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>-=</code> operator."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var a = 11;\nvar b = 9;\nvar c = 3;\n\na -= 6;\nb -= 15;\nc -= 1;\n\n"
+      ],
+      "tests": [
+        {
+          "text": "<code>a</code> should equal <code>5</code>'",
+          "testString": "assert(a === 5, '<code>a</code> should equal <code>5</code>')"
+        },
+        {
+          "text": "<code>b</code> should equal <code>-6</code>'",
+          "testString": "assert(b === -6, '<code>b</code> should equal <code>-6</code>')"
+        },
+        {
+          "text": "<code>c</code> should equal <code>2</code>'",
+          "testString": "assert(c === 2, '<code>c</code> should equal <code>2</code>')"
+        },
+        {
+          "text": "You should use the <code>-=</code> operator for each variable'",
+          "testString": "assert(code.match(/-=/g).length === 3, 'You should use the <code>-=</code> operator for each variable')"
+        },
+        {
+          "text": "Do not modify the code above the line'",
+          "testString": "assert(/var a = 11;/.test(code) && /var b = 9;/.test(code) && /var c = 3;/.test(code), 'Do not modify the code above the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Asignación con menos",
+          "description": [
+            "Al igual que el operador <code>+=</code>, <code>-=</code> substrae un número de una variable.",
+            "<code>miVar = miVar - 5;</code>",
+            "substraerá <code>5</code> de <code>miVar</code>. Esto puede ser reescrito como: ",
+            "<code>miVar -= 5;</code>",
+            "<h4>Instrucciones</h4>",
+            "Convierte las asignaciones para <code>a</code>, <code>b</code>, y <code>c</code> para usar el operador <code>-=</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var a = 11;",
+            "var b = 9;",
+            "var c = 3;",
+            "",
+            "// Only modify code below this line",
+            "",
+            "a = a - 6;",
+            "b = b - 15;",
+            "c = c - 1;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = \" + c; })(a,b,c);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b1",
+      "title": "Compound Assignment With Augmented Multiplication",
+      "description": [
+        "The <code>*=</code> operator multiplies a variable by a number.",
+        "<code>myVar = myVar * 5;</code>",
+        "will multiply <code>myVar</code> by <code>5</code>. This can be rewritten as: ",
+        "<code>myVar *= 5;</code>",
+        "<hr>",
+        "Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>*=</code> operator."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var a = 5;\nvar b = 12;\nvar c = 4.6;\n\na *= 5;\nb *= 3;\nc *= 10;"
+      ],
+      "tests": [
+        {
+          "text": "<code>a</code> should equal <code>25</code>'",
+          "testString": "assert(a === 25, '<code>a</code> should equal <code>25</code>')"
+        },
+        {
+          "text": "<code>b</code> should equal <code>36</code>'",
+          "testString": "assert(b === 36, '<code>b</code> should equal <code>36</code>')"
+        },
+        {
+          "text": "<code>c</code> should equal <code>46</code>'",
+          "testString": "assert(c === 46, '<code>c</code> should equal <code>46</code>')"
+        },
+        {
+          "text": "You should use the <code>*=</code> operator for each variable'",
+          "testString": "assert(code.match(/\\*=/g).length === 3, 'You should use the <code>*=</code> operator for each variable')"
+        },
+        {
+          "text": "Do not modify the code above the line'",
+          "testString": "assert(/var a = 5;/.test(code) && /var b = 12;/.test(code) && /var c = 4\\.6;/.test(code), 'Do not modify the code above the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Asignación con veces igual",
+          "description": [
+            "El operador <code>*=</code> multiplica una variable por un número.",
+            "<code>miVar = miVar * 5;</code>",
+            "multiplicará <code>miVar</code> por <code>5</code>. Esto puede ser reescrito como: ",
+            "<code>miVar *= 5;</code>",
+            "<h4>Instrucciones</h4>",
+            "Convierte las asignaciones para <code>a</code>, <code>b</code> y <code>c</code> usando el operador <code>*=</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var a = 5;",
+            "var b = 12;",
+            "var c = 4.6;",
+            "",
+            "// Only modify code below this line",
+            "",
+            "a = a * 5;",
+            "b = 3 * b;",
+            "c = c * 10;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = \" + c; })(a,b,c);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b2",
+      "title": "Compound Assignment With Augmented Division",
+      "description": [
+        "The <code>/=</code> operator divides a variable by another number.",
+        "<code>myVar = myVar / 5;</code>",
+        "Will divide <code>myVar</code> by <code>5</code>. This can be rewritten as: ",
+        "<code>myVar /= 5;</code>",
+        "<hr>",
+        "Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>/=</code> operator."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var a = 48;\nvar b = 108;\nvar c = 33;\n\na /= 12;\nb /= 4;\nc /= 11;"
+      ],
+      "tests": [
+        {
+          "text": "<code>a</code> should equal <code>4</code>'",
+          "testString": "assert(a === 4, '<code>a</code> should equal <code>4</code>')"
+        },
+        {
+          "text": "<code>b</code> should equal <code>27</code>'",
+          "testString": "assert(b === 27, '<code>b</code> should equal <code>27</code>')"
+        },
+        {
+          "text": "<code>c</code> should equal <code>3</code>'",
+          "testString": "assert(c === 3, '<code>c</code> should equal <code>3</code>')"
+        },
+        {
+          "text": "You should use the <code>/=</code> operator for each variable'",
+          "testString": "assert(code.match(/\\/=/g).length === 3, 'You should use the <code>/=</code> operator for each variable')"
+        },
+        {
+          "text": "Do not modify the code above the line'",
+          "testString": "assert(/var a = 48;/.test(code) && /var b = 108;/.test(code) && /var c = 33;/.test(code), 'Do not modify the code above the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Asignación con división",
+          "description": [
+            "El operador <code>/=</code> divide una variable por otro número.",
+            "<code>miVar = miVar / 5;</code>",
+            "Dividirá <code>miVar</code> por <code>5</code>. Esto puede ser reescrito como: ",
+            "<code>miVar /= 5;</code>",
+            "<h4>Instrucciones</h4>",
+            "Convierte las asignaciones para <code>a</code>, <code>b</code> y <code>c</code> para usar el operador <code>/=</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var a = 48;",
+            "var b = 108;",
+            "var c = 33;",
+            "",
+            "// Only modify code below this line",
+            "",
+            "a = a / 12;",
+            "b = b / 4;",
+            "c = c / 11;",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = \" + c; })(a,b,c);"
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c444eddfaeb5bdef",
+      "title": "Declare String Variables",
+      "description": [
+        "Previously we have used the code",
+        "<code>var myName = \"your name\";</code>",
+        "<code>\"your name\"</code> is called a <dfn>string</dfn> <dfn>literal</dfn>. It is a string because it is a series of zero or more characters enclosed in single or double quotes.",
+        "<hr>",
+        "Create two new <code>string</code> variables: <code>myFirstName</code> and <code>myLastName</code> and assign them the values of your first and last name, respectively."
+      ],
+      "solutions": [
+        "var myFirstName = \"Alan\";\nvar myLastName = \"Turing\";"
+      ],
+      "tests": [
+        {
+          "text": "<code>myFirstName</code> should be a string with at least one character in it.'",
+          "testString": "assert((function(){if(typeof myFirstName !== \"undefined\" && typeof myFirstName === \"string\" && myFirstName.length > 0){return true;}else{return false;}})(), '<code>myFirstName</code> should be a string with at least one character in it.')"
+        },
+        {
+          "text": "<code>myLastName</code> should be a string with at least one character in it.'",
+          "testString": "assert((function(){if(typeof myLastName !== \"undefined\" && typeof myLastName === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), '<code>myLastName</code> should be a string with at least one character in it.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Declara variables tipo cadena",
+          "description": [
+            "En el reto anterior, se utilizó el código <code>myName var = \"su nombre\"</code>. Esto es lo que llamamos una variable tipo <code>cadena</code>. No es nada más que una \"cadena\" de caracteres. Las cadenas en JavaScript siempre se encierran entre comillas. ",
+            "Ahora vamos a crear dos nuevas variables tipo cadena: <code>myFirstName</code> y <code>myLastName</code> y asignarles los valores de tu nombre y tu apellido, respectivamente."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var firstName = \"Alan\";",
+            "var lastName = \"Turing\";",
+            "",
+            "// Only change code below this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myFirstName !== \"undefined\" && typeof myLastName !== \"undefined\"){(function(){return myFirstName + ', ' + myLastName;})();}"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b5",
+      "title": "Escaping Literal Quotes in Strings",
+      "description": [
+        "When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: <code>\"</code> or <code>'</code> inside of your string?",
+        "In JavaScript, you can <dfn>escape</dfn> a quote from considering it as an end of string quote by placing a <dfn>backslash</dfn> (<code>\\</code>) in front of the quote.",
+        "<code>var sampleStr = \"Alan said, \\\"Peter is learning JavaScript\\\".\";</code>",
+        "This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:",
+        "<code>Alan said, \"Peter is learning JavaScript\".</code>",
+        "<hr>",
+        "Use <dfn>backslashes</dfn> to assign a string to the <code>myStr</code> variable so that if you were to print it to the console, you would see:",
+        "<code>I am a \"double quoted\" string inside \"double quotes\".</code>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myStr = \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\".\";"
+      ],
+      "tests": [
+        {
+          "text": "You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).'",
+          "testString": "assert(code.match(/\\\\\"/g).length === 4 && code.match(/[^\\\\]\"/g).length === 2, 'You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).')"
+        },
+        {
+          "text": "Variable myStr should contain the string: <code>I am a \"double quoted\" string inside \"double quotes\".</code>'",
+          "testString": "assert(myStr === \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\".\", 'Variable myStr should contain the string: <code>I am a \"double quoted\" string inside \"double quotes\".</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Escapar comillas en cadenas de texto",
+          "description": [
+            "Cuando estás definiendo una cadena debes iniciar y terminar con apóstrofes o comillas. ¿Qué pasa cuando necesitas una comilla: <code>\"</code> o <code>'</code> dentro de tu cadena?",
+            "En JavaScript, tu puedes <dfn>escapar</dfn> unas comillas para diferenciarlas de las comillas del final de la cadena colocando una <dfn>barra invertida</dfn> (<code>\\</code>) antes de la cita.",
+            "<code>var cadenaEjem = \"Alan dijo, \\\"Pedro está aprendiendo JavaScript\\\".\";</code>",
+            "Esto le indica a JavaScript que la comilla siguiente no es el fin de la cadena, sino que debe aparecer dentro de la cadena. Así que si fueras a imprimir esto en la consola, tu obtendrías:",
+            "<code>Alan dijo, \"Pedro está aprendiendo JavaScript\".<code>",
+            "<h4>Instructiones</h4>",
+            "Usa <dfn>barras invertidas</dfn>para asigar una cadena a la variable <code>myStr</code> de modo que <em>si</em> tu fueras a imprimirla en la consola, tu verías:",
+            "<code>I am a \"double quoted\" string inside \"double quotes\".</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myStr = \"\"; // Change this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){\n  if(typeof myStr === 'string') {\n    console.log(\"myStr = \\\"\" + myStr + \"\\\"\");\n  } else {\n    console.log(\"myStr is undefined\");\n  }\n})();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b4",
+      "title": "Quoting Strings with Single Quotes",
+      "description": [
+        "<dfn>String</dfn> values in JavaScript may be written with single or double quotes, as long as you start and end with the same type of quote. Unlike some other programming languages, single and double quotes work the same in JavaScript.",
+        "<blockquote>doubleQuoteStr = \"This is a string\"; <br/>singleQuoteStr = 'This is also a string';</blockquote>",
+        "The reason why you might want to use one type of quote over the other is if you want to use both in a string. This might happen if you want to save a conversation in a string and have the conversation in quotes. Another use for it would be saving an <code>&#60;a&#62;</code> tag with various attributes in quotes, all within a string.",
+        "<blockquote>conversation = 'Finn exclaims to Jake, \"Algebraic!\"';</blockquote>",
+        "However, this becomes a problem if you need to use the outermost quotes within it. Remember, a string has the same kind of quote at the beginning and end. But if you have that same quote somewhere in the middle, the string will stop early and throw an error.",
+        "<blockquote>goodStr = 'Jake asks Finn, \"Hey, let\\'s go on an adventure?\"'; <br/>badStr = 'Finn responds, \"Let's go!\"'; // Throws an error</blockquote>",
+        "In the <dfn>goodStr</dfn> above, you can use both quotes safely by using the backslash <code>\\</code> as an escape character.",
+        "<strong>Note</strong><br/>The backslash <code>\\</code> should not be be confused with the forward slash <code>/</code>. They do not do the same thing.",
+        "<hr>",
+        "Change the provided string to a string with single quotes at the beginning and end and no escape characters.",
+        "Right now, the <code>&#60;a&#62;</code> tag in the string uses double quotes everywhere. You will need to change the outer quotes to single quotes so you can remove the escape characters."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myStr = '<a href=\"http://www.example.com\" target=\"_blank\">Link</a>';"
+      ],
+      "tests": [
+        {
+          "text": "Remove all the <code>backslashes</code> (<code>\\</code>)'",
+          "testString": "assert(!/\\\\/g.test(code) && myStr.match('\\\\s*<a href\\\\s*=\\\\s*\"http://www.example.com\"\\\\s*target\\\\s*=\\\\s*\"_blank\">\\\\s*Link\\\\s*</a>\\\\s*'), 'Remove all the <code>backslashes</code> (<code>\\</code>)')"
+        },
+        {
+          "text": "You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>'",
+          "testString": "assert(code.match(/\"/g).length === 4 && code.match(/'/g).length === 2, 'You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Citando cadenas con comillas simples",
+          "description": [
+            "Los valores de <dfn>Cadenas</dfn> en JavaScript pueden ser escritos con comillas o apóstrofes, siempre y cuando inicien y terminen con el mismo tipo de cita. A diferencia de algunos lenguajes, apóstrofes y comillas son funcionalmente identicas en JavaScript.",
+            "<code>\"Esta cadena tiene \\\"comillas\\\" en esta\"</code>",
+            "La ventaja de usar una o la otra tiene que ver con la necesidad de <code>escapar</code> comillas. Si tu tienes una cadena con algunas comillas, esta puede ser difícil de leer y escribir. En su lugar, usa apóstrofes:",
+            "<code>'Esta cadena tiene \"comillas\" en esta. Y \"probablemente\" muchas de ellas.'</code>",
+            "<h4>Instrucciones</h4>",
+            "Cambia la cadena dada de comillas a apóstrofes y quita el escape."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myStr = \"<a href=\\\"http://www.example.com\\\" target=\\\"_blank\\\">Link</a>\";",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function() { return \"myStr = \" + myStr; })();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b6",
+      "title": "Escape Sequences in Strings",
+      "description": [
+        "Quotes are not the only characters that can be <dfn>escaped</dfn> inside a string. There are two reasons to use escaping characters: First is to allow you to use characters you might not otherwise be able to type out, such as a backspace. Second is to allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean. We learned this in the previous challenge.",
+        "<table class=\"table table-striped\"><thead><tr><th>Code</th><th>Output</th></tr></thead><tbody><tr><td><code>\\'</code></td><td>single quote</td></tr><tr><td><code>\\\"</code></td><td>double quote</td></tr><tr><td><code>\\\\</code></td><td>backslash</td></tr><tr><td><code>\\n</code></td><td>newline</td></tr><tr><td><code>\\r</code></td><td>carriage return</td></tr><tr><td><code>\\t</code></td><td>tab</td></tr><tr><td><code>\\b</code></td><td>backspace</td></tr><tr><td><code>\\f</code></td><td>form feed</td></tr></tbody></table>",
+        "<em>Note that the backslash itself must be escaped in order to display as a backslash.</em>",
+        "<hr>",
+        "Assign the following three lines of text into the single variable <code>myStr</code> using escape sequences.",
+        "<blockquote>FirstLine<br/>&nbsp;&nbsp;&nbsp;&nbsp;\\SecondLine<br/>ThirdLine</blockquote>",
+        "You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.",
+        "Here is the text with the escape sequences written out.",
+        "<q>FirstLine<code>newline</code><code>tab</code><code>backslash</code>SecondLine<code>newline</code>ThirdLine</q>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myStr = \"FirstLine\\n\\t\\\\SecondLine\\nThirdLine\";"
+      ],
+      "tests": [
+        {
+          "text": "<code>myStr</code> should not contain any spaces'",
+          "testString": "assert(!/ /.test(myStr), '<code>myStr</code> should not contain any spaces')"
+        },
+        {
+          "text": "<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)'",
+          "testString": "assert(/FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr), '<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)')"
+        },
+        {
+          "text": "<code>FirstLine</code> should be followed by the newline character <code>\\n</code>'",
+          "testString": "assert(/FirstLine\\n/.test(myStr), '<code>FirstLine</code> should be followed by the newline character <code>\\n</code>')"
+        },
+        {
+          "text": "<code>myStr</code> should contain a tab character <code>\\t</code> which follows a newline character'",
+          "testString": "assert(/\\n\\t/.test(myStr), '<code>myStr</code> should contain a tab character <code>\\t</code> which follows a newline character')"
+        },
+        {
+          "text": "<code>SecondLine</code> should be preceded by the backslash character <code>\\\\</code>'",
+          "testString": "assert(/\\SecondLine/.test(myStr), '<code>SecondLine</code> should be preceded by the backslash character <code>\\\\</code>')"
+        },
+        {
+          "text": "There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>'",
+          "testString": "assert(/SecondLine\\nThirdLine/.test(myStr), 'There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Secuencias de escape en cadenas",
+          "description": [
+            "Las comillas no son el único caracter que puede ser <dfn>escapado</dfn> dentro de una cadena. Aquí ahí una tabla de secuencias de escape comunes:",
+            "<table class=\"table table-striped\"><thead><tr><th>Código</th><th>Salida</th></tr></thead><tbody><tr><td>\\'</td><td>apostrofe</td></tr><tr><td>\\\"</td><td>comilla</td></tr><tr><td>\\\\</td><td>barra invertida</td></tr><tr><td>\\n</td><td>nueva línea</td></tr><tr><td>\\r</td><td>retorno de carro</td></tr><tr><td>\\t</td><td>tabulación</td></tr><tr><td>\\b</td><td>retroceso</td></tr><tr><td>\\f</td><td>salto de página</td></tr></tbody></table>",
+            "<em>Nota que la barra invertida por si misma tiene que ser escapada con el fin de mostrarse como una barra invertida.</em>",
+            "<h4>Instrucciones</h4>",
+            "Codifica la siguiente secuencia, separada por espacios:<br><q>FirstLine<code>nueva línea</code><code>tabulación</code><code>barra invertida</code>SecondLine<code>nueva línea</code>ThirdLine</q>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myStr; // Change this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){\nif (myStr !== undefined){\nconsole.log('myStr:\\n' + myStr);}})();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b7",
+      "title": "Concatenating Strings with Plus Operator",
+      "description": [
+        "In JavaScript, when the <code>+</code> operator is used with a <code>String</code> value, it is called the <dfn>concatenation</dfn> operator. You can build a new string out of other strings by <dfn>concatenating</dfn> them together.",
+        "<strong>Example</strong>",
+        "<blockquote>'My name is Alan,' + ' I concatenate.'</blockquote>",
+        "<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.",
+        "<hr>",
+        "Build <code>myStr</code> from the strings <code>\"This is the start. \"</code> and <code>\"This is the end.\"</code> using the <code>+</code> operator."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var ourStr = \"I come first. \" + \"I come second.\";\nvar myStr = \"This is the start. \" + \"This is the end.\";"
+      ],
+      "tests": [
+        {
+          "text": "<code>myStr</code> should have a value of <code>This is the start. This is the end.</code>'",
+          "testString": "assert(myStr === \"This is the start. This is the end.\", '<code>myStr</code> should have a value of <code>This is the start. This is the end.</code>')"
+        },
+        {
+          "text": "Use the <code>+</code> operator to build <code>myStr</code>'",
+          "testString": "assert(code.match(/([\"']).*([\"'])\\s*\\+\\s*([\"']).*([\"'])/g).length > 1, 'Use the <code>+</code> operator to build <code>myStr</code>')"
+        },
+        {
+          "text": "<code>myStr</code> should be created using the <code>var</code> keyword.'",
+          "testString": "assert(/var\\s+myStr/.test(code), '<code>myStr</code> should be created using the <code>var</code> keyword.')"
+        },
+        {
+          "text": "Make sure to assign the result to the <code>myStr</code> variable.'",
+          "testString": "assert(/myStr\\s*=/.test(code), 'Make sure to assign the result to the <code>myStr</code> variable.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Concatenar cadenas con el operador más",
+          "description": [
+            "En JavaScript, cuando el operador <code>+</code> es usado con un valor de <code>Cadena</code>, este es llamado el operador <dfn>concatenación</dfn>. Tu puedes construir una nueva cadena de otras cadenas <dfn>concatenandolas</dfn> juntas.",
+            "<strong>Ejemplo</strong>",
+            "<blockquote>'Mi nombre es Alan,' + ' Yo concateno.'<blockquote>",
+            "<strong>Nota</strong><br>Cuidado con los espacios. La concatenación no agrega espacios entre cadenas concatenadas, así que necesitarás agregarlos tu mismo.",
+            "<h4>Instrucciones</h4>",
+            "Construye <code>myStr</code> con las cadenas <code>\"This is the start. \"</code> y <code>\"This is the end.\"</code> usando el operador<code>+</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourStr = \"I come first. \" + \"I come second.\";",
+            "",
+            "// Only change code below this line",
+            "",
+            "var myStr;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){\n  if(typeof myStr === 'string') {\n    return 'myStr = \"' + myStr + '\"';\n  } else {\n    return 'myStr is not a string';\n  }\n})();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b8",
+      "title": "Concatenating Strings with the Plus Equals Operator",
+      "description": [
+        "We can also use the <code>+=</code> operator to <dfn>concatenate</dfn> a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines.",
+        "<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.",
+        "<hr>",
+        "Build <code>myStr</code> over several lines by concatenating these two strings: <code>\"This is the first sentence. \"</code> and <code>\"This is the second sentence.\"</code> using the <code>+=</code> operator. Use the <code>+=</code> operator similar to how it is shown in the editor. Start by assigning the first string to <code>myStr</code>, then add on the second string."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var ourStr = \"I come first. \";\nourStr += \"I come second.\";\n\nvar myStr = \"This is the first sentence. \";\nmyStr += \"This is the second sentence.\";"
+      ],
+      "tests": [
+        {
+          "text": "<code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>'",
+          "testString": "assert(myStr === \"This is the first sentence. This is the second sentence.\", '<code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>')"
+        },
+        {
+          "text": "Use the <code>+=</code> operator to build <code>myStr</code>'",
+          "testString": "assert(code.match(/\\w\\s*\\+=\\s*[\"']/g).length > 1 && code.match(/\\w\\s*\\=\\s*[\"']/g).length > 1, 'Use the <code>+=</code> operator to build <code>myStr</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Concatenar cadenas con el operador mas igual",
+          "description": [
+            "Nosotros también podemos usar el operador <code>+=</code> para <dfn>concatenar</dfn> una cadena al final de una variable de cadena existente. Esto puede ser muy útil para romper una cadena larga sobre varias líneas.",
+            "<strong>Nota</strong><br>Cuidado con los espacios. La concatenación no agrega espacios entre cadenas concatenadas, así que necesitarás añadirlos tu mismo.",
+            "<h4>Instrucciones</h4>",
+            "Construye <code>myStr</code> sobre varias líneas concatenando estas dos cadenas:<br><code>\"This is the first sentence. \"</code> y <code>\"This is the second sentence.\"</code> usando el operador <code>+=</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourStr = \"I come first. \";",
+            "ourStr += \"I come second.\";",
+            "",
+            "// Only change code below this line",
+            "",
+            "var myStr;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){\n  if(typeof myStr === 'string') {\n    return 'myStr = \"' + myStr + '\"';\n  } else {\n    return 'myStr is not a string';\n  }\n})();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244b9",
+      "title": "Constructing Strings with Variables",
+      "description": [
+        "Sometimes you will need to build a string, <a href=\"https://en.wikipedia.org/wiki/Mad_Libs\" target=\"_blank\">Mad Libs</a> style. By using the concatenation operator (<code>+</code>), you can insert one or more variables into a string you're building.",
+        "<hr>",
+        "Set <code>myName</code> to a string equal to your name and build <code>myStr</code> with <code>myName</code> between the strings <code>\"My name is \"</code> and <code>\" and I am well!\"</code>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myName = \"Bob\";\nvar myStr = \"My name is \" + myName + \" and I am well!\";"
+      ],
+      "tests": [
+        {
+          "text": "<code>myName</code> should be set to a string at least 3 characters long'",
+          "testString": "assert(typeof myName !== 'undefined' && myName.length > 2, '<code>myName</code> should be set to a string at least 3 characters long')"
+        },
+        {
+          "text": "Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it'",
+          "testString": "assert(code.match(/[\"']\\s*\\+\\s*myName\\s*\\+\\s*[\"']/g).length > 0, 'Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Construir cadenas con variables",
+          "description": [
+            "A veces necesitarás construir una cadena, al estilo <a href=\"https://en.wikipedia.org/wiki/Mad_Libs\" target=\"_blank\">Mad Libs</a>. Mediante el uso del operador concatenación (<code>+</code>), puedes insertar una o más variables dentro de una cadena que estés construyendo.",
+            "<h4>Instrucciones</h4>",
+            "Asigna <code>myName</code> a una cadena igual a tu nombre y construye <code>myStr</code> con <code>myName</code> entre las cadenas <code>\"My name is \"</code> and <code>\" and I am well!\"</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourName = \"freeCodeCamp\";",
+            "var ourStr = \"Hello, our name is \" + ourName + \", how are you?\";",
+            "",
+            "// Only change code below this line",
+            "var myName;",
+            "var myStr;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){\n  var output = [];\n  if(typeof myName === 'string') {\n    output.push('myName = \"' + myName + '\"');\n  } else {\n    output.push('myName is not a string');\n  }\n  if(typeof myStr === 'string') {\n    output.push('myStr = \"' + myStr + '\"');\n  } else {\n    output.push('myStr is not a string');\n  }\n  return output.join('\\n');\n})();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244ed",
+      "title": "Appending Variables to Strings",
+      "description": [
+        "Just as we can build a string over multiple lines out of string <dfn>literals</dfn>, we can also append variables to a string using the plus equals (<code>+=</code>) operator.",
+        "<hr>",
+        "Set <code>someAdjective</code> and append it to <code>myStr</code> using the <code>+=</code> operator."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var anAdjective = \"awesome!\";\nvar ourStr = \"freeCodeCamp is \";\nourStr += anAdjective;\n\nvar someAdjective = \"neat\";\nvar myStr = \"Learning to code is \";\nmyStr += someAdjective;"
+      ],
+      "tests": [
+        {
+          "text": "<code>someAdjective</code> should be set to a string at least 3 characters long'",
+          "testString": "assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2, '<code>someAdjective</code> should be set to a string at least 3 characters long')"
+        },
+        {
+          "text": "Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator'",
+          "testString": "assert(code.match(/myStr\\s*\\+=\\s*someAdjective\\s*/).length > 0, 'Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Anexando variables a cadenas",
+          "description": [
+            "Al igual que podemos construir una cadena en múltiples líneas a partir de cadenas <dfn>literales</dfn>, nosotros podemos ademas anexar variables a una cadena usando el operador más igual (<code>+=</code>).",
+            "<h4>Instructiones</h4>",
+            "Asigna <code>someAdjective</code> y anexalo a <code>myStr</code> usando el operador <code>+=</code>."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/appending-variables-to-strings",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var anAdjective = \"awesome!\";",
+            "var ourStr = \"freeCodeCamp is \";",
+            "ourStr += anAdjective;",
+            "",
+            "// Only change code below this line",
+            "",
+            "var someAdjective;",
+            "var myStr = \"Learning to code is \";",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){\n  var output = [];\n  if(typeof someAdjective === 'string') {\n    output.push('someAdjective = \"' + someAdjective + '\"');\n  } else {\n    output.push('someAdjective is not a string');\n  }\n  if(typeof myStr === 'string') {\n    output.push('myStr = \"' + myStr + '\"');\n  } else {\n    output.push('myStr is not a string');\n  }\n  return output.join('\\n');\n})();"
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c448eddfaeb5bdef",
+      "title": "Find the Length of a String",
+      "description": [
+        "You can find the length of a <code>String</code> value by writing <code>.length</code> after the string variable or string literal.",
+        "<code>\"Alan Peter\".length; // 10</code>",
+        "For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string <code>\"Charles\"</code> is by using the <code>firstName.length</code> property.",
+        "<hr>",
+        "Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable and assign it to <code>lastNameLength</code>."
+      ],
+      "solutions": [
+        "var firstNameLength = 0;\nvar firstName = \"Ada\";\nfirstNameLength = firstName.length;\n\nvar lastNameLength = 0;\nvar lastName = \"Lovelace\";\nlastNameLength = lastName.length;"
+      ],
+      "tests": [
+        {
+          "text": "<code>lastNameLength</code> should be equal to eight.'",
+          "testString": "assert((function(){if(typeof lastNameLength !== \"undefined\" && typeof lastNameLength === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), '<code>lastNameLength</code> should be equal to eight.')"
+        },
+        {
+          "text": "You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.'",
+          "testString": "assert((function(){if(code.match(/\\.length/gi) && code.match(/\\.length/gi).length >= 2 && code.match(/var lastNameLength \\= 0;/gi) && code.match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Comprueba la propiedad longitud (length) de una variable tipo cadena",
+          "description": [
+            "Las <code>estructuras de datos</code> tienen <code>propiedades</code>. Por ejemplo, las <code>cadenas</code> tienen una propiedad llamada <code>.length </code> que te dirá cuántos caracteres hay en la cadena.",
+            "Por ejemplo, si creamos una variable <code>var firstName=\"Charles\"</code>, podemos averiguar la longitud de la cadena \"Charles\" usando la propiedad <code>firstName.length</code>. ",
+            "Usa la propiedad <code>.length</code> para contar el número de caracteres en el variable <code>lastName</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var firstNameLength = 0;",
+            "var firstName = \"Ada\";",
+            "",
+            "firstNameLength = firstName.length;",
+            "",
+            "// Setup",
+            "var lastNameLength = 0;",
+            "var lastName = \"Lovelace\";",
+            "",
+            "// Only change code below this line.",
+            "",
+            "lastNameLength = lastName;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof lastNameLength !== \"undefined\"){(function(){return lastNameLength;})();}"
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c549eddfaeb5bdef",
+      "title": "Use Bracket Notation to Find the First Character in a String",
+      "description": [
+        "<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.",
+        "Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as <dfn>Zero-based</dfn> indexing.",
+        "For example, the character at index 0 in the word \"Charles\" is \"C\". So if <code>var firstName = \"Charles\"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.",
+        "<hr>",
+        "Use <dfn>bracket notation</dfn> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.",
+        "<strong>Hint</strong><br>Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck."
+      ],
+      "solutions": [
+        "var firstLetterOfLastName = \"\";\nvar lastName = \"Lovelace\";\n\n// Only change code below this line\nfirstLetterOfLastName = lastName[0];"
+      ],
+      "tests": [
+        {
+          "text": "The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.'",
+          "testString": "assert(firstLetterOfLastName === 'L', 'The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.')"
+        },
+        {
+          "text": "You should use bracket notation.'",
+          "testString": "assert(code.match(/firstLetterOfLastName\\s*?=\\s*?lastName\\[.*?\\]/), 'You should use bracket notation.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Usa la notación de corchetes para encontrar el primer carácter de una cadena",
+          "description": [
+            "La <code>notación de corchetes</code> es una forma de obtener el caracter en un <code>índice</code> específico de una cadena.",
+            "Los computadoras no empiezan a contar desde 1 como hacen los humanos. Comienzan en 0 ",
+            "Por ejemplo, el caracter en el índice 0 en la palabra \"Charles \" es \"C\". Entonces si <code>var firstName = \"Charles\"</code>, puedes obtener la primera letra de la cadena usando <code>firstName[0]</code> .",
+            "Usa la <code>notación de corchetes</code> para encontrar el primer caracter en la variable <code>lastName</code> y asignarlo a <code>firstLetterOfLastName</code>.",
+            "Si te atascas intenta mirar la declaración de la variable <code>firstLetterOfFirstName</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var firstLetterOfFirstName = \"\";",
+            "var firstName = \"Ada\";",
+            "",
+            "firstLetterOfFirstName = firstName[0];",
+            "",
+            "// Setup",
+            "var firstLetterOfLastName = \"\";",
+            "var lastName = \"Lovelace\";",
+            "",
+            "// Only change code below this line",
+            "firstLetterOfLastName = lastName;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(v){return v;})(firstLetterOfLastName);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244ba",
+      "title": "Understand String Immutability",
+      "description": [
+        "In JavaScript, <code>String</code> values are <dfn>immutable</dfn>, which means that they cannot be altered once created.",
+        "For example, the following code:",
+        "<blockquote>var myStr = \"Bob\";<br>myStr[0] = \"J\";</blockquote>",
+        "cannot change the value of <code>myStr</code> to \"Job\", because the contents of <code>myStr</code> cannot be altered. Note that this does <em>not</em> mean that <code>myStr</code> cannot be changed, just that the individual characters of a <dfn>string literal</dfn> cannot be changed. The only way to change <code>myStr</code> would be to assign it with a new string, like this:",
+        "<blockquote>var myStr = \"Bob\";<br>myStr = \"Job\";</blockquote>",
+        "<hr>",
+        "Correct the assignment to <code>myStr</code> so it contains the string value of <code>Hello World</code> using the approach shown in the example above."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myStr = \"Jello World\";\nmyStr = \"Hello World\";"
+      ],
+      "tests": [
+        {
+          "text": "<code>myStr</code> should have a value of <code>Hello World</code>'",
+          "testString": "assert(myStr === \"Hello World\", '<code>myStr</code> should have a value of <code>Hello World</code>')"
+        },
+        {
+          "text": "Do not change the code above the line'",
+          "testString": "assert(/myStr = \"Jello World\"/.test(code), 'Do not change the code above the line')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Comprender la inmutabilidad de cadenas",
+          "description": [
+            "En JavaScript, los valores de las <code>Cadenas</code> son <dfn>inmutables</dfn>, lo cual significa que ellos no pueden ser alterados una vez creados.",
+            "Por ejemplo, el siguiente código:",
+            "<blockquote>var miCad = \"Bob\";<br>myCad[0] = \"J\";</blockquote>",
+            "no puede cambiar el valor de <code>miCad</code> a \"Job\" porque el contenido de <code>miCad</code> no puede ser alterado. Nota que esto <em>no</em> significa que <code>miCad</code> no puede ser cambiado, solo que los valores individuales de una <dfn>cadena literal</dfn> no pueden ser cambiados. La única manera de cambiar <code>miCad</code> sería asignandola a una nueva cadena, como esta:",
+            "<blockquote>var miCad = \"Bob\";<br>miCad = \"Job\";</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Corrige la asignación de <code>myStr</code> para lograr el efecto deseado."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var myStr = \"Jello World\";",
+            "",
+            "// Only change code below this line",
+            "",
+            "myStr[0] = \"H\"; // Fix Me",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(v){return \"myStr = \" + v;})(myStr);"
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c450eddfaeb5bdef",
+      "title": "Use Bracket Notation to Find the Nth Character in a String",
+      "description": [
+        "You can also use <dfn>bracket notation</dfn> to get the character at other positions within a string.",
+        "Remember that computers start counting at <code>0</code>, so the first character is actually the zeroth character.",
+        "<hr>",
+        "Let's try to set <code>thirdLetterOfLastName</code> to equal the third letter of the <code>lastName</code> variable using bracket notation.",
+        "<strong>Hint</strong><br>Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
+      ],
+      "solutions": [
+        "var lastName = \"Lovelace\";\nvar thirdLetterOfLastName = lastName[2];"
+      ],
+      "tests": [
+        {
+          "text": "The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.'",
+          "testString": "assert(thirdLetterOfLastName === 'v', 'The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.')"
+        },
+        {
+          "text": "You should use bracket notation.'",
+          "testString": "assert(code.match(/thirdLetterOfLastName\\s*?=\\s*?lastName\\[.*?\\]/), 'You should use bracket notation.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Usar la notación de corchetes para encontrar el n-ésimo caracter en una cadena",
+          "description": [
+            "También puede usar <code>notación de corchetes</code> para obtener el caracter en otras posiciones dentro de una cadena.",
+            "Recuerda que los computadores empiezan a contar a 0, por lo que el primer caracter es en realidad el caracter cero.",
+            "<h4>Instrucciones</h4>",
+            "Vamos a tratar de asignar a <code>thirdLetterOfLastName</code> la <code>tercera letra</code> de la variable <code>lastName</code>.",
+            "<strong>Pista</strong><br>Si te atascas intenta mirar la declaración de la variable <code>secondLetterOfFirstName</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var firstName = \"Ada\";",
+            "var secondLetterOfFirstName = firstName[1];",
+            "",
+            "// Setup",
+            "var lastName = \"Lovelace\";",
+            "",
+            "// Only change code below this line.",
+            "var thirdLetterOfLastName = lastName;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(v){return v;})(thirdLetterOfLastName);"
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c451eddfaeb5bdef",
+      "title": "Use Bracket Notation to Find the Last Character in a String",
+      "description": [
+        "In order to get the last letter of a string, you can subtract one from the string's length.",
+        "For example, if <code>var firstName = \"Charles\"</code>, you can get the value of the last letter of the string by using <code>firstName[firstName.length - 1]</code>.",
+        "<hr>",
+        "Use <dfn>bracket notation</dfn> to find the last character in the <code>lastName</code> variable.",
+        "<strong>Hint</strong><br>Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck."
+      ],
+      "solutions": [
+        "var firstName = \"Ada\";\nvar lastLetterOfFirstName = firstName[firstName.length - 1];\n\nvar lastName = \"Lovelace\";\nvar lastLetterOfLastName = lastName[lastName.length - 1];"
+      ],
+      "tests": [
+        {
+          "text": "<code>lastLetterOfLastName</code> should be \"e\".'",
+          "testString": "assert(lastLetterOfLastName === \"e\", '<code>lastLetterOfLastName</code> should be \"e\".')"
+        },
+        {
+          "text": "You have to use <code>.length</code> to get the last letter.'",
+          "testString": "assert(code.match(/\\.length/g).length === 2, 'You have to use <code>.length</code> to get the last letter.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Usa notación de corchetes para encontrar el último caracter de una cadena",
+          "description": [
+            "Con el fin de conseguir la última letra de una cadena, puedes restar uno a la longitud de la cadena.",
+            "Por ejemplo, si <code>var firstName = \"Charles\"</code>, se puede obtener la última letra usando <code>firstName[firstName.length - 1]</code>. ",
+            "<h4>Instrucciones</h4>",
+            "Utiliza <code>notación de corchetes</code> para encontrar el último caracter de la variabel <code>lastName</code>.",
+            "Si te atascas intenta mirando la declaración de la variable <code>lastLetterOfFirstName</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var firstName = \"Ada\";",
+            "var lastLetterOfFirstName = firstName[firstName.length - 1];",
+            "",
+            "// Setup",
+            "var lastName = \"Lovelace\";",
+            "",
+            "// Only change code below this line.",
+            "var lastLetterOfLastName = lastName;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(v){return v;})(lastLetterOfLastName);"
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c452eddfaeb5bdef",
+      "title": "Use Bracket Notation to Find the Nth-to-Last Character in a String",
+      "description": [
+        "You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character.",
+        "For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>",
+        "<hr>",
+        "Use <dfn>bracket notation</dfn> to find the second-to-last character in the <code>lastName</code> string.",
+        "<strong>Hint</strong><br>Try looking at the <code>thirdToLastLetterOfFirstName</code> variable declaration if you get stuck."
+      ],
+      "solutions": [
+        "var firstName = \"Ada\";\nvar thirdToLastLetterOfFirstName = firstName[firstName.length - 3];\n\nvar lastName = \"Lovelace\";\nvar secondToLastLetterOfLastName = lastName[lastName.length - 2];"
+      ],
+      "tests": [
+        {
+          "text": "<code>secondToLastLetterOfLastName</code> should be \"c\".'",
+          "testString": "assert(secondToLastLetterOfLastName === 'c', '<code>secondToLastLetterOfLastName</code> should be \"c\".')"
+        },
+        {
+          "text": "You have to use <code>.length</code> to get the second last letter.'",
+          "testString": "assert(code.match(/\\.length/g).length === 2, 'You have to use <code>.length</code> to get the second last letter.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Usa notación de corchetes para encontrar el n-ésimo último caracter de una cadena",
+          "description": [
+            "Puede utilizar el mismo principio utilizamos para recuperar el último caracter de una cadena para recuperar el n-ésimo último caracter.",
+            "Por ejemplo, se puede obtener el valor de la tercera última letra de la cadena <code>var firstName = \"Charles\"</code> utilizando <code>firstName[firstName.length - 3]</code> ",
+            "<h4>Instrucciones</h4>",
+            "Usa <code>notación de corchete</code> para encontrar el segundo último caracter de la cadena en <code>lastName</code>.",
+            "<strong>Pista</strong><br>Si te atascas intenta mirando la declaración de la variable <code>thirdToLastLetterOfFirstName</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var firstName = \"Ada\";",
+            "var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];",
+            "",
+            "// Setup",
+            "var lastName = \"Lovelace\";",
+            "",
+            "// Only change code below this line",
+            "var secondToLastLetterOfLastName = lastName;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(v){return v;})(secondToLastLetterOfLastName);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244bb",
+      "title": "Word Blanks",
+      "description": [
+        "We will now use our knowledge of strings to build a \"<a href='https://en.wikipedia.org/wiki/Mad_Libs' target='_blank'>Mad Libs</a>\" style word game we're calling \"Word Blanks\". You will create an (optionally humorous) \"Fill in the Blanks\" style sentence. Here's an example of an incomplete sentence.",
+        "In a \"Mad Libs\" game, you are provided sentences with some missing words, like nouns, verbs, adjectives and adverbs. You then fill in the missing pieces with words of your choice in a way that the completed sentence makes sense.",
+        "Consider this sentence - \"It was really <strong>____</strong>, and we <strong>____</strong> ourselves <strong>____</strong>\". This sentence has three missing pieces- an adjective, a verb and an adverb, and we can add words of our choice to complete it. We can then assign the completed sentence to a variable as follows:",
+        "<blockquote>var sentence = \"It was really\" + \"hot\" + \", and we\" + \"laughed\" + \"ourselves\" + \"silly.\";</blockquote>",
+        "<hr>",
+        "In this challenge, we provide you with a noun, a verb, an adjective and an adverb. You need to form a complete sentence using words of your choice, along with the words we provide.",
+        "You will need to use the string concatenation operator <code>+</code> to build a new string, using the provided variables: <code>myNoun</code>, <code>myAdjective</code>, <code>myVerb</code>, and <code>myAdverb</code>. You will then assign the formed string to the <code>result</code> variable.",
+        "You will also need to account for spaces in your string, so that the final sentence has spaces between all the words. The result should be a complete sentence."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {\n  var result = \"\";\n\n  result = \"Once there was a \" + myNoun + \" which was very \" + myAdjective + \". \";\n  result += \"It \" + myVerb + \" \" + myAdverb + \" around the yard.\";\n\n  return result;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string.'",
+          "testString": "assert(typeof wordBlanks(\"\", '<code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string.')"
+        },
+        {
+          "text": "<code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).'",
+          "testString": "assert(/\\bdog\\b/.test(test1) && /\\bbig\\b/.test(test1) && /\\bran\\b/.test(test1) && /\\bquickly\\b/.test(test1), '<code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).')"
+        },
+        {
+          "text": "<code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).'",
+          "testString": "assert(/\\bcat\\b/.test(test2) && /\\blittle\\b/.test(test2) && /\\bhit\\b/.test(test2) && /\\bslowly\\b/.test(test2), '<code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Espacios en blanco de palabras",
+          "description": [
+            "Ahora usaremos nuestro conocimiento de cadenas para construir un juego de palabras estilo \"<a href='https://en.wikipedia.org/wiki/Mad_Libs' target='_blank'>Mad Libs</a>\" que llamaremos \"Espacios en Blanco de Palabras\". Vas a crear unas oraciones estilo (opcionalmente graciosa) \"Llena los espacios en blanco\".",
+            "Necesitarás usar operadores de cadenas para construir una nueva cadena <code>result</code>, usando las variables previstas: <code>myNoun</code>, <code>myAdjective</code>, <code>myVerb</code> y <code>myAdverb</code>.",
+            "Además, necesitarás proporcionar cadenas adicionales, las cuales no cambiarán entre las palabras proporcionadas.",
+            "Nosotros hemos proporcionado un marco de referencia para probar tus resultados con diferentes palabras. La prueba correrá tu función con varias palabras diferentes para asegurarse  que todas las palabras proporcionadas aparezcan en la salida, así como en tus cadenas adicionales."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {",
+            "  // Your code below this line",
+            "  var result = \"\";",
+            "",
+            "  // Your code above this line",
+            "  return result;",
+            "}",
+            "",
+            "// Change the words here to test your function",
+            "wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\");"
+          ],
+          "head": "",
+          "tail": "var test1 = wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\");\nvar test2 = wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\");"
+        }
+      }
+    },
+    {
+      "id": "bd7993c9c69feddfaeb8bdef",
+      "title": "Store Multiple Values in one Variable using JavaScript Arrays",
+      "description": [
+        "With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
+        "You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this: ",
+        "<code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
+        "<hr>",
+        "Modify the new array <code>myArray</code> so that it contains both a <code>string</code> and a <code>number</code> (in that order).",
+        "<strong>Hint</strong><br>Refer to the example code in the text editor if you get stuck."
+      ],
+      "solutions": [
+        "var myArray = [\"The Answer\", 42];"
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray</code> should be an <code>array</code>.'",
+          "testString": "assert(typeof myArray == 'object', '<code>myArray</code> should be an <code>array</code>.')"
+        },
+        {
+          "text": "The first item in <code>myArray</code> should be a <code>string</code>.'",
+          "testString": "assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string', 'The first item in <code>myArray</code> should be a <code>string</code>.')"
+        },
+        {
+          "text": "The second item in <code>myArray</code> should be a <code>number</code>.'",
+          "testString": "assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number', 'The second item in <code>myArray</code> should be a <code>number</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Almacena múltiples valores en una variable utilizando vectores en JavaScript",
+          "description": [
+            "Con las variables tipo <code>vector</code> (o en inglés <code>array</code>) podemos almacenar diversos datos en un solo lugar.",
+            "Empiezas la declaración de un vector con un corchete de apertura, y terminas con un corchete de cierre, y pones una coma entre cada entrada, así: <code>var sandwich = [\"mantequilla de maní\", \"jalea\" , \"pan\"]</code>. ",
+            "<h4>Instrucciones</h4>",
+            "Ahora vamos a crear un nuevo vector llamado <code>myArray</code> que contenga una <code>cadena</code> y un <code>número</code> (en ese orden).",
+            "Consulta el código comentado en el editor de texto si te atascas."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [\"John\", 23];",
+            "",
+            "// Only change code below this line.",
+            "var myArray = [];",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return z;})(myArray);"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb7bdef",
+      "title": "Nest one Array within Another Array",
+      "description": [
+        "You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 23], [\"White Sox\", 45]]</code>. This is also called a <dfn>Multi-dimensional Array<dfn>.",
+        "<hr>",
+        "Create a nested array called <code>myArray</code>."
+      ],
+      "solutions": [
+        "var myArray = [[1,2,3]];"
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray</code> should have at least one array nested within another array.'",
+          "testString": "assert(Array.isArray(myArray) && myArray.some(Array.isArray), '<code>myArray</code> should have at least one array nested within another array.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Anida un vector dentro de otro vector",
+          "description": [
+            "También puedes anidar vectores dentro de otros vectores, como este: <code>[[\"Bulls\", 23], [\"White Sox\", 45]]</code>.",
+            "<h4>Instrucciones</h4>",
+            "Ahora vamos a crear un vector anidado llamado <code>myArray</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [[\"the universe\", 42], [\"everything\", 101010]];",
+            "",
+            "// Only change code below this line.",
+            "var myArray = [];",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\"){(function(){return myArray;})();}"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392ca",
+      "title": "Access Array Data with Indexes",
+      "description": [
+        "We can access the data inside arrays using <code>indexes</code>.",
+        "Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array is element <code>0</code>.",
+        "<strong>Example</strong>",
+        "<blockquote>var array = [50,60,70];<br>array[0]; // equals 50<br>var data = array[1];  // equals 60</blockquote>",
+        "<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
+        "<hr>",
+        "Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code> using bracket notation."
+      ],
+      "solutions": [
+        "var myArray = [50,60,70];\nvar myData = myArray[0];"
+      ],
+      "tests": [
+        {
+          "text": "The variable <code>myData</code> should equal the first value of <code>myArray</code>.'",
+          "testString": "assert((function(){if(typeof myArray !== 'undefined' && typeof myData !== 'undefined' && myArray[0] === myData){return true;}else{return false;}})(), 'The variable <code>myData</code> should equal the first value of <code>myArray</code>.')"
+        },
+        {
+          "text": "The data in variable <code>myArray</code> should be accessed using bracket notation.'",
+          "testString": "assert((function(){if(code.match(/\\s*=\\s*myArray\\[0\\]/g)){return true;}else{return false;}})(), 'The data in variable <code>myArray</code> should be accessed using bracket notation.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Accede a los datos de un vector mediante índices",
+          "description": [
+            "Podemos acceder a los datos dentro de los vectores usando <code>índices</code>.",
+            "Los índices del vector se escriben en la misma notación con corchetes usado con cadenas, excepto que en lugar de especificar un caracter, especifican un elemento del vector.",
+            "Por ejemplo:",
+            "<code>var array = [1,2,3];</code>",
+            "<code>array[0]; //es igual a 1</code>",
+            "<code>var data = array[1];</code>",
+            "<h4>Instrucciones</h4>",
+            "Crea una variable llamada <code>myData</ ​​code> y asignale el primer valor del vector <code>myArray</code>."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [50,60,70];",
+            "var ourData = ourArray[0]; // equals 50",
+            "",
+            "// Setup",
+            "var myArray = [50,60,70];",
+            "",
+            "// Only change code below this line.",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\" && typeof myData !== \"undefined\"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);}"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb8bdef",
+      "title": "Modify Array Data With Indexes",
+      "description": [
+        "Unlike strings, the entries of arrays are <dfn>mutable</dfn> and can be changed freely.",
+        "<strong>Example</strong>",
+        "<blockquote>var ourArray = [50,40,30];<br>ourArray[0] = 15; // equals [15,40,30]</blockquote>",
+        "<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
+        "<hr>",
+        "Modify the data stored at index <code>0</code> of <code>myArray</code> to a value of <code>45</code>."
+      ],
+      "solutions": [
+        "var myArray = [18,64,99];\nmyArray[0] = 45;"
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray</code> should now be [45,64,99].'",
+          "testString": "assert((function(){if(typeof myArray != 'undefined' && myArray[0] == 45 && myArray[1] == 64 && myArray[2] == 99){return true;}else{return false;}})(), '<code>myArray</code> should now be [45,64,99].')"
+        },
+        {
+          "text": "You should be using correct index to modify the value in <code>myArray</code>.'",
+          "testString": "assert((function(){if(code.match(/myArray\\[0\\]\\s*=\\s*/g)){return true;}else{return false;}})(), 'You should be using correct index to modify the value in <code>myArray</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Modifica datos de un vector usando índices",
+          "description": [
+            "También podemos modificar los datos almacenados en vectores usando índices.",
+            "Por ejemplo:",
+            "<code>var ourArray = [3,2,1];</code>",
+            "<code>ourArray[0] = 1; // equals [1,2,1]</code>",
+            "<h4>Instrucciones</h4>",
+            "Ahora establece el dato almacenado en el índice 0 de <code>myArray</code> para que sea el valor 3."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [18,64,99];",
+            "ourArray[1] = 45; // ourArray now equals [18,45,99].",
+            "",
+            "// Setup",
+            "var myArray = [18,64,99];",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\"){(function(){return myArray;})();}"
+        }
+      }
+    },
+    {
+      "id": "56592a60ddddeae28f7aa8e1",
+      "title": "Access Multi-Dimensional Arrays With Indexes",
+      "description": [
+        "One way to think of a <dfn>multi-dimensional</dfn> array, is as an <em>array of arrays</em>. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside.",
+        "<strong>Example</strong>",
+        "<blockquote>var arr = [<br>    [1,2,3],<br>    [4,5,6],<br>    [7,8,9],<br>    [[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>",
+        "<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0][0]</code> and even this <code>array [0] [0]</code> is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
+        "<hr>",
+        "Using bracket notation select an element from <code>myArray</code> such that <code>myData</code> is equal to <code>8</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myArray = [[1,2,3],[4,5,6], [7,8,9], [[10,11,12], 13, 14]];\nvar myData = myArray[2][1];"
+      ],
+      "tests": [
+        {
+          "text": "<code>myData</code> should be equal to <code>8</code>.'",
+          "testString": "assert(myData === 8, '<code>myData</code> should be equal to <code>8</code>.')"
+        },
+        {
+          "text": "You should be using bracket notation to read the correct value from <code>myArray</code>.'",
+          "testString": "assert(/myArray\\[2\\]\\[1\\]/g.test(code) && !/myData\\s*=\\s*(?:.*[-+*/%]|\\d)/g.test(code), 'You should be using bracket notation to read the correct value from <code>myArray</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Acceder a vectores multi-dimensionales con índices",
+          "description": [
+            "Una manera de pensar un vector <dfn>multi-dimensional</dfn>, es como un <em>vector de vectores</em>. Cuando usas corchetes para acceder a tu vector, el primer conjunto de brackets se refiere a las entradas en el vector más externo y cada nivel subsecuente de brackets se refiere al siguiente nivel de vectores internos.",
+            "<strong>Ejemplo</strong>",
+            "<blockquote>var vec = [<br>    [1,2,3],<br>    [4,5,6],<br>    [7,8,9],<br>    [[10,11,12], 13, 14]<br>];<br>vec[0]; // es igual [1,2,3]<br>vec[1][2]; // es igual 6<br>vec[3][0][1]; // es igual 11</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Lee de <code>myArray</code> usando la notación corchete de modo que myData sea igual a <code>8</code>"
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];",
+            "",
+            "// Only change code below this line.",
+            "var myData = myArray[0][0];",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\"){(function(){return \"myData: \" + myData + \" myArray: \" + JSON.stringify(myArray);})();}"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392cb",
+      "title": "Manipulate Arrays With push()",
+      "description": [
+        "An easy way to append data to the end of an array is via the <code>push()</code> function.",
+        "<code>.push()</code> takes one or more <dfn>parameters</dfn> and \"pushes\" them onto the end of the array.",
+        "<blockquote>var arr = [1,2,3];<br>arr.push(4);<br>// arr is now [1,2,3,4]</blockquote>",
+        "<hr>",
+        "Push <code>[\"dog\", 3]</code> onto the end of the <code>myArray</code> variable."
+      ],
+      "solutions": [
+        "var myArray = [[\"John\", 23], [\"cat\", 2]];\nmyArray.push([\"dog\",3]);"
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray</code> should now equal <code>[[\"John\", 23], [\"cat\", 2], [\"dog\", 3]]</code>.'",
+          "testString": "assert((function(d){if(d[2] != undefined && d[0][0] == 'John' && d[0][1] === 23 && d[2][0] == 'dog' && d[2][1] === 3 && d[2].length == 2){return true;}else{return false;}})(myArray), '<code>myArray</code> should now equal <code>[[\"John\", 23], [\"cat\", 2], [\"dog\", 3]]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Manipula vectores con push()",
+          "description": [
+            "No sólo se pueden sacar datos del final de un vector con <code>pop()</code>, también puedes empujar (<code>push()</code>) datos al final del vector.",
+            "<h4>Instrucciones</h4>",
+            "Empuja <code>[\"dog\", 3]</code> al final de la variable <code>myArray</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [\"Stimpson\", \"J\", \"cat\"];",
+            "ourArray.push([\"happy\", \"joy\"]); ",
+            "// ourArray now equals [\"Stimpson\", \"J\", \"cat\", [\"happy\", \"joy\"]]",
+            "",
+            "// Setup",
+            "var myArray = [[\"John\", 23], [\"cat\", 2]];",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392cc",
+      "title": "Manipulate Arrays With pop()",
+      "description": [
+        "Another way to change the data in an array is with the <code>.pop()</code> function.",
+        "<code>.pop()</code> is used to \"pop\" a value off of the end of an array. We can store this \"popped off\" value by assigning it to a variable. In other words, <code>.pop()</code> removes the last element from an array and returns that element.",
+        "Any type of entry can be \"popped\" off of an array - numbers, strings, even nested arrays.",
+        "<blockquote><code>var threeArr = [1, 4, 6];<br> var oneDown = threeArr.pop();<br> console.log(oneDown); // Returns 6<br> console.log(threeArr); // Returns [1, 4]</code></blockquote>",
+        "<hr>",
+        "Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>, assigning the \"popped off\" value to <code>removedFromMyArray</code>."
+      ],
+      "solutions": [
+        "var myArray = [[\"John\", 23], [\"cat\", 2]];\nvar removedFromMyArray = myArray.pop();"
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray</code> should only contain <code>[[\"John\", 23]]</code>.'",
+          "testString": "assert((function(d){if(d[0][0] == 'John' && d[0][1] === 23 && d[1] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should only contain <code>[[\"John\", 23]]</code>.')"
+        },
+        {
+          "text": "Use <code>pop()</code> on <code>myArray</code>'",
+          "testString": "assert(/removedFromMyArray\\s*=\\s*myArray\\s*.\\s*pop\\s*(\\s*)/.test(code), 'Use <code>pop()</code> on <code>myArray</code>')"
+        },
+        {
+          "text": "<code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.'",
+          "testString": "assert((function(d){if(d[0] == 'cat' && d[1] === 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), '<code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Manipula vectores con pop()",
+          "description": [
+            "Otra forma de cambiar los datos en un vector es con la función <code>.pop()</code>.",
+            "<code>.pop()</code> se utiliza para \"sacar\" el valor final de un vector. Podemos almacenar el valor \"sacado\" asignando <code>pop</code> a una variable por ejemplo durante su declaración.",
+            "Todo tipo de datos puede ser \"sacado\" de un vector --números, cadenas, incluso los vectores anidadas.",
+            "<h4>Instrucciones</h4>",
+            "Usa la función <code>.pop()</code> para sacar el último elemento de <code>myArray</code> y asigna ese valor \"sacado\" a <code>removedFromMyArray </code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [1,2,3];",
+            "var removedFromOurArray = ourArray.pop(); ",
+            "// removedFromOurArray now equals 3, and ourArray now equals [1,2]",
+            "",
+            "// Setup",
+            "var myArray = [[\"John\", 23], [\"cat\", 2]];",
+            "",
+            "// Only change code below this line.",
+            "var removedFromMyArray;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392cd",
+      "title": "Manipulate Arrays With shift()",
+      "description": [
+        "<code>pop()</code> always removes the last element of an array. What if you want to remove the first?",
+        "That's where <code>.shift()</code> comes in. It works just like <code>.pop()</code>, except it removes the first element instead of the last.",
+        "<hr>",
+        "Use the <code>.shift()</code> function to remove the first item from <code>myArray</code>, assigning the \"shifted off\" value to <code>removedFromMyArray</code>."
+      ],
+      "solutions": [
+        "var myArray = [[\"John\", 23], [\"dog\", 3]];\n\n// Only change code below this line.\nvar removedFromMyArray = myArray.shift();"
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray</code> should now equal <code>[[\"dog\", 3]]</code>.'",
+          "testString": "assert((function(d){if(d[0][0] == 'dog' && d[0][1] === 3 && d[1] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should now equal <code>[[\"dog\", 3]]</code>.')"
+        },
+        {
+          "text": "<code>removedFromMyArray</code> should contain <code>[\"John\", 23]</code>.'",
+          "testString": "assert((function(d){if(d[0] == 'John' && d[1] === 23 && typeof removedFromMyArray === 'object'){return true;}else{return false;}})(removedFromMyArray), '<code>removedFromMyArray</code> should contain <code>[\"John\", 23]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Manipula vectores con shift()",
+          "description": [
+            "<code>pop()</code> siempre elimina el último elemento de un vector. ¿Qué pasa si quieres quitar el primero?",
+            "Ahí es donde entra <code>.shift()</code>. Funciona igual que <code>.pop ()</code>, excepto que elimina el primer elemento en lugar del pasado. ",
+            "<h4>Instrucciones</h4>",
+            "Usa la función <code>.shift()</code> para eliminar el primer elemento de <code>myArray</code>, y el elemento que saques asignalo a <code>removedFromMyArra</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
+            "removedFromOurArray = ourArray.shift();",
+            "// removedFromOurArray now equals \"Stimpson\" and ourArray now equals [\"J\", [\"cat\"]].",
+            "",
+            "// Setup",
+            "var myArray = [[\"John\", 23], [\"dog\", 3]];",
+            "",
+            "// Only change code below this line.",
+            "var removedFromMyArray;",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392ce",
+      "title": "Manipulate Arrays With unshift()",
+      "description": [
+        "Not only can you <code>shift</code> elements off of the beginning of an array, you can also <code>unshift</code> elements to the beginning of an array i.e. add elements in front of the array.",
+        "<code>.unshift()</code> works exactly like <code>.push()</code>, but instead of adding the element at the end of the array, <code>unshift()</code> adds the element at the beginning of the array.",
+        "<hr>",
+        "Add <code>[\"Paul\",35]</code> to the beginning of the <code>myArray</code> variable using <code>unshift()</code>."
+      ],
+      "solutions": [
+        "var myArray = [[\"John\", 23], [\"dog\", 3]];\nmyArray.shift();\nmyArray.unshift([\"Paul\", 35]);"
+      ],
+      "tests": [
+        {
+          "text": "<code>myArray</code> should now have [[\"Paul\", 35], [\"dog\", 3]].'",
+          "testString": "assert((function(d){if(typeof d[0] === \"object\" && d[0][0] == 'Paul' && d[0][1] === 35 && d[1][0] != undefined && d[1][0] == 'dog' && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray), '<code>myArray</code> should now have [[\"Paul\", 35], [\"dog\", 3]].')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Manipula vectores con unshift()",
+          "description": [
+            "No sólo se puedes <code>correr</code> (shift) elementos del comienzo de un vector, también puedes <code>descorrerlos</code> (unshift) al comienzo.",
+            "<code>unshift()</code> funciona exactamente igual que <code>push()</code>, pero en lugar de añadir el elemento al final del vector, <code>unshift()</code> añade el elemento al comienzo del vector. ",
+            "<h4>Instrucciones</h4>",
+            "Añade <code>\"Paul\"</code> al comienzo de la variable <code>myArray</code> usando <code>unshift()</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [\"Stimpson\", \"J\", \"cat\"];",
+            "ourArray.shift(); // ourArray now equals [\"J\", \"cat\"]",
+            "ourArray.unshift(\"Happy\"); ",
+            "// ourArray now equals [\"Happy\", \"J\", \"cat\"]",
+            "",
+            "// Setup",
+            "var myArray = [[\"John\", 23], [\"dog\", 3]];",
+            "myArray.shift();",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244bc",
+      "title": "Shopping List",
+      "description": [
+        "Create a shopping list in the variable <code>myList</code>. The list should be a multi-dimensional array containing several sub-arrays.",
+        "The first element in each sub-array should contain a string with the name of the item. The second element should be a number representing the quantity i.e.",
+        "<code>[\"Chocolate Bar\", 15]</code>",
+        "There should be at least 5 sub-arrays in the list."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myList = [\n  [\"Candy\", 10],\n  [\"Potatoes\", 12],\n  [\"Eggs\", 12],\n  [\"Catfood\", 1],\n  [\"Toads\", 9]\n];"
+      ],
+      "tests": [
+        {
+          "text": "<code>myList</code> should be an array'",
+          "testString": "assert(isArray, '<code>myList</code> should be an array')"
+        },
+        {
+          "text": "The first elements in each of your sub-arrays must all be strings'",
+          "testString": "assert(hasString, 'The first elements in each of your sub-arrays must all be strings')"
+        },
+        {
+          "text": "The second elements in each of your sub-arrays must all be numbers'",
+          "testString": "assert(hasNumber, 'The second elements in each of your sub-arrays must all be numbers')"
+        },
+        {
+          "text": "You must have at least 5 items in your list'",
+          "testString": "assert(count > 4, 'You must have at least 5 items in your list')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Lista de compras",
+          "description": [
+            "Crea una lista de compras en la variable <code>myList</code>. La lista tiene que ser un vector multidimensional conteniendo varios sub-vectores.",
+            "El primer elemento en cada sub-vector debe contener una cadena con el nombre del elemento. El segundo elemento debe ser un número representando la cantidad i. e.",
+            "<code>[\"Barra de Chocolate\", 15]</code>",
+            "Tiene que haber por lo menos 5 sub-vectores en la lista."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myList = [];",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "var count = 0;\nvar isArray = false;\nvar hasString = false;\nvar hasNumber = false;\n(function(list){\n  if(Array.isArray(myList)) {\n    isArray = true;\n    if(myList.length > 0) {\n      hasString = true;\n      hasNumber = true;\n      myList.forEach(function(elem) {\n        if(typeof elem[0] !== 'string') {\n          hasString = false;\n        }\n        if(typeof elem[1] !== 'number') {\n          hasNumber = false;\n        }\n      });\n    }\n    count = myList.length;\n    return JSON.stringify(myList);\n  } else {\n    return \"myList is not an array\";\n  }\n\n})(myList);"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392cf",
+      "title": "Write Reusable JavaScript with Functions",
+      "description": [
+        "In JavaScript, we can divide up our code into reusable parts called <dfn>functions</dfn>.",
+        "Here's an example of a function:",
+        "<blockquote>function functionName() {<br>  console.log(\"Hello World\");<br>}</blockquote>",
+        "You can call or <dfn>invoke</dfn> this function by using its name followed by parentheses, like this:",
+        "<code>functionName();</code>",
+        "Each time the function is called it will print out the message <code>\"Hello World\"</code> on the dev console. All of the code between the curly braces will be executed every time the function is called.",
+        "<hr>",
+        "<ol><li>Create a function called <code>reusableFunction</code> which prints <code>\"Hi World\"</code> to the dev console.</li><li>Call the function.</li></ol>"
+      ],
+      "solutions": [
+        "function reusableFunction() {\n  console.log(\"Hi World\");\n}\nreusableFunction();"
+      ],
+      "tests": [
+        {
+          "text": "<code>reusableFunction</code> should be a function'",
+          "testString": "assert(typeof reusableFunction === 'function', '<code>reusableFunction</code> should be a function')"
+        },
+        {
+          "text": "<code>reusableFunction</code> should output \"Hi World\" to the dev console'",
+          "testString": "assert(\"Hi World\" === logOutput, '<code>reusableFunction</code> should output \"Hi World\" to the dev console')"
+        },
+        {
+          "text": "Call <code>reusableFunction</code> after you define it'",
+          "testString": "assert(/^\\s*reusableFunction\\(\\)\\s*;/m.test(code), 'Call <code>reusableFunction</code> after you define it')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Escribe código JavaScript reutilizable con funciones",
+          "description": [
+            "En JavaScript, podemos dividir nuestro código en partes reutilizables llamadas funciones.",
+            "He aquí un ejemplo de una función:",
+            "<code>function nombreDeFuncion(a, b) {</code>",
+            "<code>& nbsp; & nbsp; return a + b;</code>",
+            "<code>}</code>",
+            "Después de escribir las líneas anteriores en nuestro código, podemos pasar valores a nuestra función y el resultado que sigue a la instrucción <code>return</code> será retornado.",
+            "Por ejemplo, podemos pasar los números <code>4</code> y <code>2</code> al \"llamar\" la función más adelante en nuestro código, así: <code>nombreDeFuncion(4, 2)</ code >. ",
+            "En este ejemplo, la función devolverá el número <code>6</code>, ya que es el resultado de <code>4 + 2</code>.",
+            "Crea y llama una función de nombre <code>myFunction</code> que devuelva la suma de <code>a</code> y <code>b</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "function ourReusableFunction() {",
+            "  console.log(\"Heyya, World\");",
+            "}",
+            "",
+            "ourReusableFunction();",
+            "",
+            "// Only change code below this line",
+            ""
+          ],
+          "head": "var logOutput = \"\";\nvar originalConsole = console\nfunction capture() {\n    var nativeLog = console.log;\n    console.log = function (message) {\n        if(message && message.trim) logOutput = message.trim();\n        if(nativeLog.apply) {\n          nativeLog.apply(originalConsole, arguments);\n        } else {\n          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');\n          nativeLog(nativeMsg);\n        }\n    };\n}\n\nfunction uncapture() {\n  console.log = originalConsole.log;\n}\n\ncapture();",
+          "tail": "uncapture();\n\nif (typeof reusableFunction !== \"function\") { \n  (function() { return \"reusableFunction is not defined\"; })();\n} else {\n  (function() { return logOutput || \"console.log never called\"; })();\n}"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244bd",
+      "title": "Passing Values to Functions with Arguments",
+      "description": [
+        "<dfn>Parameters</dfn> are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or <dfn>\"passed\"</dfn>) into a function when it is called are known as <dfn>arguments</dfn>.",
+        "Here is a function with two parameters, <code>param1</code> and <code>param2</code>:",
+        "<blockquote>function testFun(param1, param2) {<br>  console.log(param1, param2);<br>}</blockquote>",
+        "Then we can call <code>testFun</code>:",
+        "<code>testFun(\"Hello\", \"World\");</code>",
+        "We have passed two arguments, <code>\"Hello\"</code> and <code>\"World\"</code>. Inside the function, <code>param1</code> will equal \"Hello\" and <code>param2</code> will equal \"World\". Note that you could call <code>testFun</code> again with different arguments and the parameters would take on the value of the new arguments.",
+        "<hr>",
+        "<ol><li>Create a function called <code>functionWithArgs</code> that accepts two arguments and outputs their sum to the dev console.</li><li>Call the function with two numbers as arguments.</li></ol>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function functionWithArgs(a, b) {\n  console.log(a + b);\n}\nfunctionWithArgs(10, 5);"
+      ],
+      "tests": [
+        {
+          "text": "<code>functionWithArgs</code> should be a function'",
+          "testString": "assert(typeof functionWithArgs === 'function', '<code>functionWithArgs</code> should be a function')"
+        },
+        {
+          "text": "<code>functionWithArgs(1,2)</code> should output <code>3</code>'",
+          "testString": "if(typeof functionWithArgs === \"function\") { capture(); functionWithArgs(1,2); uncapture(); } assert(logOutput == 3, '<code>functionWithArgs(1,2)</code> should output <code>3</code>')"
+        },
+        {
+          "text": "<code>functionWithArgs(7,9)</code> should output <code>16</code>'",
+          "testString": "if(typeof functionWithArgs === \"function\") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16, '<code>functionWithArgs(7,9)</code> should output <code>16</code>')"
+        },
+        {
+          "text": "Call <code>functionWithArgs</code> with two numbers after you define it.'",
+          "testString": "assert(/^\\s*functionWithArgs\\s*\\(\\s*\\d+\\s*, 'Call <code>functionWithArgs</code> with two numbers after you define it.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Pasando valores a funciones con argumentos",
+          "description": [
+            "Los <dfn>parámetros</dfn> son variables que actúan como marcadores de lugar para los valores que han de ser entrada para una función cuando esta es llamada. Cuando una función es definida, es típicamente definida con uno o más parámetros. Los valores actuales que son entrada (or <dfn>\"pasados\"</dfn>) dentro de una función cuando esta es llamada son concidos como <dfn>argumentos</dfn>.",
+            "Aquí hay una función con dos parámetros, <code>param1</code> y <code>param2</code>:",
+            "<blockquote>function testFun(param1, param2) {<br>  console.log(param1, param2);<br>}</blockquote>",
+            "Entonces nosotros podemos llamar <code>testFun</code>:",
+            "<code>testFun(\"Hello\", \"World\");</code>",
+            "Nosotros hemos pasado dos argumentos, <code>\"Hello\"</code> y <code>\"World\"</code>. Dentro de la función, <code>param1</code> será igual a \"Hello\" y <code>param2</code> será igual a \"World\". Nota que puedes llamar <code>testFun</code> otra vez con argumentos diferentes y los parámetros asumirían el valor de los nuevos argumentos.",
+            "<h4>Instrucciones</h4>",
+            "<ol><li>Crea una función llamada <code>functionWithArgs</code> que acepte dos argumentos y da salida a su suma en la consola.</li><li>Llama la función.</li></ol>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "function ourFunctionWithArgs(a, b) {",
+            "  console.log(a - b);",
+            "}",
+            "ourFunctionWithArgs(10, 5); // Outputs 5",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "var logOutput = \"\";\nvar originalConsole = console\nfunction capture() {\n    var nativeLog = console.log;\n    console.log = function (message) {\n        if(message) logOutput = JSON.stringify(message).trim();\n        if(nativeLog.apply) {\n          nativeLog.apply(originalConsole, arguments);\n        } else {\n          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');\n          nativeLog(nativeMsg);\n        }\n    };\n}\n\nfunction uncapture() {\n  console.log = originalConsole.log;\n}\n\ncapture();",
+          "tail": "uncapture();\n\nif (typeof functionWithArgs !== \"function\") { \n  (function() { return \"functionWithArgs is not defined\"; })();\n} else {\n  (function() { return logOutput || \"console.log never called\"; })();\n}"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244be",
+      "title": "Global Scope and Functions",
+      "description": [
+        "In JavaScript, <dfn>scope</dfn> refers to the visibility of variables. Variables which are defined outside of a function block have <dfn>Global</dfn> scope. This means, they can be seen everywhere in your JavaScript code.",
+        "Variables which are used without the <code>var</code> keyword are automatically created in the <code>global</code> scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with <code>var</code>.",
+        "<hr>",
+        "Using <code>var</code>, declare a <code>global</code> variable <code>myGlobal</code> outside of any function. Initialize it with a value of <code>10</code>.",
+        "Inside function <code>fun1</code>, assign <code>5</code> to <code>oopsGlobal</code> <strong><em>without</em></strong> using the <code>var</code> keyword."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "// Declare your variable here\nvar myGlobal = 10;\n\nfunction fun1() {\n  // Assign 5 to oopsGlobal Here\n  oopsGlobal = 5;\n}\n\n// Only change code above this line\nfunction fun2() {\n  var output = \"\";\n  if(typeof myGlobal != \"undefined\") {\n    output += \"myGlobal: \" + myGlobal;\n  }\n  if(typeof oopsGlobal != \"undefined\") {\n    output += \" oopsGlobal: \" + oopsGlobal;\n  }\n  console.log(output);\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>myGlobal</code> should be defined'",
+          "testString": "assert(typeof myGlobal != \"undefined\", '<code>myGlobal</code> should be defined')"
+        },
+        {
+          "text": "<code>myGlobal</code> should have a value of <code>10</code>'",
+          "testString": "assert(myGlobal === 10, '<code>myGlobal</code> should have a value of <code>10</code>')"
+        },
+        {
+          "text": "<code>myGlobal</code> should be declared using the <code>var</code> keyword'",
+          "testString": "assert(/var\\s+myGlobal/.test(code), '<code>myGlobal</code> should be declared using the <code>var</code> keyword')"
+        },
+        {
+          "text": "<code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>'",
+          "testString": "assert(typeof oopsGlobal != \"undefined\" && oopsGlobal === 5, '<code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Alcance global y funciones",
+          "description": [
+            "En JavaScript, <dfn>alcance</dfn> se referiere a la visibilidad de variables. Las variables que definas fuera de un bloque de una función tienen alcance <dfn>Global</dfn>. Esto significa que ellas pueden ser vistas en todas partes en tu código JavaScript.",
+            "Las variables que pueden ser usadas sin la palabra clave <code>var</code> son automáticamente creadas en el alcance <code>global</code>. Esto puede tener consecuencias no deseadas en otras partes de tu código o cuando se ejecuta una función de nuevo. Tu siempre deberías declarar tus variables con <code>var</code>.",
+            "<h4>Instrucciones</h4>",
+            "Declara a variable <code>global</code> <code>myGlobal</code> fuera de cualquier función. Inicializala para tener un valor de <code>10</code> ",
+            "Dentro de la función <code>fun1</code>, asigna <code>5</code> a <code>oopsGlobal</code> <strong><em>sin</em></strong> usar la palabra clave <code>var</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Declare your variable here",
+            "",
+            "",
+            "function fun1() {",
+            "  // Assign 5 to oopsGlobal Here",
+            "  ",
+            "}",
+            "",
+            "// Only change code above this line",
+            "function fun2() {",
+            "  var output = \"\";",
+            "  if (typeof myGlobal != \"undefined\") {",
+            "    output += \"myGlobal: \" + myGlobal;",
+            "  }",
+            "  if (typeof oopsGlobal != \"undefined\") {",
+            "    output += \" oopsGlobal: \" + oopsGlobal;",
+            "  }",
+            "  console.log(output);",
+            "}"
+          ],
+          "head": "var logOutput = \"\";\nvar originalConsole = console\nfunction capture() {\n    var nativeLog = console.log;\n    console.log = function (message) {\n        logOutput = message;\n        if(nativeLog.apply) {\n          nativeLog.apply(originalConsole, arguments);\n        } else {\n          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');\n          nativeLog(nativeMsg);\n        }\n    };\n}\n\nfunction uncapture() {\n  console.log = originalConsole.log;\n}\nvar oopsGlobal;\ncapture();",
+          "tail": "fun1();\nfun2();\nuncapture();\n(function() { return logOutput || \"console.log never called\"; })();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244bf",
+      "title": "Local Scope and Functions",
+      "description": [
+        "Variables which are declared within a function, as well as the function parameters have <dfn>local</dfn> scope. That means, they are only visible within that function.",
+        "Here is a function <code>myTest</code> with a local variable called <code>loc</code>.",
+        "<blockquote>function myTest() {<br>  var loc = \"foo\";<br>  console.log(loc);<br>}<br>myTest(); // logs \"foo\"<br>console.log(loc); // loc is not defined</blockquote>",
+        "<code>loc</code> is not defined outside of the function.",
+        "<hr>",
+        "Declare a local variable <code>myVar</code> inside <code>myLocalScope</code>. Run the tests and then follow the instructions commented out in the editor.",
+        "<strong>Hint</strong><br>Refreshing the page may help if you get stuck."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function myLocalScope() {\n  'use strict';\n  \n  var myVar;\n  console.log(myVar);\n}\nmyLocalScope();"
+      ],
+      "tests": [
+        {
+          "text": "No global <code>myVar</code> variable'",
+          "testString": "assert(typeof myVar === 'undefined', 'No global <code>myVar</code> variable')"
+        },
+        {
+          "text": "Add a local <code>myVar</code> variable'",
+          "testString": "assert(/var\\s+myVar/.test(code), 'Add a local <code>myVar</code> variable')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Alcance local y funciones",
+          "description": [
+            "Las variables que son declaradas dentro de una función, así como los parámetros de la función tienen alcance <dfn>local</dfn>. Eso significa que solo son visibles dentro de esa función.",
+            "Aquí está una función <code>myTest</code> con una variable local llamada <code>loc</code>.",
+            "<blockquote>function myTest() {<br>  var loc = \"foo\";<br>  console.log(loc);<br>}<br>myTest(); // \"foo\"<br>console.log(loc); // \"undefined\"</blockquote>",
+            "<code>loc</code> no está definida fuera de la función.",
+            "<h4>Instrucciones</h4>",
+            "Declara una variable local <code>myVar</code> dentro de <code>myLocalScope</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function myLocalScope() {",
+            "  'use strict'; // you shouldn't need to edit this line",
+            "  ",
+            "  console.log(myVar);",
+            "}",
+            "myLocalScope();",
+            "",
+            "// Run and check the console",
+            "// myVar is not defined outside of myLocalScope",
+            "console.log(myVar);",
+            "",
+            "// Now remove the console log line to pass the test",
+            ""
+          ],
+          "head": "var logOutput = \"\";\nvar originalConsole = console\nfunction capture() {\n  var nativeLog = console.log;\n  console.log = function (message) {\n    logOutput = message;\n    if(nativeLog.apply) {\n      nativeLog.apply(originalConsole, arguments);\n    } else {\n      var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');\n      nativeLog(nativeMsg);\n    }\n  };\n}\n\nfunction uncapture() {\n  console.log = originalConsole.log;\n}\n",
+          "tail": "typeof myLocalScope === 'function' && (capture(), myLocalScope(), uncapture());\n(function() { return logOutput || \"console.log never called\"; })();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c0",
+      "title": "Global vs. Local Scope in Functions",
+      "description": [
+        "It is possible to have both <dfn>local</dfn> and <dfn>global</dfn> variables with the same name. When you do this, the <code>local</code> variable takes precedence over the <code>global</code> variable.",
+        "In this example:",
+        "<blockquote>var someVar = \"Hat\";<br>function myFun() {<br>  var someVar = \"Head\";<br>  return someVar;<br>}</blockquote>",
+        "The function <code>myFun</code> will return <code>\"Head\"</code> because the <code>local</code> version of the variable is present.",
+        "<hr>",
+        "Add a local variable to <code>myOutfit</code> function to override the value of <code>outerWear</code> with <code>\"sweater\"</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var outerWear = \"T-Shirt\";\nfunction myOutfit() {\n  var outerWear = \"sweater\";\n  return outerWear;\n}"
+      ],
+      "tests": [
+        {
+          "text": "Do not change the value of the global <code>outerWear</code>'",
+          "testString": "assert(outerWear === \"T-Shirt\", 'Do not change the value of the global <code>outerWear</code>')"
+        },
+        {
+          "text": "<code>myOutfit</code> should return <code>\"sweater\"</code>'",
+          "testString": "assert(myOutfit() === \"sweater\", '<code>myOutfit</code> should return <code>\"sweater\"</code>')"
+        },
+        {
+          "text": "Do not change the return statement'",
+          "testString": "assert(/return outerWear/.test(code), 'Do not change the return statement')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Alcance global vs. local en funciones",
+          "description": [
+            "Es posible tener variables <dfn>locales</dfn> y <dfn>globales</dfn> con el mismo nombre. Cuando tu haces esto, la variable <code>local</code> toma precedencia sobre la variable <code>global</code>.",
+            "En este ejemplo:",
+            "<blockquote>var algunaVar = \"Sombrero\";<br>function miFun() {<br>  var algunaVar = \"Cabeza\";<br>  return algunaVar;<br>}</blockquote>",
+            "La función <code>miFun</code> regresará <code>\"Cabeza\"</code> porque la versión <code>local</code> de la variable tiene precedencia.",
+            "<h4>Instrucciones</h4>",
+            "Agrega una variable local a <code>myOutfit</code> para sobreescribir el valor de <code>outerWear</code> con <code>\"sweater\"</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var outerWear = \"T-Shirt\";",
+            "",
+            "function myOutfit() {",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  ",
+            "  // Only change code above this line",
+            "  return outerWear;",
+            "}",
+            "",
+            "myOutfit();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c2",
+      "title": "Return a Value from a Function with Return",
+      "description": [
+        "We can pass values into a function with <dfn>arguments</dfn>. You can use a <code>return</code> statement to send a value back out of a function.",
+        "<strong>Example</strong>",
+        "<blockquote>function plusThree(num) {<br>  return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
+        "<code>plusThree</code> takes an <dfn>argument</dfn> for <code>num</code> and returns a value equal to <code>num + 3</code>.",
+        "<hr>",
+        "Create a function <code>timesFive</code> that accepts one argument, multiplies it by <code>5</code>, and returns the new value. See the last line in the editor for an example of how you can test your <code>timesFive</code> function."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function timesFive(num) {\n  return num * 5;\n}\ntimesFive(10);"
+      ],
+      "tests": [
+        {
+          "text": "<code>timesFive</code> should be a function'",
+          "testString": "assert(typeof timesFive === 'function', '<code>timesFive</code> should be a function')"
+        },
+        {
+          "text": "function <code>timesFive</code> should be called with a number'",
+          "testString": "assert(code.match(/timesFive\\(\\s*\\d+\\s*\\)/g), 'function <code>timesFive</code> should be called with a number')"
+        },
+        {
+          "text": "<code>timesFive(5)</code> should return <code>25</code>'",
+          "testString": "assert(timesFive(5) === 25, '<code>timesFive(5)</code> should return <code>25</code>')"
+        },
+        {
+          "text": "<code>timesFive(2)</code> should return <code>10</code>'",
+          "testString": "assert(timesFive(2) === 10, '<code>timesFive(2)</code> should return <code>10</code>')"
+        },
+        {
+          "text": "<code>timesFive(0)</code> should return <code>0</code>'",
+          "testString": "assert(timesFive(0) === 0, '<code>timesFive(0)</code> should return <code>0</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Retorna un valor desde una función con return",
+          "description": [
+            "Podemos pasar valores a una función mediante los <dfn>argumentos</dfn>. Puedes usar una sentencia <code>return</code> para enviar un valor de vuelta de una función.",
+            "<strong>Ejemplo</strong>",
+            "<blockquote>function masTres(num) {<br>  return num + 3;<br>}<br>var respuesta = masTres(5); // 8</blockquote>",
+            "<code>masTres</code> toma un <dfn>argumento</dfn> que es <code>num</code> y retorna un valor igual a <code>num + 3</code>.",
+            "<h4>Instrucciones</h4>",
+            "Crea una función <code>timesFive</code> que acepte un argumento, lo multiplique por <code>5</code> y retorne el nuevo valor."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "function minusSeven(num) {",
+            "  return num - 7;",
+            "}",
+            "",
+            "// Only change code below this line",
+            "",
+            "",
+            "",
+            "console.log(minusSeven(10));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "598e8944f009e646fc236146",
+      "title": "Understanding Undefined Value returned from a Function",
+      "description": [
+        "A function can include the <code>return</code> statement but it does not have to. In the case that the function doesn't have a <code>return</code> statement, when you call it, the function processes the inner code but the returned value is <code>undefined</code>.",
+        "<strong>Example</strong>",
+        "<blockquote>var sum = 0;<br>function addSum(num) {<br>  sum = sum + num;<br>}<br>var returnedValue = addSum(3); // sum will be modified but returned value is undefined</blockquote>",
+        "<code>addSum</code> is a function without a <code>return</code> statement. The function will change the global <code>sum</code> variable but the returned value of the function is <code>undefined</code>",
+        "<hr>",
+        "Create a function <code>addFive</code> without any arguments. This function adds 5 to the <code>sum</code> variable, but its returned value is <code>undefined</code>."
+      ],
+      "releasedOn": "August 11, 2017",
+      "solutions": [
+        "function addFive() {\n sum = sum + 5;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>addFive</code> should be a function'",
+          "testString": "assert(typeof addFive === 'function', '<code>addFive</code> should be a function')"
+        },
+        {
+          "text": "<code>sum</code> should be equal to 8'",
+          "testString": "assert(sum === 8, '<code>sum</code> should be equal to 8')"
+        },
+        {
+          "text": "Returned value from <code>addFive</code> should be <code>undefined</code>'",
+          "testString": "assert(addFive() === undefined, 'Returned value from <code>addFive</code> should be <code>undefined</code>')"
+        },
+        {
+          "text": "Inside of your functions, add 5 to the <code>sum</code> variable'",
+          "testString": "assert(code.match(/(sum\\s*\\=\\s*sum\\s*\\+\\s*5)|(sum\\s*\\+\\=\\s*5)/g).length === 1, 'Inside of your functions, add 5 to the <code>sum</code> variable')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var sum = 0;",
+            "function addThree() {",
+            "  sum = sum + 3;",
+            "}",
+            "",
+            "// Only change code below this line",
+            "",
+            "",
+            "",
+            "// Only change code above this line",
+            "var returnedValue = addFive();"
+          ],
+          "head": "",
+          "tail": "var sum = 0;\nfunction addThree() {sum = sum + 3;}\naddThree();\naddFive();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c3",
+      "title": "Assignment with a Returned Value",
+      "description": [
+        "If you'll recall from our discussion of <a href=\"storing-values-with-the-assignment-operator\" target=\"_blank\">Storing Values with the Assignment Operator</a>, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.",
+        "Assume we have pre-defined a function <code>sum</code> which adds two numbers together, then: ",
+        "<code>ourSum = sum(5, 12);</code>",
+        "will call <code>sum</code> function, which returns a value of <code>17</code> and assigns it to <code>ourSum</code> variable.",
+        "<hr>",
+        "Call the <code>processArg</code> function with an argument of <code>7</code> and assign its return value to the variable <code>processed</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var processed = 0;\n\nfunction processArg(num) {\n  return (num + 3) / 5;\n}\n\nprocessed = processArg(7);"
+      ],
+      "tests": [
+        {
+          "text": "<code>processed</code> should have a value of <code>2</code>'",
+          "testString": "assert(processed === 2, '<code>processed</code> should have a value of <code>2</code>')"
+        },
+        {
+          "text": "You should assign <code>processArg</code> to <code>processed</code>'",
+          "testString": "assert(/processed\\s*=\\s*processArg\\(\\s*7\\s*\\)\\s*;/.test(code), 'You should assign <code>processArg</code> to <code>processed</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Asignación con un valor retornado",
+          "description": [
+            "Si recuerdas de nuestra discusión de <a href=\"waypoint-storing-values-with-the-equal-operator\" target=\"_blank\">Almacenar Valores con el Operador Igual</a>, todo a la derecha del signo igual es resuelto antes que el valor sea asignado. Esto significa que nosotros podemos tomar el valor de retorno de una función y asignarlo a una variable.",
+            "Supongamos que tenemos una función pre-definida <code>suma</code> la cual suma dos números, entonces: ",
+            "<code>nuestraSuma = suma(5, 12);</code>",
+            "llamará la función <code>suma</code>, la cual retornará un valor de <code>17</code> y lo asignará a la variable <code>nuestraSuma</code>.",
+            "<h4>Instrucciones</h4>",
+            "Llama la función <code>processArg</code> con un argumento <code>7</code> y asigna su valor de retorno a la variable <code>processed</code>."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/assignment-with-a-returned-value",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var changed = 0;",
+            "",
+            "function change(num) {",
+            "  return (num + 5) / 3;",
+            "}",
+            "",
+            "changed = change(10);",
+            "",
+            "// Setup",
+            "var processed = 0;",
+            "",
+            "function processArg(num) {",
+            "  return (num + 3) / 5;",
+            "}",
+            "",
+            "// Only change code below this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){return \"processed = \" + processed})();"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c6",
+      "title": "Stand in Line",
+      "description": [
+        "In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the <code>queue</code> and old items are taken off from the front of the <code>queue</code>.",
+        "Write a function <code>nextInLine</code> which takes an array (<code>arr</code>) and a number (<code>item</code>) as arguments.",
+        "Add the number to the end of the array, then remove the first element of the array.",
+        "The <code>nextInLine</code> function should then return the element that was removed."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var testArr = [ 1,2,3,4,5];\n\nfunction nextInLine(arr, item) {\n    arr.push(item);\n    return arr.shift();\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>nextInLine([], 5)</code> should return a number.'",
+          "testString": "assert.isNumber(nextInLine([], '<code>nextInLine([], 5)</code> should return a number.')"
+        },
+        {
+          "text": "<code>nextInLine([], 1)</code> should return <code>1</code>'",
+          "testString": "assert(nextInLine([], '<code>nextInLine([], 1)</code> should return <code>1</code>')"
+        },
+        {
+          "text": "<code>nextInLine([2], 1)</code> should return <code>2</code>'",
+          "testString": "assert(nextInLine([2], '<code>nextInLine([2], 1)</code> should return <code>2</code>')"
+        },
+        {
+          "text": "<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>'",
+          "testString": "assert(nextInLine([5, '<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>')"
+        },
+        {
+          "text": "After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>'",
+          "testString": "nextInLine(testArr, 10); assert(testArr[4] === 10, 'After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Hacer cola",
+          "description": [
+            "En Ciencias de la Computación una <dfn>cola</dfn> es una <dfn>Estructura de Datos</dfn> abstracta donde los elementos son mantenidos en orden. Nuevos elementos pueden ser agregados en la parte trasera de la <code>cola</code> y los elementos viejos son quitados desde el frente de la <code>cola</code>.",
+            "Escribe una función <code>nextInLine</code> la cual toma un vector (<code>arr</code>) y un número (<code>item</code>) como argumentos. Agrega el número al final del vector, entonces retira el primer elemento del vector. La función nextInLine debe entonces devolver el elemento que se ha eliminado."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function nextInLine(arr, item) {",
+            "  // Your code here",
+            "  ",
+            "  return item;  // Change this line",
+            "}",
+            "",
+            "// Test Setup",
+            "var testArr = [1,2,3,4,5];",
+            "",
+            "// Display Code",
+            "console.log(\"Before: \" + JSON.stringify(testArr));",
+            "console.log(nextInLine(testArr, 6)); // Modify this line to test",
+            "console.log(\"After: \" + JSON.stringify(testArr));"
+          ],
+          "head": "var logOutput = [];\nvar originalConsole = console\nfunction capture() {\n    var nativeLog = console.log;\n    console.log = function (message) {\n        logOutput.push(message);\n        if(nativeLog.apply) {\n          nativeLog.apply(originalConsole, arguments);\n        } else {\n          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');\n          nativeLog(nativeMsg);\n        }\n    };\n}\n\nfunction uncapture() {\n  console.log = originalConsole.log;\n}\n\ncapture();",
+          "tail": "uncapture();\ntestArr = [1,2,3,4,5];\n(function() { return logOutput.join(\"\\n\");})();"
+        }
+      }
+    },
+    {
+      "id": "bd7123c9c441eddfaeb5bdef",
+      "title": "Understanding Boolean Values",
+      "description": [
+        "Another data type is the <dfn>Boolean</dfn>. <code>Booleans</code> may only be one of two values: <code>true</code> or <code>false</code>. They are basically little on-off switches, where <code>true</code> is \"on\" and <code>false</code> is \"off.\"  These two states are mutually exclusive.",
+        "<strong>Note</strong><br><code>Boolean</code> values are never written with quotes. The <code>strings</code> <code>\"true\"</code> and <code>\"false\"</code> are not <code>Boolean</code> and have no special meaning in JavaScript.",
+        "<hr>",
+        "Modify the <code>welcomeToBooleans</code> function so that it returns <code>true</code> instead of <code>false</code> when the run button is clicked."
+      ],
+      "solutions": [
+        "function welcomeToBooleans() {\n  return true; // Change this line\n}"
+      ],
+      "tests": [
+        {
+          "text": "The <code>welcomeToBooleans()</code> function should return a boolean &#40;true/false&#41; value.'",
+          "testString": "assert(typeof welcomeToBooleans() === 'boolean', 'The <code>welcomeToBooleans()</code> function should return a boolean &#40;true/false&#41; value.')"
+        },
+        {
+          "text": "<code>welcomeToBooleans()</code> should return true.'",
+          "testString": "assert(welcomeToBooleans() === true, '<code>welcomeToBooleans()</code> should return true.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Entiende los valores booleanos",
+          "description": [
+            "En informática las <code>estructuras de datos</code> son cosas que contienen datos. JavaScript tiene siete de estas. Por ejemplo, la estructura de datos <code>Número</code> contiene números. ",
+            "Vamos a aprender acerca de la estructura de datos más básica de todas: el <code>Boolean</code>. Los booleanos sólo puede contener el valor verdadero o el valor falso. Son básicamente pequeños interruptores de encendido y apagado. ",
+            "<h4>Instrucciones</h4>",
+            "Vamos a modificar nuestra función <code>welcomeToBooleans</code> para que devuelva <code>true</code> en lugar de <code>false</code> cuando se pulse el botón de ejecución."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function welcomeToBooleans() {",
+            "",
+            "// Only change code below this line.",
+            "",
+            "return false; // Change this line",
+            "",
+            "// Only change code above this line.",
+            "}"
+          ],
+          "head": "",
+          "tail": "welcomeToBooleans();"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c12feddfaeb3bdef",
+      "title": "Use Conditional Logic with If Statements",
+      "description": [
+        "<code>If</code> statements are used to make decisions in code. The keyword <code>if</code> tells JavaScript to execute the code in the curly braces under certain conditions, defined in the parentheses. These conditions are known as <code>Boolean</code> conditions and they may only be <code>true</code> or <code>false</code>.",
+        "When the condition evaluates to <code>true</code>, the program executes the statement inside the curly braces. When the Boolean condition evaluates to <code>false</code>, the statement inside the curly braces will not execute.",
+        "<strong>Pseudocode</strong>",
+        "<blockquote>if (<i>condition is true</i>) {<br>  <i>statement is executed</i><br>}</blockquote>",
+        "<strong>Example</strong>",
+        "<blockquote>function test (myCondition) {<br>  if (myCondition) {<br>     return \"It was true\";<br>  }<br>  return \"It was false\";<br>}<br>test(true);  // returns \"It was true\"<br>test(false); // returns \"It was false\"</blockquote>",
+        "When <code>test</code> is called with a value of <code>true</code>, the <code>if</code> statement evaluates <code>myCondition</code> to see if it is <code>true</code> or not. Since it is <code>true</code>, the function returns <code>\"It was true\"</code>. When we call <code>test</code> with a value of <code>false</code>, <code>myCondition</code> is <em>not</em> <code>true</code> and the statement in the curly braces is not executed and the function returns <code>\"It was false\"</code>.",
+        "<hr>",
+        "Create an <code>if</code> statement inside the function to return <code>\"Yes, that was true\"</code> if the parameter <code>wasThatTrue</code> is <code>true</code> and return <code>\"No, that was false\"</code> otherwise."
+      ],
+      "solutions": [
+        "function trueOrFalse(wasThatTrue) {\n  if (wasThatTrue) {\n    return \"Yes, that was true\";\n  }\n  return \"No, that was false\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>trueOrFalse</code> should be a function'",
+          "testString": "assert(typeof trueOrFalse === \"function\", '<code>trueOrFalse</code> should be a function')"
+        },
+        {
+          "text": "<code>trueOrFalse(true)</code> should return a string'",
+          "testString": "assert(typeof trueOrFalse(true) === \"string\", '<code>trueOrFalse(true)</code> should return a string')"
+        },
+        {
+          "text": "<code>trueOrFalse(false)</code> should return a string'",
+          "testString": "assert(typeof trueOrFalse(false) === \"string\", '<code>trueOrFalse(false)</code> should return a string')"
+        },
+        {
+          "text": "<code>trueOrFalse(true)</code> should return \"Yes, that was true\"'",
+          "testString": "assert(trueOrFalse(true) === \"Yes, '<code>trueOrFalse(true)</code> should return \"Yes, that was true\"')"
+        },
+        {
+          "text": "<code>trueOrFalse(false)</code> should return \"No, that was false\"'",
+          "testString": "assert(trueOrFalse(false) === \"No, '<code>trueOrFalse(false)</code> should return \"No, that was false\"')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Usa lógica condicional con instrucciones if y else",
+          "description": [
+            "Podemos usar instrucciones <code>if</code> (\"if\" es \"si\" en español) en JavaScript para ejecutar código sólo cuando cierta condición se cumpla.",
+            "Las instrucciones <code>if</code> requieren evaluar algún tipo de condición booleana.",
+            "Por ejemplo:",
+            "<code>if (1 === 2) {</code>",
+            "<code>&nbsp;&nbsp;return true;</code>",
+            "<code>} else {</code>",
+            "<code>&nbsp;&nbsp;return false;</code>",
+            "<code>}</code>",
+            "Vamos a usar la instrucción <code>if</code> con <code>else</code> (\"else\" puede traducirse como \"de lo contrario\") para hacer un juego de cara o sello.",
+            "<h4>Instrucciones</h4>",
+            "Crea una instrucción <code>if</code> con <code>else</code> que retorne la cadena <code>\"heads\"</code> si la variable <code>flip</code> es cero, o bien que retorne <code >\"tails\"</code> si la variable <code>flip</code> no es cero. "
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "function ourTrueOrFalse(isItTrue) {",
+            "  if (isItTrue) { ",
+            "    return \"Yes, it's true\";",
+            "  }",
+            "  return \"No, it's false\";",
+            "}",
+            "",
+            "// Setup",
+            "function trueOrFalse(wasThatTrue) {",
+            "",
+            "  // Only change code below this line.",
+            "  ",
+            "  ",
+            "  ",
+            "  // Only change code above this line.",
+            "",
+            "}",
+            "",
+            "// Change this value to test",
+            "trueOrFalse(true);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d0",
+      "title": "Comparison with the Equality Operator",
+      "description": [
+        "There are many <dfn>Comparison Operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.",
+        "The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable in the left.",
+        "<blockquote>function equalityTest(myVal) {<br>  if (myVal == 10) {<br>     return \"Equal\";<br>  }<br>  return \"Not Equal\";<br>}</blockquote>",
+        "If <code>myVal</code> is equal to <code>10</code>, the equality operator returns <code>true</code>, so the code in the curly braces will execute, and the function will return <code>\"Equal\"</code>. Otherwise, the function will return <code>\"Not Equal\"</code>.",
+        "In order for JavaScript to compare two different <code>data types</code> (for example, <code>numbers</code> and <code>strings</code>), it must convert one type to another. This is known as \"Type Coercion\". Once it does, however, it can compare terms as follows:",
+        "<blockquote>   1   ==  1    // true<br>   1   ==  2    // false<br>   1   == '1'   // true<br>  \"3\"  ==  3    // true</blockquote>",
+        "<hr>",
+        "Add the <code>equality operator</code> to the indicated line so that the function will return \"Equal\" when <code>val</code> is equivalent to <code>12</code>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testEqual(val) {\n  if (val == 12) {\n    return \"Equal\";\n  }\n  return \"Not Equal\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>testEqual(10)</code> should return \"Not Equal\"'",
+          "testString": "assert(testEqual(10) === \"Not Equal\", '<code>testEqual(10)</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "<code>testEqual(12)</code> should return \"Equal\"'",
+          "testString": "assert(testEqual(12) === \"Equal\", '<code>testEqual(12)</code> should return \"Equal\"')"
+        },
+        {
+          "text": "<code>testEqual(\"12\")</code> should return \"Equal\"'",
+          "testString": "assert(testEqual(\"12\") === \"Equal\", '<code>testEqual(\"12\")</code> should return \"Equal\"')"
+        },
+        {
+          "text": "You should use the <code>==</code> operator'",
+          "testString": "assert(code.match(/==/g) && !code.match(/===/g), 'You should use the <code>==</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador de igualdad",
+          "description": [
+            "Hay muchos <dfn>Operadores de Comparación</dfn> en JavaScript. Todos estos operadores retornan un valor booleano <code>true</code>(verdadero) o <code>false</code>(falso).",
+            "El operador más básico es el operador de igualdad <code>==</code>. El operador de igualdad compara dos valores y retorna <code>true</code> si son equivalentes o <code>false</code> si no lo son. Nota que la igualdad es diferente de la asignación (<code>=</code>), la cual asigna el valor a la derecha del operador a la variable en la izquierda.",
+            "<blockquote>function pruebaIgualdad(miVal) {<br>  if (miVal == 10) {<br>     return \"Igual\";<br>  }<br>  return \"No Es Igual\";<br>}</blockquote>",
+            "Si <code>miVal</code> es igual a <code>10</code>, el operador de igualdad retornará <code>true</code>(verdadero), así el código entre llaves será ejecutado y la función retornará <code>\"Equal\"</code>. De otra manera, la función retornará <code>\"Not Equal\"</code>.",
+            "Para que JavaScript pueda comparar dos <code>tipos de datos</code> diferentes (por ejemplo, <code>números</code> y <code>cadenas de texto</code>), debe convertir un tipo a otro. Una vez que lo hace, sin embargo, puede comparar términos de la siguiente manera:",
+            "<blockquote>   1   ==  1    // true<br>   1   ==  2    // false<br>   1   == '1'   // true<br>  \"3\"  ==  3    // true</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Agrega el <code>operador de igualdad</code> a la línea indicada de manera que la función retornará \"Equal\" cuando <code>val</code> sea equivalente a <code>12</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "function testEqual(val) {",
+            "  if (val) { // Change this line",
+            "    return \"Equal\";",
+            "  }",
+            "  return \"Not Equal\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testEqual(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d1",
+      "title": "Comparison with the Strict Equality Operator",
+      "description": [
+        "Strict equality (<code>===</code>) is the counterpart to the equality operator (<code>==</code>). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion.",
+        "If the values being compared have different types, they are considered unequal, and the strict equality operator will return false.",
+        "<strong>Examples</strong>",
+        "<blockquote>3 === 3   // true<br>3 === '3' // false</blockquote>",
+        "In the second example, <code>3</code> is a <code>Number</code> type and <code>'3'</code> is a <code>String</code> type.",
+        "<hr>",
+        "Use the strict equality operator in the <code>if</code> statement so the function will return \"Equal\" when <code>val</code> is strictly equal to <code>7</code>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testStrict(val) {\n  if (val === 7) {\n    return \"Equal\";\n  }\n  return \"Not Equal\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>testStrict(10)</code> should return \"Not Equal\"'",
+          "testString": "assert(testStrict(10) === \"Not Equal\", '<code>testStrict(10)</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "<code>testStrict(7)</code> should return \"Equal\"'",
+          "testString": "assert(testStrict(7) === \"Equal\", '<code>testStrict(7)</code> should return \"Equal\"')"
+        },
+        {
+          "text": "<code>testStrict(\"7\")</code> should return \"Not Equal\"'",
+          "testString": "assert(testStrict(\"7\") === \"Not Equal\", '<code>testStrict(\"7\")</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "You should use the <code>===</code> operator'",
+          "testString": "assert(code.match(/(val\\s*===\\s*\\d+)|(\\d+\\s*===\\s*val)/g).length > 0, 'You should use the <code>===</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador de estricta igualdad",
+          "description": [
+            "Igualdad estricta (<code>===</code>) es la contraparte del operador de igualdad (<code>==</code>). Diferente al operador de igualdad, igualdad estricta prueba los <code>tipos de datos</code> y el valor de los elementos comparados.",
+            "<strong>Ejemplos</strong>",
+            "<blockquote>3 === 3   // true<br>3 === '3' // falso</blockquote>",
+            "En el segundo ejemplo, <code>3</code> es de tipo <code>Número</code> y <code>'3'</code> es de tipo <code>Cadena</code>.",
+            "<h4>Instrucciones</h4>",
+            "Usa el operador de igualdad estricta en la sentencia <code>if</code> de manera que la función retorne \"Equal\" cuando <code>val</code> es estrictamente igual a <code>7</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "function testStrict(val) {",
+            "  if (val) { // Change this line",
+            "    return \"Equal\";",
+            "  }",
+            "  return \"Not Equal\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testStrict(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "599a789b454f2bbd91a3ff4d",
+      "title": "Practice comparing different values",
+      "description": [
+        "In the last two challenges, we learned about the equality operator (<code>==</code>) and the strict equality operator (<code>===</code>). Let's do a quick review and practice using these operators some more.",
+        "If the values being compared are not of the same type, the equality operator will perform a type conversion, and then evaluate the values. However, the strict equalty operator will compare both the data type and value as-is, without converting one type to the other.",
+        "<strong>Examples</strong>",
+        "<blockquote>3 == '3'  // returns true because JavaScript performs type converstion from string to number<br>3 === '3' // returns false because the types are different and type conversion is not performed</blockquote>",
+        "<strong>Note</strong><br>In JavaScript, you can determine the type of a variable or a value with the <code>typeof</code> operator, as follows:",
+        "<blockquote>typeof 3   // returns 'number'<br>typeof '3' // returns 'string'</blockquote>",
+        "<hr>",
+        "The <code>compareEquality</code> function in the editor compares two values using the <code>equality operator</code>. Modify the function so that it returns \"Equal\" only when the values are strictly equal."
+      ],
+      "releasedOn": "August 21, 2017",
+      "solutions": [
+        "function compareEquality(a,b) {\n  if (a === b) {\n    return \"Equal\";\n  }\n  return \"Not Equal\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>compareEquality(10, \"10\")</code> should return \"Not Equal\"'",
+          "testString": "assert(compareEquality(10, '<code>compareEquality(10, \"10\")</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "<code>compareEquality(\"20\", 20)</code> should return \"Not Equal\"'",
+          "testString": "assert(compareEquality(\"20\", '<code>compareEquality(\"20\", 20)</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "You should use the <code>===</code> operator'",
+          "testString": "assert(code.match(/===/g), 'You should use the <code>===</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "function compareEquality(a, b) {",
+            "  if (a == b) { // Change this line",
+            "    return \"Equal\";",
+            "  }",
+            "  return \"Not Equal\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "compareEquality(10, \"10\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d2",
+      "title": "Comparison with the Inequality Operator",
+      "description": [
+        "The inequality operator (<code>!=</code>) is the opposite of the equality operator. It means \"Not Equal\" and returns <code>false</code> where equality would return <code>true</code> and <em>vice versa</em>. Like the equality operator, the inequality operator will convert data types of values while comparing.",
+        "<strong>Examples</strong>",
+        "<blockquote>1 != 2      // true<br>1 != \"1\"    // false<br>1 != '1'    // false<br>1 != true   // false<br>0 != false  // false</blockquote>",
+        "<hr>",
+        "Add the inequality operator <code>!=</code> in the <code>if</code> statement so that the function will return \"Not Equal\" when <code>val</code> is not equivalent to <code>99</code>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testNotEqual(val) {\n  if (val != 99) {\n    return \"Not Equal\";\n  }\n  return \"Equal\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>testNotEqual(99)</code> should return \"Equal\"'",
+          "testString": "assert(testNotEqual(99) === \"Equal\", '<code>testNotEqual(99)</code> should return \"Equal\"')"
+        },
+        {
+          "text": "<code>testNotEqual(\"99\")</code> should return \"Equal\"'",
+          "testString": "assert(testNotEqual(\"99\") === \"Equal\", '<code>testNotEqual(\"99\")</code> should return \"Equal\"')"
+        },
+        {
+          "text": "<code>testNotEqual(12)</code> should return \"Not Equal\"'",
+          "testString": "assert(testNotEqual(12) === \"Not Equal\", '<code>testNotEqual(12)</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "<code>testNotEqual(\"12\")</code> should return \"Not Equal\"'",
+          "testString": "assert(testNotEqual(\"12\") === \"Not Equal\", '<code>testNotEqual(\"12\")</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "<code>testNotEqual(\"bob\")</code> should return \"Not Equal\"'",
+          "testString": "assert(testNotEqual(\"bob\") === \"Not Equal\", '<code>testNotEqual(\"bob\")</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "You should use the <code>!=</code> operator'",
+          "testString": "assert(code.match(/(?!!==)!=/), 'You should use the <code>!=</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador de desigualdad",
+          "description": [
+            "El operador de desigualdad (<code>!=</code>) es el opuesto al operador de igualdad. Esto significa \"No Igual a\" y retorna <code>false</code> cuando igualdad retornaría <code>true</code> y <em>viceversa</em>. Como el operador de igualdad, el operador de desigualdad convertirá tipos de datos mientras compara.",
+            "<strong>Ejemplos</strong>",
+            "<blockquote>1 != 2      // true<br>1 != \"1\"    // false<br>1 != '1'    // false<br>1 != true   // false<br>0 != false  // false</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Agrega el operador de desigualdad <code>!=</code> en la sentencia <code>if</code> de manera que la función retorne \"Not Equal\" (No igual a) cuando <code>val</code> no es equivalente a <code>99</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "function testNotEqual(val) {",
+            "  if (val) { // Change this line",
+            "    return \"Not Equal\";",
+            "  }",
+            "  return \"Equal\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testNotEqual(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d3",
+      "title": "Comparison with the Strict Inequality Operator",
+      "description": [
+        "The strict inequality operator (<code>!==</code>) is the logical opposite of the strict equality operator. It means \"Strictly Not Equal\" and returns <code>false</code> where strict equality would return <code>true</code> and <em>vice versa</em>. Strict inequality will not convert data types.",
+        "<strong>Examples</strong>",
+        "<blockquote>3 !== 3   // false<br>3 !== '3' // true<br>4 !== 3   // true</blockquote>",
+        "<hr>",
+        "Add the <code>strict inequality operator</code> to the <code>if</code> statement so the function will return \"Not Equal\" when <code>val</code> is not strictly equal to <code>17</code>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testStrictNotEqual(val) {\n  if (val !== 17) {\n    return \"Not Equal\";\n  }\n  return \"Equal\";\n}"
+      ],
+      "MDNlinks": [
+        "Strict Inequality Operator"
+      ],
+      "tests": [
+        {
+          "text": "<code>testStrictNotEqual(17)</code> should return \"Equal\"'",
+          "testString": "assert(testStrictNotEqual(17) === \"Equal\", '<code>testStrictNotEqual(17)</code> should return \"Equal\"')"
+        },
+        {
+          "text": "<code>testStrictNotEqual(\"17\")</code> should return \"Not Equal\"'",
+          "testString": "assert(testStrictNotEqual(\"17\") === \"Not Equal\", '<code>testStrictNotEqual(\"17\")</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "<code>testStrictNotEqual(12)</code> should return \"Not Equal\"'",
+          "testString": "assert(testStrictNotEqual(12) === \"Not Equal\", '<code>testStrictNotEqual(12)</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "<code>testStrictNotEqual(\"bob\")</code> should return \"Not Equal\"'",
+          "testString": "assert(testStrictNotEqual(\"bob\") === \"Not Equal\", '<code>testStrictNotEqual(\"bob\")</code> should return \"Not Equal\"')"
+        },
+        {
+          "text": "You should use the <code>!==</code> operator'",
+          "testString": "assert(code.match(/(val\\s*!==\\s*\\d+)|(\\d+\\s*!==\\s*val)/g).length > 0, 'You should use the <code>!==</code> operator')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador de estricta desigualdad",
+          "description": [
+            "El operador de estricta desigualdad (<code>!==</code>) es el opuesto al operador de estricta igualdad. Esto significa \"Estrictamente no Igual\" y retorna <code>false</code>(falso) donde igualdad estricta retornaría <code>true</code>(verdadero) y <em>viceversa</em>. Estricta desigualdad no convertirá tipos de datos.",
+            "<strong>Ejemplos</strong>",
+            "<blockquote>3 !== 3   // false<br>3 !== '3' // true<br>4 !== 3   // true</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Agrega el <code>operador de estricta desigualdad</code> a la sentencia <code>if</code> de manera que la función retorne \"Not Equal\" cuando <code>val</code> no es estrictamente igual a <code>17</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "function testStrictNotEqual(val) {",
+            "  // Only Change Code Below this Line",
+            "  ",
+            "  if (val) {",
+            "",
+            "  // Only Change Code Above this Line",
+            "",
+            "    return \"Not Equal\";",
+            "  }",
+            "  return \"Equal\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testStrictNotEqual(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d4",
+      "title": "Comparison with the Greater Than Operator",
+      "description": [
+        "The greater than operator (<code>&gt;</code>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.",
+        "Like the equality operator, greater than operator will convert data types of values while comparing.",
+        "<strong>Examples</strong>",
+        "<blockquote> 5 > 3   // true<br> 7 > '3' // true<br> 2 > 3   // false<br>'1' > 9  // false</blockquote>",
+        "<hr>",
+        "Add the <code>greater than</code> operator to the indicated lines so that the return statements make sense."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testGreaterThan(val) {\n  if (val > 100) {  // Change this line\n    return \"Over 100\";\n  }\n  if (val > 10) {  // Change this line\n    return \"Over 10\";\n  }\n  return \"10 or Under\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>testGreaterThan(0)</code> should return \"10 or Under\"'",
+          "testString": "assert(testGreaterThan(0) === \"10 or Under\", '<code>testGreaterThan(0)</code> should return \"10 or Under\"')"
+        },
+        {
+          "text": "<code>testGreaterThan(10)</code> should return \"10 or Under\"'",
+          "testString": "assert(testGreaterThan(10) === \"10 or Under\", '<code>testGreaterThan(10)</code> should return \"10 or Under\"')"
+        },
+        {
+          "text": "<code>testGreaterThan(11)</code> should return \"Over 10\"'",
+          "testString": "assert(testGreaterThan(11) === \"Over 10\", '<code>testGreaterThan(11)</code> should return \"Over 10\"')"
+        },
+        {
+          "text": "<code>testGreaterThan(99)</code> should return \"Over 10\"'",
+          "testString": "assert(testGreaterThan(99) === \"Over 10\", '<code>testGreaterThan(99)</code> should return \"Over 10\"')"
+        },
+        {
+          "text": "<code>testGreaterThan(100)</code> should return \"Over 10\"'",
+          "testString": "assert(testGreaterThan(100) === \"Over 10\", '<code>testGreaterThan(100)</code> should return \"Over 10\"')"
+        },
+        {
+          "text": "<code>testGreaterThan(101)</code> should return \"Over 100\"'",
+          "testString": "assert(testGreaterThan(101) === \"Over 100\", '<code>testGreaterThan(101)</code> should return \"Over 100\"')"
+        },
+        {
+          "text": "<code>testGreaterThan(150)</code> should return \"Over 100\"'",
+          "testString": "assert(testGreaterThan(150) === \"Over 100\", '<code>testGreaterThan(150)</code> should return \"Over 100\"')"
+        },
+        {
+          "text": "You should use the <code>&gt;</code> operator at least twice'",
+          "testString": "assert(code.match(/val\\s*>\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&gt;</code> operator at least twice')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador mayor que",
+          "description": [
+            "El operador mayor que (<code>&gt;</code>) compara los valores de dos números. Si el número a la izquierda es mayor que el número a la derecha, este returna <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso).",
+            "Al igual que el operador de igualdad, el operador mayor que convertirá tipos de datos de valores mientras los compara.",
+            "<strong>Ejemplos</strong>",
+            "<blockquote> 5 > 3   // true<br> 7 > '3' // true<br> 2 > 3   // false<br>'1' > 9  // false</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Agrega el operador <code>mayor que</code> para las líneas indicadas de manera que las sentencias retornadas tengan sentido."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testGreaterThan(val) {",
+            "  if (val) {  // Change this line",
+            "    return \"Over 100\";",
+            "  }",
+            "  ",
+            "  if (val) {  // Change this line",
+            "    return \"Over 10\";",
+            "  }",
+            "",
+            "  return \"10 or Under\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testGreaterThan(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d5",
+      "title": "Comparison with the Greater Than Or Equal To Operator",
+      "description": [
+        "The <code>greater than or equal to</code> operator (<code>&gt;=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.",
+        "Like the equality operator, <code>greater than or equal to</code> operator will convert data types while comparing.",
+        "<strong>Examples</strong>",
+        "<blockquote> 6  >=  6  // true<br> 7  >= '3' // true<br> 2  >=  3  // false<br>'7' >=  9  // false</blockquote>",
+        "<hr>",
+        "Add the <code>greater than or equal to</code> operator to the indicated lines so that the return statements make sense."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testGreaterOrEqual(val) {\n  if (val >= 20) {  // Change this line\n    return \"20 or Over\";\n  }\n  \n  if (val >= 10) {  // Change this line\n    return \"10 or Over\";\n  }\n\n  return \"Less than 10\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>testGreaterOrEqual(0)</code> should return \"Less than 10\"'",
+          "testString": "assert(testGreaterOrEqual(0) === \"Less than 10\", '<code>testGreaterOrEqual(0)</code> should return \"Less than 10\"')"
+        },
+        {
+          "text": "<code>testGreaterOrEqual(9)</code> should return \"Less than 10\"'",
+          "testString": "assert(testGreaterOrEqual(9) === \"Less than 10\", '<code>testGreaterOrEqual(9)</code> should return \"Less than 10\"')"
+        },
+        {
+          "text": "<code>testGreaterOrEqual(10)</code> should return \"10 or Over\"'",
+          "testString": "assert(testGreaterOrEqual(10) === \"10 or Over\", '<code>testGreaterOrEqual(10)</code> should return \"10 or Over\"')"
+        },
+        {
+          "text": "<code>testGreaterOrEqual(11)</code> should return \"10 or Over\"'",
+          "testString": "assert(testGreaterOrEqual(11) === \"10 or Over\", '<code>testGreaterOrEqual(11)</code> should return \"10 or Over\"')"
+        },
+        {
+          "text": "<code>testGreaterOrEqual(19)</code> should return \"10 or Over\"'",
+          "testString": "assert(testGreaterOrEqual(19) === \"10 or Over\", '<code>testGreaterOrEqual(19)</code> should return \"10 or Over\"')"
+        },
+        {
+          "text": "<code>testGreaterOrEqual(100)</code> should return \"20 or Over\"'",
+          "testString": "assert(testGreaterOrEqual(100) === \"20 or Over\", '<code>testGreaterOrEqual(100)</code> should return \"20 or Over\"')"
+        },
+        {
+          "text": "<code>testGreaterOrEqual(21)</code> should return \"20 or Over\"'",
+          "testString": "assert(testGreaterOrEqual(21) === \"20 or Over\", '<code>testGreaterOrEqual(21)</code> should return \"20 or Over\"')"
+        },
+        {
+          "text": "You should use the <code>&gt;=</code> operator at least twice'",
+          "testString": "assert(code.match(/val\\s*>=\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&gt;=</code> operator at least twice')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador mayor o ogual",
+          "description": [
+            "El operador <code>mayor o igual </code> (<code>&gt;=</code>) compara los valores de dos números. Si el número de la izquierda es mayor o igual a el número de la derecha, este retorna <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso).",
+            "Como el operador de igualdad, el operador <code>mayor o igual</code> convertirá tipos de datos mientras está comparando.",
+            "<strong>Ejemplos</strong>",
+            "<blockquote> 6  >=  6  // true<br> 7  >= '3' // true<br> 2  >=  3  // false<br>'7' >=  9  // false</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Agrega el operador <code>mayor o igual</code> a las líneas indicadas de manera que las sentencias de retorno tengan sentido."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testGreaterOrEqual(val) {",
+            "  if (val) {  // Change this line",
+            "    return \"20 or Over\";",
+            "  }",
+            "  ",
+            "  if (val) {  // Change this line",
+            "    return \"10 or Over\";",
+            "  }",
+            "",
+            "  return \"Less than 10\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testGreaterOrEqual(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d6",
+      "title": "Comparison with the Less Than Operator",
+      "description": [
+        "The <dfn>less than</dfn> operator (<code>&lt;</code>) compares the values of two numbers. If the number to the left is less than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>. Like the equality operator, <dfn>less than</dfn> operator converts data types while comparing.",
+        "<strong>Examples</strong>",
+        "<blockquote>  2 &lt; 5  // true<br>'3' &lt; 7  // true<br>  5 &lt; 5  // false<br>  3 &lt; 2  // false<br>'8' &lt; 4  // false</blockquote>",
+        "<hr>",
+        "Add the <code>less than</code> operator to the indicated lines so that the return statements make sense."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testLessThan(val) {\n  if (val < 25) {  // Change this line\n    return \"Under 25\";\n  }\n  \n  if (val < 55) {  // Change this line\n    return \"Under 55\";\n  }\n\n  return \"55 or Over\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>testLessThan(0)</code> should return \"Under 25\"'",
+          "testString": "assert(testLessThan(0) === \"Under 25\", '<code>testLessThan(0)</code> should return \"Under 25\"')"
+        },
+        {
+          "text": "<code>testLessThan(24)</code> should return \"Under 25\"'",
+          "testString": "assert(testLessThan(24) === \"Under 25\", '<code>testLessThan(24)</code> should return \"Under 25\"')"
+        },
+        {
+          "text": "<code>testLessThan(25)</code> should return \"Under 55\"'",
+          "testString": "assert(testLessThan(25) === \"Under 55\", '<code>testLessThan(25)</code> should return \"Under 55\"')"
+        },
+        {
+          "text": "<code>testLessThan(54)</code> should return \"Under 55\"'",
+          "testString": "assert(testLessThan(54) === \"Under 55\", '<code>testLessThan(54)</code> should return \"Under 55\"')"
+        },
+        {
+          "text": "<code>testLessThan(55)</code> should return \"55 or Over\"'",
+          "testString": "assert(testLessThan(55) === \"55 or Over\", '<code>testLessThan(55)</code> should return \"55 or Over\"')"
+        },
+        {
+          "text": "<code>testLessThan(99)</code> should return \"55 or Over\"'",
+          "testString": "assert(testLessThan(99) === \"55 or Over\", '<code>testLessThan(99)</code> should return \"55 or Over\"')"
+        },
+        {
+          "text": "You should use the <code>&lt;</code> operator at least twice'",
+          "testString": "assert(code.match(/val\\s*<\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&lt;</code> operator at least twice')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador menor que",
+          "description": [
+            "El operador <dfn>menor que</dfn> (<code>&lt;</code>) compara los valores de dos números. Si el número a la izquierda es menor que el número de la derecha, este retorna <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso). Como el operador de igualdad, el operador <dfn>menor que</dfn> convierte tipos de datos mientra compara.",
+            "<strong>Ejemplos</strong>",
+            "<blockquote>  2 &lt; 5  // true<br>'3' &lt; 7  // true<br>  5 &lt; 5  // false<br>  3 &lt; 2  // false<br>'8' &lt; 4  // false</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Agregar el operador <code>menor que</code> a las líneas indicadas de modo que las sentencias de retorno tengan sentido."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testLessThan(val) {",
+            "  if (val) {  // Change this line",
+            "    return \"Under 25\";",
+            "  }",
+            "  ",
+            "  if (val) {  // Change this line",
+            "    return \"Under 55\";",
+            "  }",
+            "",
+            "  return \"55 or Over\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testLessThan(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d7",
+      "title": "Comparison with the Less Than Or Equal To Operator",
+      "description": [
+        "The <code>less than or equal to</code> operator (<code>&lt;=</code>) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than or equal to</code> converts data types.",
+        "<strong>Examples</strong>",
+        "<blockquote>  4 &lt;= 5  // true<br>'7' &lt;= 7  // true<br>  5 &lt;= 5  // true<br>  3 &lt;= 2  // false<br>'8' &lt;= 4  // false</blockquote>",
+        "<hr>",
+        "Add the <code>less than or equal to</code> operator to the indicated lines so that the return statements make sense."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testLessOrEqual(val) {\n  if (val <= 12) {  // Change this line\n    return \"Smaller Than or Equal to 12\";\n  }\n  \n  if (val <= 24) {  // Change this line\n    return \"Smaller Than or Equal to 24\";\n  }\n\n  return \"More Than 24\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>testLessOrEqual(0)</code> should return \"Smaller Than or Equal to 12\"'",
+          "testString": "assert(testLessOrEqual(0) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(0)</code> should return \"Smaller Than or Equal to 12\"')"
+        },
+        {
+          "text": "<code>testLessOrEqual(11)</code> should return \"Smaller Than or Equal to 12\"'",
+          "testString": "assert(testLessOrEqual(11) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(11)</code> should return \"Smaller Than or Equal to 12\"')"
+        },
+        {
+          "text": "<code>testLessOrEqual(12)</code> should return \"Smaller Than or Equal to 12\"'",
+          "testString": "assert(testLessOrEqual(12) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(12)</code> should return \"Smaller Than or Equal to 12\"')"
+        },
+        {
+          "text": "<code>testLessOrEqual(23)</code> should return \"Smaller Than or Equal to 24\"'",
+          "testString": "assert(testLessOrEqual(23) === \"Smaller Than or Equal to 24\", '<code>testLessOrEqual(23)</code> should return \"Smaller Than or Equal to 24\"')"
+        },
+        {
+          "text": "<code>testLessOrEqual(24)</code> should return \"Smaller Than or Equal to 24\"'",
+          "testString": "assert(testLessOrEqual(24) === \"Smaller Than or Equal to 24\", '<code>testLessOrEqual(24)</code> should return \"Smaller Than or Equal to 24\"')"
+        },
+        {
+          "text": "<code>testLessOrEqual(25)</code> should return \"More Than 24\"'",
+          "testString": "assert(testLessOrEqual(25) === \"More Than 24\", '<code>testLessOrEqual(25)</code> should return \"More Than 24\"')"
+        },
+        {
+          "text": "<code>testLessOrEqual(55)</code> should return \"More Than 24\"'",
+          "testString": "assert(testLessOrEqual(55) === \"More Than 24\", '<code>testLessOrEqual(55)</code> should return \"More Than 24\"')"
+        },
+        {
+          "text": "You should use the <code>&lt;=</code> operator at least twice'",
+          "testString": "assert(code.match(/val\\s*<=\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&lt;=</code> operator at least twice')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador menor o igual",
+          "description": [
+            "El operador <code>menor o igual</code> (<code>&lt;=</code>) compara los valores de dos números. Si el número a la izquierda es menor o igual que el número de la derecha, este retorna <code>true</code>(verdadero). Si el número a la izquierda es mayor que el número de la derecha, este retorna <code>false</code>(falso). Al igual que el operador de igualdad, <code>menor o igual</code> convierte tipos de datos.",
+            "<strong>Ejemplos</strong>",
+            "<blockquote>  4 &lt;= 5  // true<br>'7' &lt;= 7  // true<br>  5 &lt;= 5  // true<br>  3 &lt;= 2  // false<br>'8' &lt;= 4  // false</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Agrega el operador <code>menor o igual</code> a las líneas indicadas de modo que las sentencias de retorno tengan sentido."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testLessOrEqual(val) {",
+            "  if (val) {  // Change this line",
+            "    return \"Smaller Than or Equal to 12\";",
+            "  }",
+            "  ",
+            "  if (val) {  // Change this line",
+            "    return \"Smaller Than or Equal to 24\";",
+            "  }",
+            "",
+            "  return \"More Than 24\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testLessOrEqual(10);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d8",
+      "title": "Comparisons with the Logical And Operator",
+      "description": [
+        "Sometimes you will need to test more than one thing at a time. The <dfn>logical and</dfn> operator (<code>&&</code>) returns <code>true</code> if and only if the <dfn>operands</dfn> to the left and right of it are true.",
+        "The same effect could be achieved by nesting an if statement inside another if:",
+        "<blockquote>if (num > 5) {<br>  if (num < 10) {<br>    return \"Yes\";<br>  }<br>}<br>return \"No\";</blockquote>",
+        "will only return \"Yes\" if <code>num</code> is greater than <code>5</code> and less than <code>10</code>. The same logic can be written as:",
+        "<blockquote>if (num > 5 && num < 10) {<br>  return \"Yes\";<br>}<br>return \"No\";</blockquote>",
+        "<hr>",
+        "Combine the two if statements into one statement which will return <code>\"Yes\"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>\"No\"</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testLogicalAnd(val) {\n  if (val >= 25 && val <= 50) {\n    return \"Yes\";\n  }\n  return \"No\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should use the <code>&&</code> operator once'",
+          "testString": "assert(code.match(/&&/g).length === 1, 'You should use the <code>&&</code> operator once')"
+        },
+        {
+          "text": "You should only have one <code>if</code> statement'",
+          "testString": "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement')"
+        },
+        {
+          "text": "<code>testLogicalAnd(0)</code> should return \"No\"'",
+          "testString": "assert(testLogicalAnd(0) === \"No\", '<code>testLogicalAnd(0)</code> should return \"No\"')"
+        },
+        {
+          "text": "<code>testLogicalAnd(24)</code> should return \"No\"'",
+          "testString": "assert(testLogicalAnd(24) === \"No\", '<code>testLogicalAnd(24)</code> should return \"No\"')"
+        },
+        {
+          "text": "<code>testLogicalAnd(25)</code> should return \"Yes\"'",
+          "testString": "assert(testLogicalAnd(25) === \"Yes\", '<code>testLogicalAnd(25)</code> should return \"Yes\"')"
+        },
+        {
+          "text": "<code>testLogicalAnd(30)</code> should return \"Yes\"'",
+          "testString": "assert(testLogicalAnd(30) === \"Yes\", '<code>testLogicalAnd(30)</code> should return \"Yes\"')"
+        },
+        {
+          "text": "<code>testLogicalAnd(50)</code> should return \"Yes\"'",
+          "testString": "assert(testLogicalAnd(50) === \"Yes\", '<code>testLogicalAnd(50)</code> should return \"Yes\"')"
+        },
+        {
+          "text": "<code>testLogicalAnd(51)</code> should return \"No\"'",
+          "testString": "assert(testLogicalAnd(51) === \"No\", '<code>testLogicalAnd(51)</code> should return \"No\"')"
+        },
+        {
+          "text": "<code>testLogicalAnd(75)</code> should return \"No\"'",
+          "testString": "assert(testLogicalAnd(75) === \"No\", '<code>testLogicalAnd(75)</code> should return \"No\"')"
+        },
+        {
+          "text": "<code>testLogicalAnd(80)</code> should return \"No\"'",
+          "testString": "assert(testLogicalAnd(80) === \"No\", '<code>testLogicalAnd(80)</code> should return \"No\"')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador lógico y",
+          "description": [
+            "A veces necesitarás probar más de una cosa a la vez. El operador <dfn>lógico y</dfn> (<code>&&</code>) retorna <code>true</code>(verdadero) si y solo si los <dfn>operandos</dfn> a la izquierda y derecha de este son verdaderos.",
+            "El mismo efecto podría lograrse anidando una sentencia if dentro de otro if:",
+            "<blockquote>if (num > 5) {<br>  if (num < 10) {<br>    return \"Yes\";<br>  }<br>}<br>return \"No\";</blockquote>",
+            "solo retornará \"Yes\" si <code>num</code> está entre <code>6</code> y <code>9</code> (6 y 9 incluidos). La misma lógica puede ser escrita como:",
+            "<blockquote>if (num > 5 && num < 10) {<br>  return \"Yes\";<br>}<br>return \"No\";</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Combina las dos sentencias if dentro de una sentencia la cual retornará <code>\"Yes\"</code> si <code>val</code> es menor o igual a <code>50</code> y mayor o igual a <code>25</code>. De otra manera, retornará <code>\"No\"</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testLogicalAnd(val) {",
+            "  // Only change code below this line",
+            "",
+            "  if (val) {",
+            "    if (val) {",
+            "      return \"Yes\";",
+            "    }",
+            "  }",
+            "",
+            "  // Only change code above this line",
+            "  return \"No\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testLogicalAnd(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244d9",
+      "title": "Comparisons with the Logical Or Operator",
+      "description": [
+        "The <dfn>logical or</dfn> operator (<code>||</code>) returns <code>true</code> if either of the <dfn>operands</dfn> is <code>true</code>. Otherwise, it returns <code>false</code>.",
+        "The <dfn>logical or</dfn> operator is composed of two pipe symbols (<code>|</code>). This can typically be found between your Backspace and Enter keys.",
+        "The pattern below should look familiar from prior waypoints:",
+        "<blockquote>if (num > 10) {<br>  return \"No\";<br>}<br>if (num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+        "will return \"Yes\" only if <code>num</code> is between <code>5</code> and <code>10</code> (5 and 10 included). The same logic can be written as:",
+        "<blockquote>if (num > 10 || num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+        "<hr>",
+        "Combine the two <code>if</code> statements into one statement which returns <code>\"Outside\"</code> if <code>val</code> is not between <code>10</code> and <code>20</code>, inclusive. Otherwise, return <code>\"Inside\"</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testLogicalOr(val) {\n  if (val < 10 || val > 20) {\n    return \"Outside\";\n  }\n  return \"Inside\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should use the <code>||</code> operator once'",
+          "testString": "assert(code.match(/\\|\\|/g).length === 1, 'You should use the <code>||</code> operator once')"
+        },
+        {
+          "text": "You should only have one <code>if</code> statement'",
+          "testString": "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement')"
+        },
+        {
+          "text": "<code>testLogicalOr(0)</code> should return \"Outside\"'",
+          "testString": "assert(testLogicalOr(0) === \"Outside\", '<code>testLogicalOr(0)</code> should return \"Outside\"')"
+        },
+        {
+          "text": "<code>testLogicalOr(9)</code> should return \"Outside\"'",
+          "testString": "assert(testLogicalOr(9) === \"Outside\", '<code>testLogicalOr(9)</code> should return \"Outside\"')"
+        },
+        {
+          "text": "<code>testLogicalOr(10)</code> should return \"Inside\"'",
+          "testString": "assert(testLogicalOr(10) === \"Inside\", '<code>testLogicalOr(10)</code> should return \"Inside\"')"
+        },
+        {
+          "text": "<code>testLogicalOr(15)</code> should return \"Inside\"'",
+          "testString": "assert(testLogicalOr(15) === \"Inside\", '<code>testLogicalOr(15)</code> should return \"Inside\"')"
+        },
+        {
+          "text": "<code>testLogicalOr(19)</code> should return \"Inside\"'",
+          "testString": "assert(testLogicalOr(19) === \"Inside\", '<code>testLogicalOr(19)</code> should return \"Inside\"')"
+        },
+        {
+          "text": "<code>testLogicalOr(20)</code> should return \"Inside\"'",
+          "testString": "assert(testLogicalOr(20) === \"Inside\", '<code>testLogicalOr(20)</code> should return \"Inside\"')"
+        },
+        {
+          "text": "<code>testLogicalOr(21)</code> should return \"Outside\"'",
+          "testString": "assert(testLogicalOr(21) === \"Outside\", '<code>testLogicalOr(21)</code> should return \"Outside\"')"
+        },
+        {
+          "text": "<code>testLogicalOr(25)</code> should return \"Outside\"'",
+          "testString": "assert(testLogicalOr(25) === \"Outside\", '<code>testLogicalOr(25)</code> should return \"Outside\"')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "La comparación con el operador lógico o",
+          "description": [
+            "El operador <dfn>lógico o</dfn> (<code>||</code>) retorna <code>true</code>(verdadero) si cualquiera de los <dfn>operandos</dfn> es <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso).",
+            "El patrón de abajo debería ser familiar de los puntos de referencia anteriores:",
+            "<blockquote>if (num > 10) {<br>  return \"No\";<br>}<br>if (num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+            "retornará \"Yes\" solo si <code>num</code> está entre <code>5</code> y <code>10</code> (5 y 10 incluidos). La misma lógica puede ser escrita como:",
+            "<blockquote>if (num > 10 || num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Combina las dos sentencias <code>if</code> dentro de una sentencia la cual retorne <code>\"Outside\"</code> si <code>val</code> no está entre <code>10</code> y <code>20</code>, inclusive. De otra manera, retorna <code>\"Inside\"</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testLogicalOr(val) {",
+            "  // Only change code below this line",
+            "",
+            "  if (val) {",
+            "    return \"Outside\";",
+            "  }",
+            "",
+            "  if (val) {",
+            "    return \"Outside\";",
+            "  }",
+            "",
+            "  // Only change code above this line",
+            "  return \"Inside\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testLogicalOr(15);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244da",
+      "title": "Introducing Else Statements",
+      "description": [
+        "When a condition for an <code>if</code> statement is true, the block of code following it is executed. What about when that condition is false?  Normally nothing would happen. With an <code>else</code> statement, an alternate block of code can be executed.",
+        "<blockquote>if (num > 10) {<br>  return \"Bigger than 10\";<br>} else {<br>  return \"10 or Less\";<br>}</blockquote>",
+        "<hr>",
+        "Combine the <code>if</code> statements into a single <code>if/else</code> statement."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testElse(val) {\n  var result = \"\";\n  if(val > 5) {\n    result = \"Bigger than 5\";\n  } else {\n    result = \"5 or Smaller\";\n  }\n  return result;\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should only have one <code>if</code> statement in the editor'",
+          "testString": "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement in the editor')"
+        },
+        {
+          "text": "You should use an <code>else</code> statement'",
+          "testString": "assert(/else/g.test(code), 'You should use an <code>else</code> statement')"
+        },
+        {
+          "text": "<code>testElse(4)</code> should return \"5 or Smaller\"'",
+          "testString": "assert(testElse(4) === \"5 or Smaller\", '<code>testElse(4)</code> should return \"5 or Smaller\"')"
+        },
+        {
+          "text": "<code>testElse(5)</code> should return \"5 or Smaller\"'",
+          "testString": "assert(testElse(5) === \"5 or Smaller\", '<code>testElse(5)</code> should return \"5 or Smaller\"')"
+        },
+        {
+          "text": "<code>testElse(6)</code> should return \"Bigger than 5\"'",
+          "testString": "assert(testElse(6) === \"Bigger than 5\", '<code>testElse(6)</code> should return \"Bigger than 5\"')"
+        },
+        {
+          "text": "<code>testElse(10)</code> should return \"Bigger than 5\"'",
+          "testString": "assert(testElse(10) === \"Bigger than 5\", '<code>testElse(10)</code> should return \"Bigger than 5\"')"
+        },
+        {
+          "text": "Do not change the code above or below the lines.'",
+          "testString": "assert(/var result = \"\";/.test(code) && /return result;/.test(code), 'Do not change the code above or below the lines.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Introducción de las sentencias else",
+          "description": [
+            "Cuando una condición de una sentencia <code>if</code> es verdadera, el siguiente bloque de código es ejecutado. ¿Y cuando esa condición es falsa? Normalmente nada pasaría. Con una sentencia <code>else</code>(además), un bloque alternativo de código puede ser ejecutado.",
+            "<blockquote>if (num > 10) {<br>  return \"Más grande que 10\";<br>} else {<br>  return \"10 o Menos\";<br>}</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Combina las sentencias <code>if</code> dentro de una sola sentencia <code>if/else</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testElse(val) {",
+            "  var result = \"\";",
+            "  // Only change code below this line",
+            "  ",
+            "  if (val > 5) {",
+            "    result = \"Bigger than 5\";",
+            "  }",
+            "  ",
+            "  if (val <= 5) {",
+            "    result = \"5 or Smaller\";",
+            "  }",
+            "  ",
+            "  // Only change code above this line",
+            "  return result;",
+            "}",
+            "",
+            "// Change this value to test",
+            "testElse(4);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244db",
+      "title": "Introducing Else If Statements",
+      "description": [
+        "If you have multiple conditions that need to be addressed, you can chain <code>if</code> statements together with <code>else if</code> statements.",
+        "<blockquote>if (num > 15) {<br>  return \"Bigger than 15\";<br>} else if (num < 5) {<br>  return \"Smaller than 5\";<br>} else {<br>  return \"Between 5 and 15\";<br>}</blockquote>",
+        "<hr>",
+        "Convert the logic to use <code>else if</code> statements."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testElseIf(val) {\n  if(val > 10) {\n    return \"Greater than 10\";\n  } else if(val < 5) {\n    return \"Smaller than 5\";\n  } else {\n    return \"Between 5 and 10\";\n  }\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should have at least two <code>else</code> statements'",
+          "testString": "assert(code.match(/else/g).length > 1, 'You should have at least two <code>else</code> statements')"
+        },
+        {
+          "text": "You should have at least two <code>if</code> statements'",
+          "testString": "assert(code.match(/if/g).length > 1, 'You should have at least two <code>if</code> statements')"
+        },
+        {
+          "text": "<code>testElseIf(0)</code> should return \"Smaller than 5\"'",
+          "testString": "assert(testElseIf(0) === \"Smaller than 5\", '<code>testElseIf(0)</code> should return \"Smaller than 5\"')"
+        },
+        {
+          "text": "<code>testElseIf(5)</code> should return \"Between 5 and 10\"'",
+          "testString": "assert(testElseIf(5) === \"Between 5 and 10\", '<code>testElseIf(5)</code> should return \"Between 5 and 10\"')"
+        },
+        {
+          "text": "<code>testElseIf(7)</code> should return \"Between 5 and 10\"'",
+          "testString": "assert(testElseIf(7) === \"Between 5 and 10\", '<code>testElseIf(7)</code> should return \"Between 5 and 10\"')"
+        },
+        {
+          "text": "<code>testElseIf(10)</code> should return \"Between 5 and 10\"'",
+          "testString": "assert(testElseIf(10) === \"Between 5 and 10\", '<code>testElseIf(10)</code> should return \"Between 5 and 10\"')"
+        },
+        {
+          "text": "<code>testElseIf(12)</code> should return \"Greater than 10\"'",
+          "testString": "assert(testElseIf(12) === \"Greater than 10\", '<code>testElseIf(12)</code> should return \"Greater than 10\"')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Introducción de las sentencias else if",
+          "description": [
+            "Si tienes múltiples condiciones que deben abordarse, puedes encadenar sentencias <code>if</code> juntas con sentencias <code>else if</code>.",
+            "<blockquote>if (num > 15) {<br>  return \"Más grande que 15\";<br>} else if (num < 5) {<br>  return \"Más pequeño que 5\";<br>} else {<br>  return \"Entre 5 y 15\";<br>}</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Convierte la lógica para usar sentencias <code>else if</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testElseIf(val) {",
+            "  if (val > 10) {",
+            "    return \"Greater than 10\";",
+            "  }",
+            "  ",
+            "  if (val < 5) {",
+            "    return \"Smaller than 5\";",
+            "  }",
+            "  ",
+            "  return \"Between 5 and 10\";",
+            "}",
+            "",
+            "// Change this value to test",
+            "testElseIf(7);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "5690307fddb111c6084545d7",
+      "title": "Logical Order in If Else Statements",
+      "description": [
+        "Order is important in <code>if</code>, <code>else if</code> statements.",
+        "The function is executed from top to bottom so you will want to be careful of what statement comes first.",
+        "Take these two functions as an example.",
+        "Here's the first:",
+        "<blockquote>function foo(x) {<br>  if (x < 1) {<br>    return \"Less than one\";<br>  } else if (x < 2) {<br>    return \"Less than two\";<br>  } else {<br>    return \"Greater than or equal to two\";<br>  }<br>}</blockquote>",
+        "And the second just switches the order of the statements:",
+        "<blockquote>function bar(x) {<br>  if (x < 2) {<br>    return \"Less than two\";<br>  } else if (x < 1) {<br>    return \"Less than one\";<br>  } else {<br>    return \"Greater than or equal to two\";<br>  }<br>}</blockquote>",
+        "While these two functions look nearly identical if we pass a number to both we get different outputs.",
+        "<blockquote>foo(0) // \"Less than one\"<br>bar(0) // \"Less than two\"</blockquote>",
+        "<hr>",
+        "Change the order of logic in the function so that it will return the correct statements in all cases."
+      ],
+      "solutions": [
+        "function orderMyLogic(val) {\n  if(val < 5) {\n    return \"Less than 5\";            \n  } else if (val < 10) {\n    return \"Less than 10\";\n  } else {\n    return \"Greater than or equal to 10\";\n  }\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>orderMyLogic(4)</code> should return \"Less than 5\"'",
+          "testString": "assert(orderMyLogic(4) === \"Less than 5\", '<code>orderMyLogic(4)</code> should return \"Less than 5\"')"
+        },
+        {
+          "text": "<code>orderMyLogic(6)</code> should return \"Less than 10\"'",
+          "testString": "assert(orderMyLogic(6) === \"Less than 10\", '<code>orderMyLogic(6)</code> should return \"Less than 10\"')"
+        },
+        {
+          "text": "<code>orderMyLogic(11)</code> should return \"Greater than or equal to 10\"'",
+          "testString": "assert(orderMyLogic(11) === \"Greater than or equal to 10\", '<code>orderMyLogic(11)</code> should return \"Greater than or equal to 10\"')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Orden lógico en sentencias else if",
+          "description": [
+            "El orden es importante en las sentencia <code>if</code> y <code>else if</code>.",
+            "El ciclo es ejecutado de arriba hacia abajo por lo que tendrás que ser cuidadoso de cual sentencia va primero.",
+            "Toma estas dos funciones como ejemplo.",
+            "Aquí está la primera:",
+            "<blockquote>function foo(x) {<br>  if (x < 1) {<br>    return \"Menor que uno\";<br>  } else if (x < 2) {<br>    return \"Menor que dos\";<br>  } else {<br>    return \"Mayor o igual a dos\";<br>  }<br>}</blockquote>",
+            "Y el segundo solo cambia el orden de las sentencias:",
+            "<blockquote>function bar(x) {<br>  if (x < 2) {<br>    return \"Menor que dos\";<br>  } else if (x < 1) {<br>    return \"Menor que uno\";<br>  } else {<br>    return \"Mayor o igual a dos\";<br>  }<br>}</blockquote>",
+            "Mientras esas dos funciones parecen casi idénticas, si nosotros pasamos un número a ambas obtendremos diferentes salidas.",
+            "<blockquote>foo(0) // \"Menor que uno\"<br>bar(0) // \"Menor que dos\"</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Cambia el orden de la lógica en la función de manera que esta retorne las sentencias correctas en todos los casos."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function orderMyLogic(val) {",
+            "  if (val < 10) {",
+            "    return \"Less than 10\";",
+            "  } else if (val < 5) {",
+            "    return \"Less than 5\";",
+            "  } else {",
+            "    return \"Greater than or equal to 10\";",
+            "  }",
+            "}",
+            "",
+            "// Change this value to test",
+            "orderMyLogic(7);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244dc",
+      "title": "Chaining If Else Statements",
+      "description": [
+        "<code>if/else</code> statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained <code>if</code> / <code>else if</code> statements:",
+        "<blockquote>if (<em>condition1</em>) {<br>  <em>statement1</em><br>} else if (<em>condition2</em>) {<br>  <em>statement2</em><br>} else if (<em>condition3</em>) {<br>  <em>statement3</em><br>. . .<br>} else {<br>  <em>statementN</em><br>}</blockquote>",
+        "<hr>",
+        "Write chained <code>if</code>/<code>else if</code> statements to fulfill the following conditions:",
+        "<code>num &lt;   5</code> - return \"Tiny\"<br><code>num &lt;  10</code> - return \"Small\"<br><code>num &lt; 15</code> - return \"Medium\"<br><code>num &lt; 20</code> - return \"Large\"<br><code>num >= 20</code>  - return \"Huge\""
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function testSize(num) {\n  if (num < 5) {\n    return \"Tiny\";\n  } else if (num < 10) {\n    return \"Small\";\n  } else if (num < 15) {\n    return \"Medium\";\n  } else if (num < 20) {\n    return \"Large\";\n  } else {\n    return \"Huge\";\n  }\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should have at least four <code>else</code> statements'",
+          "testString": "assert(code.match(/else/g).length > 3, 'You should have at least four <code>else</code> statements')"
+        },
+        {
+          "text": "You should have at least four <code>if</code> statements'",
+          "testString": "assert(code.match(/if/g).length > 3, 'You should have at least four <code>if</code> statements')"
+        },
+        {
+          "text": "You should have at least one <code>return</code> statement'",
+          "testString": "assert(code.match(/return/g).length >= 1, 'You should have at least one <code>return</code> statement')"
+        },
+        {
+          "text": "<code>testSize(0)</code> should return \"Tiny\"'",
+          "testString": "assert(testSize(0) === \"Tiny\", '<code>testSize(0)</code> should return \"Tiny\"')"
+        },
+        {
+          "text": "<code>testSize(4)</code> should return \"Tiny\"'",
+          "testString": "assert(testSize(4) === \"Tiny\", '<code>testSize(4)</code> should return \"Tiny\"')"
+        },
+        {
+          "text": "<code>testSize(5)</code> should return \"Small\"'",
+          "testString": "assert(testSize(5) === \"Small\", '<code>testSize(5)</code> should return \"Small\"')"
+        },
+        {
+          "text": "<code>testSize(8)</code> should return \"Small\"'",
+          "testString": "assert(testSize(8) === \"Small\", '<code>testSize(8)</code> should return \"Small\"')"
+        },
+        {
+          "text": "<code>testSize(10)</code> should return \"Medium\"'",
+          "testString": "assert(testSize(10) === \"Medium\", '<code>testSize(10)</code> should return \"Medium\"')"
+        },
+        {
+          "text": "<code>testSize(14)</code> should return \"Medium\"'",
+          "testString": "assert(testSize(14) === \"Medium\", '<code>testSize(14)</code> should return \"Medium\"')"
+        },
+        {
+          "text": "<code>testSize(15)</code> should return \"Large\"'",
+          "testString": "assert(testSize(15) === \"Large\", '<code>testSize(15)</code> should return \"Large\"')"
+        },
+        {
+          "text": "<code>testSize(17)</code> should return \"Large\"'",
+          "testString": "assert(testSize(17) === \"Large\", '<code>testSize(17)</code> should return \"Large\"')"
+        },
+        {
+          "text": "<code>testSize(20)</code> should return \"Huge\"'",
+          "testString": "assert(testSize(20) === \"Huge\", '<code>testSize(20)</code> should return \"Huge\"')"
+        },
+        {
+          "text": "<code>testSize(25)</code> should return \"Huge\"'",
+          "testString": "assert(testSize(25) === \"Huge\", '<code>testSize(25)</code> should return \"Huge\"')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Encadenamiento de sentencias else if",
+          "description": [
+            "Las sentencias <code>if/else</code>(si/de lo contrario) pueden ser encadenadas juntas por una lógica compleja. Aquí está el <dfn>pseudocódigo</dfn> de múltiples sentencias <code>if</code> / <code>else if</code> encadenadas:",
+            "<blockquote>if (<em>condicion1</em>) {<br>  <em>sentencias1</em><br>} else if (<em>condicion2</em>) {<br>  <em>sentencias2</em><br>} else if (<em>condicion3</em>) {<br>  <em>sentencias3</em><br>. . .<br>} else {<br>  <em>sentenciasN</em><br>}</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Escribe sentencias <code>if</code>/<code>else if</code> encadenadas para cumplir las siguientes condiciones:",
+            "<code>num &lt;   5</code> - retorna \"Tiny\"<br><code>num &lt;  10</code> - retorna \"Small\"<br><code>num &lt; 15</code> - retorna \"Medium\"<br><code>num &lt; 20</code> - retorna \"Large\"<br><code>num >= 20</code>  - retorna \"Huge\""
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function testSize(num) {",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  return \"Change Me\";",
+            "  // Only change code above this line",
+            "}",
+            "",
+            "// Change this value to test",
+            "testSize(7);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "5664820f61c48e80c9fa476c",
+      "title": "Golf Code",
+      "description": [
+        "In the game of <a href=\"https://en.wikipedia.org/wiki/Golf\" target=\"_blank\">golf</a> each hole has a <code>par</code> meaning the average number of <code>strokes</code> a golfer is expected to make in order to sink the ball in a hole to complete the play. Depending on how far above or below <code>par</code> your <code>strokes</code> are, there is a different nickname.",
+        "Your function will be passed <code>par</code> and <code>strokes</code> arguments. Return the correct string according to this table which lists the strokes in order of priority; top (highest) to bottom (lowest):",
+        "<table class=\"table table-striped\"><thead><tr><th>Strokes</th><th>Return</th></tr></thead><tbody><tr><td>1</td><td>\"Hole-in-one!\"</td></tr><tr><td>&lt;= par - 2</td><td>\"Eagle\"</td></tr><tr><td>par - 1</td><td>\"Birdie\"</td></tr><tr><td>par</td><td>\"Par\"</td></tr><tr><td>par + 1</td><td>\"Bogey\"</td></tr><tr><td>par + 2</td><td>\"Double Bogey\"</td></tr><tr><td>&gt;= par + 3</td><td>\"Go Home!\"</td></tr></tbody></table>",
+        "<code>par</code> and <code>strokes</code> will always be numeric and positive. We have added an array of all the names for your convenience."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function golfScore(par, strokes) {\n  if (strokes === 1) {\n    return \"Hole-in-one!\";\n  }\n  \n  if (strokes <= par - 2) {\n    return \"Eagle\";\n  }\n  \n  if (strokes === par - 1) {\n    return \"Birdie\";\n  }\n  \n  if (strokes === par) {\n    return \"Par\";\n  }\n  \n  if (strokes === par + 1) {\n    return \"Bogey\";\n  }\n  \n  if(strokes === par + 2) {\n    return \"Double Bogey\";\n  }\n  \n  return \"Go Home!\";\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>golfScore(4, 1)</code> should return \"Hole-in-one!\"'",
+          "testString": "assert(golfScore(4, '<code>golfScore(4, 1)</code> should return \"Hole-in-one!\"')"
+        },
+        {
+          "text": "<code>golfScore(4, 2)</code> should return \"Eagle\"'",
+          "testString": "assert(golfScore(4, '<code>golfScore(4, 2)</code> should return \"Eagle\"')"
+        },
+        {
+          "text": "<code>golfScore(5, 2)</code> should return \"Eagle\"'",
+          "testString": "assert(golfScore(5, '<code>golfScore(5, 2)</code> should return \"Eagle\"')"
+        },
+        {
+          "text": "<code>golfScore(4, 3)</code> should return \"Birdie\"'",
+          "testString": "assert(golfScore(4, '<code>golfScore(4, 3)</code> should return \"Birdie\"')"
+        },
+        {
+          "text": "<code>golfScore(4, 4)</code> should return \"Par\"'",
+          "testString": "assert(golfScore(4, '<code>golfScore(4, 4)</code> should return \"Par\"')"
+        },
+        {
+          "text": "<code>golfScore(1, 1)</code> should return \"Hole-in-one!\"'",
+          "testString": "assert(golfScore(1, '<code>golfScore(1, 1)</code> should return \"Hole-in-one!\"')"
+        },
+        {
+          "text": "<code>golfScore(5, 5)</code> should return \"Par\"'",
+          "testString": "assert(golfScore(5, '<code>golfScore(5, 5)</code> should return \"Par\"')"
+        },
+        {
+          "text": "<code>golfScore(4, 5)</code> should return \"Bogey\"'",
+          "testString": "assert(golfScore(4, '<code>golfScore(4, 5)</code> should return \"Bogey\"')"
+        },
+        {
+          "text": "<code>golfScore(4, 6)</code> should return \"Double Bogey\"'",
+          "testString": "assert(golfScore(4, '<code>golfScore(4, 6)</code> should return \"Double Bogey\"')"
+        },
+        {
+          "text": "<code>golfScore(4, 7)</code> should return \"Go Home!\"'",
+          "testString": "assert(golfScore(4, '<code>golfScore(4, 7)</code> should return \"Go Home!\"')"
+        },
+        {
+          "text": "<code>golfScore(5, 9)</code> should return \"Go Home!\"'",
+          "testString": "assert(golfScore(5, '<code>golfScore(5, 9)</code> should return \"Go Home!\"')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Código de golf",
+          "description": [
+            "En el juego de <a href='https://es.wikipedia.org/wiki/Golf' target='_blank'>golf</a> cada hoyo tiene un <dfn>par</dfn> promedio para el número de <dfn>golpes</dfn> necesarios para meter la pelota. Dependiendo de que tan lejos por encima o por debajo del <code>par</code> estén tus <code>golpes</code>, habrá un sobrenombre diferente.",
+            "Tu función pasará un <code>par</code> y el número de <code>golpes</code>, y retornará una cadena de acuerdo a esta tabla (basada en el orden de prioridad - arriba (lo más alto) hacia abajo (lo más bajo)):",
+            "<table class=\"table table-striped\"><thead><tr><th>Golpes</th><th>Retorna</th></tr></thead><tbody><tr><td>1</td><td>\"Hole-in-one!\"</td></tr><tr><td>&lt;= par - 2</td><td>\"Eagle\"</td></tr><tr><td>par - 1</td><td>\"Birdie\"</td></tr><tr><td>par</td><td>\"Par\"</td></tr><tr><td>par + 1</td><td>\"Bogey\"</td></tr><tr><td>par + 2</td><td>\"Double Bogey\"</td></tr><tr><td>&gt;= par + 3</td><td>\"Go Home!\"</td></tr></tbody></table>",
+            "Tanto <code>par</code> como <code>golpes</code> siempre serán numéricos y positivos."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var names = [\"Hole-in-one!\", \"Eagle\", \"Birdie\", \"Par\", \"Bogey\", \"Double Bogey\", \"Go Home!\"];",
+            "function golfScore(par, strokes) {",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  return \"Change Me\";",
+            "  // Only change code above this line",
+            "}",
+            "",
+            "// Change these values to test",
+            "golfScore(5, 4);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244dd",
+      "title": "Selecting from Many Options with Switch Statements",
+      "description": [
+        "If you have many options to choose from, use a <code>switch</code> statement. A <code>switch</code> statement tests a value and can have many <code>case</code> statements which define various possible values. Statements are executed from the first matched <code>case</code> value until a <code>break</code> is encountered.",
+        "Here is a <dfn>pseudocode</dfn> example:",
+        "<blockquote>switch(num) {<br>  case value1:<br>    statement1;<br>    break;<br>  case value2:<br>    statement2;<br>    break;<br>...<br>  case valueN:<br>    statementN;<br>    break;<br>}</blockquote>",
+        "<code>case</code> values are tested with strict equality (<code>===</code>). The <code>break</code> tells JavaScript to stop executing statements. If the <code>break</code> is omitted, the next statement will be executed.",
+        "<hr>",
+        "Write a switch statement which tests <code>val</code> and sets <code>answer</code> for the following conditions:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function caseInSwitch(val) {\n  var answer = \"\";\n\n  switch(val) {\n    case 1:\n      answer = \"alpha\";\n      break;\n    case 2:\n      answer = \"beta\";\n      break;\n    case 3:\n      answer = \"gamma\";\n      break;\n    case 4:\n      answer = \"delta\";\n  }\n  return answer;  \n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>caseInSwitch(1)</code> should have a value of \"alpha\"'",
+          "testString": "assert(caseInSwitch(1) === \"alpha\", '<code>caseInSwitch(1)</code> should have a value of \"alpha\"')"
+        },
+        {
+          "text": "<code>caseInSwitch(2)</code> should have a value of \"beta\"'",
+          "testString": "assert(caseInSwitch(2) === \"beta\", '<code>caseInSwitch(2)</code> should have a value of \"beta\"')"
+        },
+        {
+          "text": "<code>caseInSwitch(3)</code> should have a value of \"gamma\"'",
+          "testString": "assert(caseInSwitch(3) === \"gamma\", '<code>caseInSwitch(3)</code> should have a value of \"gamma\"')"
+        },
+        {
+          "text": "<code>caseInSwitch(4)</code> should have a value of \"delta\"'",
+          "testString": "assert(caseInSwitch(4) === \"delta\", '<code>caseInSwitch(4)</code> should have a value of \"delta\"')"
+        },
+        {
+          "text": "You should not use any <code>if</code> or <code>else</code> statements'",
+          "testString": "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements')"
+        },
+        {
+          "text": "You should have at least 3 <code>break</code> statements'",
+          "testString": "assert(code.match(/break/g).length > 2, 'You should have at least 3 <code>break</code> statements')"
+        }
+      ],
+      "type": "waypoint",
+      "MDNlinks": [
+        "Switch Statement"
+      ],
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Seleccionar desde diferentes opciones con la sentencia switch",
+          "description": [
+            "Si tienes varias opciones para elegir, usa una sentencia <code>switch</code>. Una sentencia <code>switch</code> prueba un valor y puede tener varias sentencias <code>case</code> las cuales definen varios posibles valores. Las sentencias son ejecutadas desde el primer valor <code>case</code> igualado hasta que se encuentr un <code>break</code>.",
+            "Aquí hay un <dfn>pseudocódigo</dfn> de ejemplo:",
+            "<blockquote>switch(num) {<br>  case valor1:<br>    sentencia1;<br>    break;<br>  case valor2:<br>    sentencia2;<br>    break;<br>...<br>  case valorN:<br>    sentenciaN;<br>    break;<br>}</blockquote>",
+            "Los valores <code>case</code> son probados con estricta igualdad (<code>===</code>). El <code>break</code> le dice a JavaScript que pare la ejecución del bloque de sentencias en el que está. Si se omite <code>break</code>, se ejecutará la siguiente sentencia.",
+            "<h4>Instrucciones</h4>",
+            "Escribe una sentencia <code>switch</code> que pruebe <code>val</code> y establezca <code>answer</code> para las siguientes condiciones:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function caseInSwitch(val) {",
+            "  var answer = \"\";",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  ",
+            "  // Only change code above this line  ",
+            "  return answer;  ",
+            "}",
+            "",
+            "// Change this value to test",
+            "caseInSwitch(1);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244de",
+      "title": "Adding a Default Option in Switch Statements",
+      "description": [
+        "In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.",
+        "A <code>default</code> statement should be the last case.",
+        "<blockquote>switch (num) {<br>  case value1:<br>    statement1;<br>    break;<br>  case value2:<br>    statement2;<br>    break;<br>...<br>  default:<br>    defaultStatement;<br>    break;<br>}</blockquote>",
+        "<hr>",
+        "Write a switch statement to set <code>answer</code> for the following conditions:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function switchOfStuff(val) {\n  var answer = \"\";\n\n  switch(val) {\n    case \"a\":\n      answer = \"apple\";\n      break;\n    case \"b\":\n      answer = \"bird\";\n      break;\n    case \"c\":\n      answer = \"cat\";\n      break;\n    default:\n      answer = \"stuff\";\n  }\n  return answer;  \n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>switchOfStuff(\"a\")</code> should have a value of \"apple\"'",
+          "testString": "assert(switchOfStuff(\"a\") === \"apple\", '<code>switchOfStuff(\"a\")</code> should have a value of \"apple\"')"
+        },
+        {
+          "text": "<code>switchOfStuff(\"b\")</code> should have a value of \"bird\"'",
+          "testString": "assert(switchOfStuff(\"b\") === \"bird\", '<code>switchOfStuff(\"b\")</code> should have a value of \"bird\"')"
+        },
+        {
+          "text": "<code>switchOfStuff(\"c\")</code> should have a value of \"cat\"'",
+          "testString": "assert(switchOfStuff(\"c\") === \"cat\", '<code>switchOfStuff(\"c\")</code> should have a value of \"cat\"')"
+        },
+        {
+          "text": "<code>switchOfStuff(\"d\")</code> should have a value of \"stuff\"'",
+          "testString": "assert(switchOfStuff(\"d\") === \"stuff\", '<code>switchOfStuff(\"d\")</code> should have a value of \"stuff\"')"
+        },
+        {
+          "text": "<code>switchOfStuff(4)</code> should have a value of \"stuff\"'",
+          "testString": "assert(switchOfStuff(4) === \"stuff\", '<code>switchOfStuff(4)</code> should have a value of \"stuff\"')"
+        },
+        {
+          "text": "You should not use any <code>if</code> or <code>else</code> statements'",
+          "testString": "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements')"
+        },
+        {
+          "text": "You should use a <code>default</code> statement'",
+          "testString": "assert(switchOfStuff(\"string-to-trigger-default-case\") === \"stuff\", 'You should use a <code>default</code> statement')"
+        },
+        {
+          "text": "You should have at least 3 <code>break</code> statements'",
+          "testString": "assert(code.match(/break/g).length > 2, 'You should have at least 3 <code>break</code> statements')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Agregar una opción por omisión (default) en una sentencia switch",
+          "description": [
+            "En una sentencia <code>switch</code> puede que no seas capaz de especificar todos los posibles valores en las sentencias <code>case</code>. En su lugar, puedes agregar la sentencia <code>default</code> la cual será ejecutada si no es encontrada ninguna coincidencia con alguna sentencia <code>case</code>. Piensa en esto como la última sentencia <code>else</code> en una cadena <code>if/else</code>.",
+            "Una sentencia <code>default</code> debería ser el último caso.",
+            "<blockquote>switch(num) {<br>  case valor1:<br>    sentencia1;<br>    break;<br>  case valor2:<br>    sentencia2;<br>    break;<br>...<br>  default:<br>    sentenciaDefault;<br>}</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Escribe una sentencia switch para establecer <code>answer</code> para las siguientes condiciones:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/adding-a-default-option-in-switch-statements",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function switchOfStuff(val) {",
+            "  var answer = \"\";",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  ",
+            "  // Only change code above this line  ",
+            "  return answer;  ",
+            "}",
+            "",
+            "// Change this value to test",
+            "switchOfStuff(1);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244df",
+      "title": "Multiple Identical Options in Switch Statements",
+      "description": [
+        "If the <code>break</code> statement is omitted from a <code>switch</code> statement's <code>case</code>, the following <code>case</code> statement(s) are executed until a <code>break</code> is encountered. If you have multiple inputs with the same output, you can represent them in a <code>switch</code> statement like this:",
+        "<blockquote>switch(val) {<br>  case 1:<br>  case 2:<br>  case 3:<br>    result = \"1, 2, or 3\";<br>    break;<br>  case 4:<br>    result = \"4 alone\";<br>}</blockquote>",
+        "Cases for 1, 2, and 3 will all produce the same result.",
+        "<hr>",
+        "Write a switch statement to set <code>answer</code> for the following ranges:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
+        "<strong>Note</strong><br>You will need to have a <code>case</code> statement for each number in the range."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function sequentialSizes(val) {\n  var answer = \"\";\n  \n  switch(val) {\n    case 1:\n    case 2:\n    case 3:\n      answer = \"Low\";\n      break;\n    case 4:\n    case 5:\n    case 6:\n      answer = \"Mid\";\n      break;\n    case 7:\n    case 8:\n    case 9:\n      answer = \"High\";\n  }\n  \n  return answer;  \n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>sequentialSizes(1)</code> should return \"Low\"'",
+          "testString": "assert(sequentialSizes(1) === \"Low\", '<code>sequentialSizes(1)</code> should return \"Low\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(2)</code> should return \"Low\"'",
+          "testString": "assert(sequentialSizes(2) === \"Low\", '<code>sequentialSizes(2)</code> should return \"Low\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(3)</code> should return \"Low\"'",
+          "testString": "assert(sequentialSizes(3) === \"Low\", '<code>sequentialSizes(3)</code> should return \"Low\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(4)</code> should return \"Mid\"'",
+          "testString": "assert(sequentialSizes(4) === \"Mid\", '<code>sequentialSizes(4)</code> should return \"Mid\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(5)</code> should return \"Mid\"'",
+          "testString": "assert(sequentialSizes(5) === \"Mid\", '<code>sequentialSizes(5)</code> should return \"Mid\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(6)</code> should return \"Mid\"'",
+          "testString": "assert(sequentialSizes(6) === \"Mid\", '<code>sequentialSizes(6)</code> should return \"Mid\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(7)</code> should return \"High\"'",
+          "testString": "assert(sequentialSizes(7) === \"High\", '<code>sequentialSizes(7)</code> should return \"High\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(8)</code> should return \"High\"'",
+          "testString": "assert(sequentialSizes(8) === \"High\", '<code>sequentialSizes(8)</code> should return \"High\"')"
+        },
+        {
+          "text": "<code>sequentialSizes(9)</code> should return \"High\"'",
+          "testString": "assert(sequentialSizes(9) === \"High\", '<code>sequentialSizes(9)</code> should return \"High\"')"
+        },
+        {
+          "text": "You should not use any <code>if</code> or <code>else</code> statements'",
+          "testString": "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements')"
+        },
+        {
+          "text": "You should have nine <code>case</code> statements'",
+          "testString": "assert(code.match(/case/g).length === 9, 'You should have nine <code>case</code> statements')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Múltiples opciones idénticas en una sentencias switch",
+          "description": [
+            "Si la sentencia <code>break</code> es omitida de una sentencia <code>case</code> de un <code>switch</code>, las siguientes sentencias <code>case</code> son ejecutadas hasta que sea encontrado un <code>break</code>. Si tienes multiples entradas con la misma salida, puede representarlas en una sentencia <code>switch</code> así:",
+            "<blockquote>switch(val) {<br>  case 1:<br>  case 2:<br>  case 3:<br>    result = \"1, 2, or 3\";<br>    break;<br>  case 4:<br>    result = \"4 alone\";<br>}</blockquote>",
+            "Los casos 1, 2, y 3 producirán el mismo resultado.",
+            "<h4>Instrucciones</h4>",
+            "Escribe una sentencia <code>switch</code> para establecer <code>answer</code> para los siguientes rangos:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
+            "<strong>Nota</strong><br>Necesitarás tener una sentencia <code>case</code> por cada número en el rango."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function sequentialSizes(val) {",
+            "  var answer = \"\";",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  ",
+            "  // Only change code above this line  ",
+            "  return answer;  ",
+            "}",
+            "",
+            "// Change this value to test",
+            "sequentialSizes(1);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244e0",
+      "title": "Replacing If Else Chains with Switch",
+      "description": [
+        "If you have many options to choose from, a <code>switch</code> statement can be easier to write than many chained <code>if</code>/<code>else if</code> statements. The following:",
+        "<blockquote>if (val === 1) {<br>  answer = \"a\";<br>} else if (val === 2) {<br>  answer = \"b\";<br>} else {<br>  answer = \"c\";<br>}</blockquote>",
+        "can be replaced with:",
+        "<blockquote>switch(val) {<br>  case 1:<br>    answer = \"a\";<br>    break;<br>  case 2:<br>    answer = \"b\";<br>    break;<br>  default:<br>    answer = \"c\";<br>}</blockquote>",
+        "<hr>",
+        "Change the chained <code>if</code>/<code>else if</code> statements into a <code>switch</code> statement."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function chainToSwitch(val) {\n  var answer = \"\";\n\n  switch(val) {\n    case \"bob\":\n      answer = \"Marley\";\n      break;\n    case 42:\n      answer = \"The Answer\";\n      break;\n    case 1:\n      answer = \"There is no #1\";\n      break;\n    case 99:\n      answer = \"Missed me by this much!\";\n      break;\n    case 7:\n      answer = \"Ate Nine\";\n  }\n  return answer;  \n}"
+      ],
+      "tests": [
+        {
+          "text": "You should not use any <code>else</code> statements anywhere in the editor'",
+          "testString": "assert(!/else/g.test(code), 'You should not use any <code>else</code> statements anywhere in the editor')"
+        },
+        {
+          "text": "You should not use any <code>if</code> statements anywhere in the editor'",
+          "testString": "assert(!/if/g.test(code), 'You should not use any <code>if</code> statements anywhere in the editor')"
+        },
+        {
+          "text": "You should have at least four <code>break</code> statements'",
+          "testString": "assert(code.match(/break/g).length >= 4, 'You should have at least four <code>break</code> statements')"
+        },
+        {
+          "text": "<code>chainToSwitch(\"bob\")</code> should be \"Marley\"'",
+          "testString": "assert(chainToSwitch(\"bob\") === \"Marley\", '<code>chainToSwitch(\"bob\")</code> should be \"Marley\"')"
+        },
+        {
+          "text": "<code>chainToSwitch(42)</code> should be \"The Answer\"'",
+          "testString": "assert(chainToSwitch(42) === \"The Answer\", '<code>chainToSwitch(42)</code> should be \"The Answer\"')"
+        },
+        {
+          "text": "<code>chainToSwitch(1)</code> should be \"There is no #1\"'",
+          "testString": "assert(chainToSwitch(1) === \"There is no #1\", '<code>chainToSwitch(1)</code> should be \"There is no #1\"')"
+        },
+        {
+          "text": "<code>chainToSwitch(99)</code> should be \"Missed me by this much!\"'",
+          "testString": "assert(chainToSwitch(99) === \"Missed me by this much!\", '<code>chainToSwitch(99)</code> should be \"Missed me by this much!\"')"
+        },
+        {
+          "text": "<code>chainToSwitch(7)</code> should be \"Ate Nine\"'",
+          "testString": "assert(chainToSwitch(7) === \"Ate Nine\", '<code>chainToSwitch(7)</code> should be \"Ate Nine\"')"
+        },
+        {
+          "text": "<code>chainToSwitch(\"John\")</code> should be \"\" (empty string)'",
+          "testString": "assert(chainToSwitch(\"John\") === \"\", '<code>chainToSwitch(\"John\")</code> should be \"\" (empty string)')"
+        },
+        {
+          "text": "<code>chainToSwitch(156)</code> should be \"\" (empty string)'",
+          "testString": "assert(chainToSwitch(156) === \"\", '<code>chainToSwitch(156)</code> should be \"\" (empty string)')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Reemplazar cadenas if else con switch",
+          "description": [
+            "Si tienes varias opciones para elegir, una sentencia <code>switch</code> puede ser más fácil de escribir que varias sentencias <code>if</code>/<code>if else</code> anidadas. Lo siguiente:",
+            "<blockquote>if (val === 1) {<br>  respuesta = \"a\";<br>} else if (val === 2) {<br>  respuesta = \"b\";<br>} else {<br>  respuesta = \"c\";<br>}</blockquote>",
+            "puede ser reemplazado con:",
+            "<blockquote>switch(val) {<br>  case 1:<br>    respuesta = \"a\";<br>    break;<br>  case 2:<br>    respuesta = \"b\";<br>    break;<br>  default:<br>    respuesta = \"c\";<br>}</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Cambia las sentencias <code>if</code>/<code>if else</code> anidadas dentro de una sentencia <code>switch</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function chainToSwitch(val) {",
+            "  var answer = \"\";",
+            "  // Only change code below this line",
+            "  ",
+            "  if (val === \"bob\") {",
+            "    answer = \"Marley\";",
+            "  } else if (val === 42) {",
+            "    answer = \"The Answer\";",
+            "  } else if (val === 1) {",
+            "    answer = \"There is no #1\";",
+            "  } else if (val === 99) {",
+            "    answer = \"Missed me by this much!\";",
+            "  } else if (val === 7) {",
+            "    answer = \"Ate Nine\";",
+            "  }",
+            "  ",
+            "  // Only change code above this line  ",
+            "  return answer;  ",
+            "}",
+            "",
+            "// Change this value to test",
+            "chainToSwitch(7);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "5679ceb97cbaa8c51670a16b",
+      "title": "Returning Boolean Values from Functions",
+      "description": [
+        "You may recall from <a href=\"waypoint-comparison-with-the-equality-operator\" target=\"_blank\">Comparison with the Equality Operator</a> that all comparison operators return a boolean <code>true</code> or <code>false</code> value.",
+        "Sometimes people use an if/else statement to do a comparison, like this:",
+        "<blockquote>function isEqual(a,b) {<br>  if (a === b) {<br>    return true;<br>  } else {<br>    return false;<br>  }<br>}</blockquote>",
+        "But there's a better way to do this. Since <code>===</code> returns <code>true</code> or <code>false</code>, we can return the result of the comparison:",
+        "<blockquote>function isEqual(a,b) {<br>  return a === b;<br>}</blockquote>",
+        "<hr>",
+        "Fix the function <code>isLess</code> to remove the <code>if/else</code> statements."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function isLess(a, b) {\n  return a < b;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>isLess(10,15)</code> should return <code>true</code>'",
+          "testString": "assert(isLess(10, '<code>isLess(10,15)</code> should return <code>true</code>')"
+        },
+        {
+          "text": "<code>isLess(15,10)</code> should return <code>false</code>'",
+          "testString": "assert(isLess(15, '<code>isLess(15,10)</code> should return <code>false</code>')"
+        },
+        {
+          "text": "You should not use any <code>if</code> or <code>else</code> statements'",
+          "testString": "assert(!/if|else/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Retornar valores booleanos desde funciones",
+          "description": [
+            "Tal vez recuerdes de <a href=\"waypoint-comparison-with-the-equality-operator\" target=\"_blank\">La comparación con el operador de igualdad</a> que todos los operadores de comparación retornan un valor booleano <code>true</code> (verdadero) o <code>false</code> (falso).",
+            "Un <dfn>anti-patrón</dfn> común es usar una sentencia <code>if/else</code> para hacer una comparación y entonces retornar <code>true</code> o <code>false</code>:",
+            "<blockquote>function sonIguales(a,b) {<br>  if (a === b) {<br>    return true;<br>  } else {<br>    return false;<br>  }<br>}</blockquote>",
+            "Ya que <code>===</code> returna <code>true</code> (verdadero) o <code>false</code> (falso), podemos simplemente retornar el resultado de la comparación:",
+            "<blockquote>function sonIguales(a,b) {<br>  return a === b;<br>}</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Arregla la función <code>isLess</code> para remover las sentencias <code>if/else</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function isLess(a, b) {",
+            "  // Fix this code",
+            "  if (a < b) {",
+            "    return true;",
+            "  } else {",
+            "    return false;",
+            "  }",
+            "}",
+            "",
+            "// Change these values to test",
+            "isLess(10, 15);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c4",
+      "title": "Return Early Pattern for Functions",
+      "description": [
+        "When a <code>return</code> statement is reached, the execution of the current function stops and control returns to the calling location.",
+        "<strong>Example</strong>",
+        "<blockquote>function myFun() {<br>  console.log(\"Hello\");<br>  return \"World\";<br>  console.log(\"byebye\")<br>}<br>myFun();</blockquote>",
+        "The above outputs \"Hello\" to the console, returns \"World\", but <code>\"byebye\"</code> is never output, because the function exits at the <code>return</code> statement.",
+        "<hr>",
+        "Modify the function <code>abTest</code> so that if <code>a</code> or <code>b</code> are less than <code>0</code> the function will immediately exit with a value of <code>undefined</code>.",
+        "<strong>Hint</strong><br>Remember that <a href='http://www.freecodecamp.org/challenges/understanding-uninitialized-variables' target='_blank'><code>undefined</code> is a keyword</a>, not a string."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function abTest(a, b) {\n  if(a < 0 || b < 0) {\n    return undefined;\n  } \n  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>abTest(2,2)</code> should return a number'",
+          "testString": "assert(typeof abTest(2, '<code>abTest(2,2)</code> should return a number')"
+        },
+        {
+          "text": "<code>abTest(2,2)</code> should return <code>8</code>'",
+          "testString": "assert(abTest(2, '<code>abTest(2,2)</code> should return <code>8</code>')"
+        },
+        {
+          "text": "<code>abTest(-2,2)</code> should return <code>undefined</code>'",
+          "testString": "assert(abTest(-2, '<code>abTest(-2,2)</code> should return <code>undefined</code>')"
+        },
+        {
+          "text": "<code>abTest(2,-2)</code> should return <code>undefined</code>'",
+          "testString": "assert(abTest(2, '<code>abTest(2,-2)</code> should return <code>undefined</code>')"
+        },
+        {
+          "text": "<code>abTest(2,8)</code> should return <code>18</code>'",
+          "testString": "assert(abTest(2, '<code>abTest(2,8)</code> should return <code>18</code>')"
+        },
+        {
+          "text": "<code>abTest(3,3)</code> should return <code>12</code>'",
+          "testString": "assert(abTest(3, '<code>abTest(3,3)</code> should return <code>12</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Retornar un patrón temprano para funciones",
+          "description": [
+            "Cuando se alcanza una sentencia <code>return</code>, la ejecución de la presente función se detiene y el control la retorna a la ubicación de la llamada.",
+            "<strong>Ejemplo</strong>",
+            "<blockquote>function miFuncion() {<br>  console.log(\"Hola\");<br>  return \"Mundo\";<br>  console.log(\"chaochao\")<br>}<br>miFuncion();</blockquote>",
+            "Esta presenta en consola \"Hola\", retorna \"Mundo\", pero <code>\"chaochao\"</code> nunca se presenta, porque la función sale con la sentencia <code>return</code>.",
+            "<h4>Instrucciones</h4>",
+            "Modifica la función <code>abTest</code> de manera que si <code>a</code> o <code>b</code> son menores que <code>0</code> la función saldrá inmediatamente con un valor <code>undefined</code>.",
+            "<strong>Pista</strong><br>Recuerda que <a href='http://www.freecodecamp.org/challenges/understanding-uninitialized-variables' target='_blank'><code>undefined</code> es una palabra clave</a>, no una cadena."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "function abTest(a, b) {",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  ",
+            "  // Only change code above this line",
+            "",
+            "  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));",
+            "}",
+            "",
+            "// Change values below to test your code",
+            "abTest(2,2);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "565bbe00e9cc8ac0725390f4",
+      "title": "Counting Cards",
+      "description": [
+        "In the casino game Blackjack, a player can gain an advantage over the house by keeping track of the relative number of high and low cards remaining in the deck. This is called <a href='https://en.wikipedia.org/wiki/Card_counting' target='_blank'>Card Counting</a>.",
+        "Having more high cards remaining in the deck favors the player. Each card is assigned a value according to the table below. When the count is positive, the player should bet high. When the count is zero or negative, the player should bet low.",
+        "<table class=\"table table-striped\"><thead><tr><th>Count Change</th><th>Cards</th></tr></thead><tbody><tr><td>+1</td><td>2, 3, 4, 5, 6</td></tr><tr><td>0</td><td>7, 8, 9</td></tr><tr><td>-1</td><td>10, 'J', 'Q', 'K', 'A'</td></tr></tbody></table>",
+        "You will write a card counting function. It will receive a <code>card</code> parameter, which can be a number or a string, and increment or decrement the global <code>count</code> variable according to the card's value (see table). The function will then return a string with the current count and the string <code>Bet</code> if the count is positive, or <code>Hold</code> if the count is zero or negative. The current count and the player's decision (<code>Bet</code> or <code>Hold</code>) should be separated by a single space.",
+        "<strong>Example Output</strong><br><code>-3 Hold</code><br><code>5 Bet</code>",
+        "<strong>Hint</strong><br>Do NOT reset <code>count</code> to 0 when value is 7, 8, or 9.<br>Do NOT return an array.<br>Do NOT include quotes (single or double) in the output."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var count = 0;\nfunction cc(card) {\n  switch(card) {\n    case 2:\n    case 3:\n    case 4:\n    case 5:\n    case 6:\n      count++;\n      break;\n    case 10:\n    case 'J':\n    case 'Q':\n    case 'K':\n    case 'A':\n      count--;\n  }\n  if(count > 0) {\n    return count + \" Bet\";\n  } else {\n    return count + \" Hold\";\n  }\n}"
+      ],
+      "tests": [
+        {
+          "text": "Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>'",
+          "testString": "assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === \"5 Bet\") {return true;} return false; })(), 'Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>')"
+        },
+        {
+          "text": "Cards Sequence 7, 8, 9 should return <code>0 Hold</code>'",
+          "testString": "assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === \"0 Hold\") {return true;} return false; })(), 'Cards Sequence 7, 8, 9 should return <code>0 Hold</code>')"
+        },
+        {
+          "text": "Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>'",
+          "testString": "assert((function(){ count = 0; cc(10);cc('J');cc('Q');cc('K');var out = cc('A'); if(out === \"-5 Hold\") {return true;} return false; })(), 'Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>')"
+        },
+        {
+          "text": "Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>'",
+          "testString": "assert((function(){ count = 0; cc(3);cc(7);cc('Q');cc(8);var out = cc('A'); if(out === \"-1 Hold\") {return true;} return false; })(), 'Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>')"
+        },
+        {
+          "text": "Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>'",
+          "testString": "assert((function(){ count = 0; cc(2);cc('J');cc(9);cc(2);var out = cc(7); if(out === \"1 Bet\") {return true;} return false; })(), 'Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>')"
+        },
+        {
+          "text": "Cards Sequence 2, 2, 10 should return <code>1 Bet</code>'",
+          "testString": "assert((function(){ count = 0; cc(2);cc(2);var out = cc(10); if(out === \"1 Bet\") {return true;} return false; })(), 'Cards Sequence 2, 2, 10 should return <code>1 Bet</code>')"
+        },
+        {
+          "text": "Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>'",
+          "testString": "assert((function(){ count = 0; cc(3);cc(2);cc('A');cc(10);var out = cc('K'); if(out === \"-1 Hold\") {return true;} return false; })(), 'Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Contar cartas",
+          "description": [
+            "En el juego de casino Blackjack, un jugador puede conseguir ventaja sobre la casa manteniendo un registro del número relativo de cartas altas y bajas restantes en la baraja. Esto es llamado <a href='https://en.wikipedia.org/wiki/Card_counting' target='_blank'>Conteo de Cartas</a>.",
+            "Tener más cartas altas restantes en la baraja favorece al jugador. A cada carta se le asigna un valor de acuerdo a la tabla de abajo. Cuando el conteo es positivo, el jugador debe apostar alto. Cuando el conteo es cero o negativo, el jugador debe apostar bajo.",
+            "<table class=\"table table-striped\"><thead><tr><th>Valor</th><th>Cartas</th></tr></thead><tbody><tr><td>+1</td><td>2, 3, 4, 5, 6</td></tr><tr><td>0</td><td>7, 8, 9</td></tr><tr><td>-1</td><td>10, 'J', 'Q', 'K','A'</td></tr></tbody></table>",
+            "Vas a escribir una función de conteo de cartas. Esta recibirá un parametro <code>card</code> (carta) e incrementa o decrementa la variable <code>count</code> (conteo) global de acuerdo al valor de la carta (ver tabla). La función retornará entonces una cadena con el presente conteo y la cadena <code>Bet</code> si el conteo es positivo o <code>Hold</code> si el conteo es cero o negativo. El presente conteo y la desición del jugador (<code>Bet</code> o <code>Hold</code>) deben quedar separada por un único espacio.",
+            "<strong>Ejemplo de Salida</strong><br><code>-3 Hold<br>5 Bet</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var count = 0;",
+            "",
+            "function cc(card) {",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  return \"Change Me\";",
+            "  // Only change code above this line",
+            "}",
+            "",
+            "// Add/remove calls to test your function.",
+            "// Note: Only the last will display",
+            "cc(2); cc(3); cc(7); cc('K'); cc('A');"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392d0",
+      "title": "Build JavaScript Objects",
+      "description": [
+        "You may have heard the term <code>object</code> before.",
+        "Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
+        "Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
+        "Here's a sample cat object:",
+        "<blockquote>var cat = {<br>  \"name\": \"Whiskers\",<br>  \"legs\": 4,<br>  \"tails\": 1,<br>  \"enemies\": [\"Water\", \"Dogs\"]<br>};</blockquote>",
+        "In this example, all the properties are stored as strings, such as - <code>\"name\"</code>, <code>\"legs\"</code>, and <code>\"tails\"</code>. However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows:",
+        "<blockquote>var anotherObject = {<br>  make: \"Ford\",<br>  5: \"five\",<br>  \"model\": \"focus\"<br>};</blockquote>",
+        "However, if your object has any non-string properties, JavaScript will automatically typecast them as strings.",
+        "<hr>",
+        "Make an object that represents a dog called <code>myDog</code> which contains the properties <code>\"name\"</code> (a string), <code>\"legs\"</code>, <code>\"tails\"</code> and <code>\"friends\"</code>.",
+        "You can set these object properties to whatever values you want, as long <code>\"name\"</code> is a string, <code>\"legs\"</code> and <code>\"tails\"</code> are numbers, and <code>\"friends\"</code> is an array."
+      ],
+      "solutions": [
+        "var myDog = {\n  \"name\": \"Camper\",\n  \"legs\": 4,\n  \"tails\": 1,\n  \"friends\": [\"everything!\"]  \n};"
+      ],
+      "tests": [
+        {
+          "text": "<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.'",
+          "testString": "assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof z.name === \"string\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.')"
+        },
+        {
+          "text": "<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.'",
+          "testString": "assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof z.legs === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.')"
+        },
+        {
+          "text": "<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.'",
+          "testString": "assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof z.tails === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.')"
+        },
+        {
+          "text": "<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.'",
+          "testString": "assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.')"
+        },
+        {
+          "text": "<code>myDog</code> should only contain all the given properties.'",
+          "testString": "assert((function(z){return Object.keys(z).length === 4;})(myDog), '<code>myDog</code> should only contain all the given properties.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Construye objetos en JavaScript",
+          "description": [
+            "Es posible que haya oído el término <code>objeto</code> antes.",
+            "Los objetos son similares a los <code>vectores</code>, excepto que en lugar de utilizar los índices para acceder y modificar sus datos, pueden accederse mediante lo que se llama <code>propiedades</code>.",
+            "Esto es un objeto de ejemplo:",
+            "<code>var cat = {</code>",
+            "<code>&nbsp;&nbsp;\"name\": \"Whiskers\",</code>",
+            "<code>&nbsp;&nbsp;\"legs\": 4,</code>",
+            "<code>&nbsp;&nbsp;\"tails\": 1,</code>",
+            "<code>&nbsp;&nbsp;\"enemies\": [\"Water\", \"Dogs\"]</code>",
+            "<code>};</code>",
+            "Los objetos son útiles para almacenar datos de manera estructurada, y pueden representar objetos del mundo real, como un gato.",
+            "Vamos a tratar de hacer un objeto que representa un perro, lo llamaremos <code>mydog</code> y contendrá las propiedades <code>\"name\"</code> (una cadena con el nombre), <code>\"legs\"</code> (piernas), <code>\"tails\"</code> (colas) y <code>\"friends\" (amigos)</code>. ",
+            "Podrás establecer estas propiedades del objeto en los valores que desees, siempre y cuando <code>\"name\"</code> sea una cadena, <code>\"legs\"</code> y <code>\"tails\"</code> sean números, y <code>\"friends\"</code> sea un vector."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourDog = {",
+            "  \"name\": \"Camper\",",
+            "  \"legs\": 4,",
+            "  \"tails\": 1,",
+            "  \"friends\": [\"everything!\"]",
+            "};",
+            "",
+            "// Only change code below this line.",
+            "",
+            "var myDog = {",
+            "  ",
+            "  ",
+            "  ",
+            "  ",
+            "};"
+          ],
+          "head": "",
+          "tail": "(function(z){return z;})(myDog);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c7",
+      "title": "Accessing Object Properties with Dot Notation",
+      "description": [
+        "There are two ways to access the properties of an object: dot notation (<code>.</code>) and bracket notation (<code>[]</code>), similar to an array.",
+        "Dot notation is what you use when you know the name of the property you're trying to access ahead of time.",
+        "Here is a sample of using dot notation (<code>.</code>) to read an object's property:",
+        "<blockquote>var myObj = {<br>  prop1: \"val1\",<br>  prop2: \"val2\"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>",
+        "<hr>",
+        "Read in the property values of <code>testObj</code> using dot notation. Set the variable <code>hatValue</code> equal to the object's property <code>hat</code> and set the variable <code>shirtValue</code> equal to the object's property <code>shirt</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var testObj = {\n  \"hat\": \"ballcap\",\n  \"shirt\": \"jersey\",\n  \"shoes\": \"cleats\"\n};\n\nvar hatValue = testObj.hat;  \nvar shirtValue = testObj.shirt;"
+      ],
+      "tests": [
+        {
+          "text": "<code>hatValue</code> should be a string'",
+          "testString": "assert(typeof hatValue === 'string' , '<code>hatValue</code> should be a string')"
+        },
+        {
+          "text": "The value of <code>hatValue</code> should be <code>\"ballcap\"</code>'",
+          "testString": "assert(hatValue === 'ballcap' , 'The value of <code>hatValue</code> should be <code>\"ballcap\"</code>')"
+        },
+        {
+          "text": "<code>shirtValue</code> should be a string'",
+          "testString": "assert(typeof shirtValue === 'string' , '<code>shirtValue</code> should be a string')"
+        },
+        {
+          "text": "The value of <code>shirtValue</code> should be <code>\"jersey\"</code>'",
+          "testString": "assert(shirtValue === 'jersey' , 'The value of <code>shirtValue</code> should be <code>\"jersey\"</code>')"
+        },
+        {
+          "text": "You should use dot notation twice'",
+          "testString": "assert(code.match(/testObj\\.\\w+/g).length > 1, 'You should use dot notation twice')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Acceder a propiedades de objetos con el operador punto",
+          "description": [
+            "Hay dos maneras de acceder a las propiedades de un objeto: con el operador punto (<code>.</code>) y con la notación corchete (<code>[]</code>), similar al caso de un vector.",
+            "El operador punto es el que usas cuando de antemano sabes el nombre de la propiedad que estás intentando acceder.",
+            "Aquí está un ejemplo del uso del operador punto (<code>.</code>) para leer una propiedad de un objeto:",
+            "<blockquote>var miObj = {<br>  prop1: \"val1\",<br>  prop2: \"val2\"<br>};<br>var prop1val = miObj.prop1; // val1<br>var prop2val = miObj.prop2; // val2</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Lee los valores de propiedades de <code>testObj</code> usando notación punto. Asigna la variable <code>hatValue</code> igual a la propiedad objeto <code>hat</code> y asigna la variable <code>shirtValue</code> igual a la propiedad objeto <code>shirt</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var testObj = {",
+            "  \"hat\": \"ballcap\",",
+            "  \"shirt\": \"jersey\",",
+            "  \"shoes\": \"cleats\"",
+            "};",
+            "",
+            "// Only change code below this line",
+            "",
+            "var hatValue = testObj;      // Change this line",
+            "var shirtValue = testObj;    // Change this line"
+          ],
+          "head": "",
+          "tail": "(function(a,b) { return \"hatValue = '\" + a + \"', shirtValue = '\" + b + \"'\"; })(hatValue,shirtValue);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c8",
+      "title": "Accessing Object Properties with Bracket Notation",
+      "description": [
+        "The second way to access the properties of an object is bracket notation (<code>[]</code>). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation.",
+        "However, you can still use bracket notation on object properties without spaces.",
+        "Here is a sample of using bracket notation to read an object's property:",
+        "<blockquote>var myObj = {<br>  \"Space Name\": \"Kirk\",<br>  \"More Space\": \"Spock\",<br>  \"NoSpace\": \"USS Enterprise\"<br>};<br>myObj[\"Space Name\"]; // Kirk<br>myObj['More Space']; // Spock<br>myObj[\"NoSpace\"];    // USS Enterprise</blockquote>",
+        "Note that property names with spaces in them must be in quotes (single or double).",
+        "<hr>",
+        "Read the values of the properties <code>\"an entree\"</code> and <code>\"the drink\"</code> of <code>testObj</code> using bracket notation and assign them to <code>entreeValue</code> and <code>drinkValue</code> respectively."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var testObj = {\n  \"an entree\": \"hamburger\",\n  \"my side\": \"veggies\",\n  \"the drink\": \"water\"\n};\nvar entreeValue = testObj[\"an entree\"];\nvar drinkValue = testObj['the drink'];"
+      ],
+      "tests": [
+        {
+          "text": "<code>entreeValue</code> should be a string'",
+          "testString": "assert(typeof entreeValue === 'string' , '<code>entreeValue</code> should be a string')"
+        },
+        {
+          "text": "The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>'",
+          "testString": "assert(entreeValue === 'hamburger' , 'The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>')"
+        },
+        {
+          "text": "<code>drinkValue</code> should be a string'",
+          "testString": "assert(typeof drinkValue === 'string' , '<code>drinkValue</code> should be a string')"
+        },
+        {
+          "text": "The value of <code>drinkValue</code> should be <code>\"water\"</code>'",
+          "testString": "assert(drinkValue === 'water' , 'The value of <code>drinkValue</code> should be <code>\"water\"</code>')"
+        },
+        {
+          "text": "You should use bracket notation twice'",
+          "testString": "assert(code.match(/testObj\\s*?\\[('|\")[^'\"]+\\1\\]/g).length > 1, 'You should use bracket notation twice')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Acceder a las propiedades de objetos con la notación corchete",
+          "description": [
+            "La segunda manera de acceder a las propiedades de un objeto es con la notación corchete (<code>[]</code>). Si el nombre de la propiedad del objeto que estás intentando acceder tiene un espacio, necesitarás usar la notación corchete.",
+            "Aquí está un ejemplo del uso de la notación corchete para leer una propiedad de un objeto:",
+            "<blockquote>var miObj = {<br>  \"Nombre con espacio\": \"Kirk\",<br>  \"Mas espacio\": \"Spock\"<br>};<br>miObj[\"Nombre con espacio\"]; // Kirk<br>miObj['Mas espacio']; // Spock</blockquote>",
+            "Nota que los nombres de propiedades con espacios tienen que estar entre comillas (apóstrofes o comillas).",
+            "<h4>Instrucciones</h4>",
+            "Lee los valores de las propiedades <code>\"an entree\"</code> y <code>\"the drink\"</code> de <code>testObj</code> usando la notación corchete."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-bracket-notation",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var testObj = {",
+            "  \"an entree\": \"hamburger\",",
+            "  \"my side\": \"veggies\",",
+            "  \"the drink\": \"water\"",
+            "};",
+            "",
+            "// Only change code below this line",
+            "",
+            "var entreeValue = testObj;   // Change this line",
+            "var drinkValue = testObj;    // Change this line"
+          ],
+          "head": "",
+          "tail": "(function(a,b) { return \"entreeValue = '\" + a + \"', drinkValue = '\" + b + \"'\"; })(entreeValue,drinkValue);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244c9",
+      "title": "Accessing Object Properties with Variables",
+      "description": [
+        "Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table.",
+        "Here is an example of using a variable to access a property:",
+        "<blockquote>var dogs = {<br>  Fido: \"Mutt\",\n  Hunter: \"Doberman\",\n  Snoopie: \"Beagle\"<br>};<br>var myDog = \"Hunter\";<br>var myBreed = dogs[myDog];<br>console.log(myBreed); // \"Doberman\"</blockquote>",
+        "Another way you can use this concept is when the property's name is collected dynamically during the program execution, as follows:",
+        "<blockquote>var someObj = {<br>  propName: \"John\"<br>};<br>function propPrefix(str) {<br>  var s = \"prop\";<br>  return s + str;<br>}<br>var someProp = propPrefix(\"Name\"); // someProp now holds the value 'propName'<br>console.log(someObj[someProp]); // \"John\"</blockquote>",
+        "Note that we do <em>not</em> use quotes around the variable name when using it to access the property because we are using the <em>value</em> of the variable, not the <em>name</em>.",
+        "<hr>",
+        "Use the <code>playerNumber</code> variable to look up player <code>16</code> in <code>testObj</code> using bracket notation. Then assign that name to the <code>player</code> variable."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var testObj = {\n  12: \"Namath\",\n  16: \"Montana\",\n  19: \"Unitas\"\n};\nvar playerNumber = 16;\nvar player = testObj[playerNumber];"
+      ],
+      "tests": [
+        {
+          "text": "<code>playerNumber</code> should be a number'",
+          "testString": "assert(typeof playerNumber === 'number', '<code>playerNumber</code> should be a number')"
+        },
+        {
+          "text": "The variable <code>player</code> should be a string'",
+          "testString": "assert(typeof player === 'string', 'The variable <code>player</code> should be a string')"
+        },
+        {
+          "text": "The value of <code>player</code> should be \"Montana\"'",
+          "testString": "assert(player === 'Montana', 'The value of <code>player</code> should be \"Montana\"')"
+        },
+        {
+          "text": "You should use bracket notation to access <code>testObj</code>'",
+          "testString": "assert(/testObj\\s*?\\[.*?\\]/.test(code), 'You should use bracket notation to access <code>testObj</code>')"
+        },
+        {
+          "text": "You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.'",
+          "testString": "assert(!code.match(/player\\s*=\\s*\"|\\'\\s*Montana\\s*\"|\\'\\s*;/gi), 'You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.')"
+        },
+        {
+          "text": "You should be using the variable <code>playerNumber</code> in your bracket notation'",
+          "testString": "assert(/testObj\\s*?\\[\\s*playerNumber\\s*\\]/.test(code), 'You should be using the variable <code>playerNumber</code> in your bracket notation')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Acceder a propiedades de objetos con variables",
+          "description": [
+            "Otro uso de la notación corchete sobre objetos es usar una variable para acceder a una propiedad. Esto puede ser muy útil en iteraciones sobre la lista de propiedades de un objetos o para hacer operaciones de búsqueda.",
+            "Aquí está un ejemplo del uso de una variable para acceder a una propiedad:",
+            "<blockquote>var algunaProp = \"propNombre\";<br>var miObj = {<br>  propNombre: \"Algún valor\"<br >}<br>miObj[algunaProp]; // \"Algún valor\"</blockquote>",
+            "Aquí hay uno más:",
+            "<blockquote>var miPerro = \"Cazador\";<br>var perros = {<br>  Fido: \"Mutt\",\n  Cazador: \"Doberman\",\n  Snoopie: \"Beagle\"<br >}<br>var raza = perros[miPerro]; // \"Cazador\"<br>console.log(raza)// \"Doberman\"</blockquote>",
+            "Nota que <em>no</em> usamos comillas alrededor del nombre de la variable (<code>miPerro</code>) cuando la usamos para acceder a la propiedad (<code>perros[miPerro]</code> porque estamos usando el <em>valor</em> de la variable y no su <em>nombre</em>",
+            "<h4>Instrucciones</h4>",
+            "Usa la variable <code>playerNumber</code> para buscar y asignar a <code>player</code> el jugador <code>16</code> de <code>testObj</code>, usa la notación corchete."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-variables",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var testObj = {",
+            "  12: \"Namath\",",
+            "  16: \"Montana\",",
+            "  19: \"Unitas\"",
+            "};",
+            "",
+            "// Only change code below this line;",
+            "",
+            "var playerNumber;       // Change this Line",
+            "var player = testObj;   // Change this Line"
+          ],
+          "head": "",
+          "tail": "if(typeof player !== \"undefined\"){(function(v){return v;})(player);}"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392d1",
+      "title": "Updating Object Properties",
+      "description": [
+        "After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update.",
+        "For example, let's look at <code>ourDog</code>:",
+        "<blockquote>var ourDog = {<br>  \"name\": \"Camper\",<br>  \"legs\": 4,<br>  \"tails\": 1,<br>  \"friends\": [\"everything!\"]<br>};</blockquote>",
+        "Since he's a particularly happy dog, let's change his name to \"Happy Camper\". Here's how we update his object's name property:",
+        "<code>ourDog.name = \"Happy Camper\";</code> or",
+        "<code>ourDog[\"name\"] = \"Happy Camper\";</code>",
+        "Now when we evaluate <code>ourDog.name</code>, instead of getting \"Camper\", we'll get his new name, \"Happy Camper\".",
+        "<hr>",
+        "Update the <code>myDog</code> object's name property. Let's change her name from \"Coder\" to \"Happy Coder\". You can use either dot or bracket notation."
+      ],
+      "solutions": [
+        "var myDog = {\n  \"name\": \"Coder\",\n  \"legs\": 4,\n  \"tails\": 1,\n  \"friends\": [\"freeCodeCamp Campers\"]\n};\nmyDog.name = \"Happy Coder\";"
+      ],
+      "tests": [
+        {
+          "text": "Update <code>myDog</code>&apos;s <code>\"name\"</code> property to equal \"Happy Coder\".'",
+          "testString": "assert(/happy coder/gi.test(myDog.name), 'Update <code>myDog</code>&apos;s <code>\"name\"</code> property to equal \"Happy Coder\".')"
+        },
+        {
+          "text": "Do not edit the <code>myDog</code> definition'",
+          "testString": "assert(/\"name\": \"Coder\"/.test(code), 'Do not edit the <code>myDog</code> definition')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Actualiza las propiedades de un objeto en JavaScript",
+          "description": [
+            "Después de que hayas creado un objeto de JavaScript, puedes actualizar sus propiedades en cualquier momento, tal y como harías con cualquier otra variable.",
+            "Por ejemplo, echemos un vistazo a <code>ourDog</code>:",
+            "<code>var ourDog = {</code>",
+            "<code>&nbsp;&nbsp;\"name\": \"Camper\",</code>",
+            "<code>&nbsp;&nbsp;\"legs\": 4,</code>",
+            "<code>&nbsp;&nbsp;\"tails\": 1,</code>",
+            "<code>&nbsp;&nbsp;\"friends\": [\"everything!\"]</code>",
+            "<code>};</code>",
+            "Dado que es un perro particularmente feliz, vamos a cambiar su nombre a \"Happy Camper\". Así es como actualizamos la propiedad nombre del objeto: ",
+            "<code>ourDog.name = \"Happy Camper\";</code>",
+            "Ahora, cuando ejecutemos <code>return ourDog.name</code>, en lugar de obtener \"Camper\", vamos a recibir su nuevo nombre, \"Happy Camper\".",
+            "<h4>Instrucciones</h4>",
+            "Vamos a actualizar la propiedad del objeto <code>mydog</code>. Cambiemos su nombre de \"Coder\" a \"Happy Coder\"."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourDog = {",
+            "  \"name\": \"Camper\",",
+            "  \"legs\": 4,",
+            "  \"tails\": 1,",
+            "  \"friends\": [\"everything!\"]",
+            "};",
+            "",
+            "ourDog.name = \"Happy Camper\";",
+            "",
+            "// Setup",
+            "var myDog = {",
+            "  \"name\": \"Coder\",",
+            "  \"legs\": 4,",
+            "  \"tails\": 1,",
+            "  \"friends\": [\"freeCodeCamp Campers\"]",
+            "};",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return z;})(myDog);"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392d2",
+      "title": "Add New Properties to a JavaScript Object",
+      "description": [
+        "You can add new properties to existing JavaScript objects the same way you would modify them.",
+        "Here's how we would add a <code>\"bark\"</code> property to <code>ourDog</code>:",
+        "<code>ourDog.bark = \"bow-wow\";</code> ",
+        "or",
+        "<code>ourDog[\"bark\"] = \"bow-wow\";</code>",
+        "Now when we evaluate <code>ourDog.bark</code>, we'll get his bark, \"bow-wow\".",
+        "<hr>",
+        "Add a <code>\"bark\"</code> property to <code>myDog</code> and set it to a dog sound, such as \"woof\". You may use either dot or bracket notation."
+      ],
+      "solutions": [
+        "var myDog = {\n  \"name\": \"Happy Coder\",\n  \"legs\": 4,\n  \"tails\": 1,\n  \"friends\": [\"freeCodeCamp Campers\"]\n};\nmyDog.bark = \"Woof Woof\";"
+      ],
+      "tests": [
+        {
+          "text": "Add the property <code>\"bark\"</code> to <code>myDog</code>.'",
+          "testString": "assert(myDog.bark !== undefined, 'Add the property <code>\"bark\"</code> to <code>myDog</code>.')"
+        },
+        {
+          "text": "Do not add <code>\"bark\"</code> to the setup section'",
+          "testString": "assert(!/bark[^\\n]:/.test(code), 'Do not add <code>\"bark\"</code> to the setup section')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Añade nuevas propiedades a un objeto JavaScript",
+          "description": [
+            "Puedes añadir nuevas propiedades a objetos existente de la misma forma que usarías para modificarlos.",
+            "Así es como añadimos una propiedad <code>\"bark\"</code> (ladra) a nuestro objeto <code>ourDog</code>:",
+            "<code>ourDog.bark = \"bow-wow\";</code>",
+            "Ahora, cuando ejecutemos <code>return ourDog.bark</code>, vamos a recbir su ladrido, \" bow-wow \".",
+            "<h4>Instrucciones</h4>",
+            "Vamos a añadir una propiedad <code>ladra</code> a <code>myDog</code> y a ponerle un sonido de perro, tal como \"woof\"."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourDog = {",
+            "  \"name\": \"Camper\",",
+            "  \"legs\": 4,",
+            "  \"tails\": 1,",
+            "  \"friends\": [\"everything!\"]",
+            "};",
+            "",
+            "ourDog.bark = \"bow-wow\";",
+            "",
+            "// Setup",
+            "var myDog = {",
+            "  \"name\": \"Happy Coder\",",
+            "  \"legs\": 4,",
+            "  \"tails\": 1,",
+            "  \"friends\": [\"freeCodeCamp Campers\"]",
+            "};",
+            "",
+            "// Only change code below this line.",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return z;})(myDog);"
+        }
+      }
+    },
+    {
+      "id": "56bbb991ad1ed5201cd392d3",
+      "title": "Delete Properties from a JavaScript Object",
+      "description": [
+        "We can also delete properties from objects like this:",
+        "<code>delete ourDog.bark;</code>",
+        "<hr>",
+        "Delete the <code>\"tails\"</code> property from <code>myDog</code>. You may use either dot or bracket notation."
+      ],
+      "solutions": [
+        "var ourDog = {\n  \"name\": \"Camper\",\n  \"legs\": 4,\n  \"tails\": 1,\n  \"friends\": [\"everything!\"],\n  \"bark\": \"bow-wow\"\n};\nvar myDog = {\n  \"name\": \"Happy Coder\",\n  \"legs\": 4,\n  \"tails\": 1,\n  \"friends\": [\"freeCodeCamp Campers\"],\n  \"bark\": \"woof\"\n};\ndelete myDog.tails;"
+      ],
+      "tests": [
+        {
+          "text": "Delete the property <code>\"tails\"</code> from <code>myDog</code>.'",
+          "testString": "assert(typeof myDog === \"object\" && myDog.tails === undefined, 'Delete the property <code>\"tails\"</code> from <code>myDog</code>.')"
+        },
+        {
+          "text": "Do not modify the <code>myDog</code> setup'",
+          "testString": "assert(code.match(/\"tails\": 1/g).length > 1, 'Do not modify the <code>myDog</code> setup')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Elimina propiedades de un objeto JavaScript",
+          "description": [
+            "También podemos eliminar propiedades de los objetos de esta manera:",
+            "<code>delete ourDog.bark;</code>",
+            "<h4>Instrucciones</h4>",
+            "Borremos la propiedad <code>\"tails\"</code> de <code>myDog</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourDog = {",
+            "  \"name\": \"Camper\",",
+            "  \"legs\": 4,",
+            "  \"tails\": 1,",
+            "  \"friends\": [\"everything!\"],",
+            "  \"bark\": \"bow-wow\"",
+            "};",
+            "",
+            "delete ourDog.bark;",
+            "",
+            "// Setup",
+            "var myDog = {",
+            "  \"name\": \"Happy Coder\",",
+            "  \"legs\": 4,",
+            "  \"tails\": 1,",
+            "  \"friends\": [\"freeCodeCamp Campers\"],",
+            "  \"bark\": \"woof\"",
+            "};",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(z){return z;})(myDog);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244ca",
+      "title": "Using Objects for Lookups",
+      "description": [
+        "Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to \"lookup\" values rather than a <code>switch</code> statement or an <code>if/else</code> chain. This is most useful when you know that your input data is limited to a certain range.",
+        "Here is an example of a simple reverse alphabet lookup:",
+        "<blockquote>var alpha = {<br>  1:\"Z\",<br>  2:\"Y\",<br>  3:\"X\",<br>  4:\"W\",<br>  ...<br>  24:\"C\",<br>  25:\"B\",<br>  26:\"A\"<br>};<br>alpha[2]; // \"Y\"<br>alpha[24]; // \"C\"<br><br>var value = 2;<br>alpha[value]; // \"Y\"</blockquote>",
+        "<hr>",
+        "Convert the switch statement into an object called <code>lookup</code>. Use it to look up <code>val</code> and assign the associated string to the <code>result</code> variable."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function phoneticLookup(val) {\n  var result = \"\";\n\n  var lookup = {\n    alpha: \"Adams\",\n    bravo: \"Boston\",\n    charlie: \"Chicago\",\n    delta: \"Denver\",\n    echo: \"Easy\",\n    foxtrot: \"Frank\"\n  };\n\n  result = lookup[val];\n\n  return result;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>phoneticLookup(\"alpha\")</code> should equal <code>\"Adams\"</code>'",
+          "testString": "assert(phoneticLookup(\"alpha\") === 'Adams', '<code>phoneticLookup(\"alpha\")</code> should equal <code>\"Adams\"</code>')"
+        },
+        {
+          "text": "<code>phoneticLookup(\"bravo\")</code> should equal <code>\"Boston\"</code>'",
+          "testString": "assert(phoneticLookup(\"bravo\") === 'Boston', '<code>phoneticLookup(\"bravo\")</code> should equal <code>\"Boston\"</code>')"
+        },
+        {
+          "text": "<code>phoneticLookup(\"charlie\")</code> should equal <code>\"Chicago\"</code>'",
+          "testString": "assert(phoneticLookup(\"charlie\") === 'Chicago', '<code>phoneticLookup(\"charlie\")</code> should equal <code>\"Chicago\"</code>')"
+        },
+        {
+          "text": "<code>phoneticLookup(\"delta\")</code> should equal <code>\"Denver\"</code>'",
+          "testString": "assert(phoneticLookup(\"delta\") === 'Denver', '<code>phoneticLookup(\"delta\")</code> should equal <code>\"Denver\"</code>')"
+        },
+        {
+          "text": "<code>phoneticLookup(\"echo\")</code> should equal <code>\"Easy\"</code>'",
+          "testString": "assert(phoneticLookup(\"echo\") === 'Easy', '<code>phoneticLookup(\"echo\")</code> should equal <code>\"Easy\"</code>')"
+        },
+        {
+          "text": "<code>phoneticLookup(\"foxtrot\")</code> should equal <code>\"Frank\"</code>'",
+          "testString": "assert(phoneticLookup(\"foxtrot\") === 'Frank', '<code>phoneticLookup(\"foxtrot\")</code> should equal <code>\"Frank\"</code>')"
+        },
+        {
+          "text": "<code>phoneticLookup(\"\")</code> should equal <code>undefined</code>'",
+          "testString": "assert(typeof phoneticLookup(\"\") === 'undefined', '<code>phoneticLookup(\"\")</code> should equal <code>undefined</code>')"
+        },
+        {
+          "text": "You should not modify the <code>return</code> statement'",
+          "testString": "assert(code.match(/return\\sresult;/), 'You should not modify the <code>return</code> statement')"
+        },
+        {
+          "text": "You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements",
+          "testString": "assert(!/case|switch|if/g.test(code), 'You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements'); "
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Usar objetos para búsquedas",
+          "description": [
+            "Los objetos pueden ser considerados como un almacenamiento llave/valor, como un diccionario. Si tienes datos tabulados, puedes almacenarlos en un objeto para después \"buscar\" valores, en lugar de emplear una sentencia <code>switch</code> o una secuencia de <code>if/else</code>. Esto es más útil cuando sabes que tus datos de entrada son limitados a un cierto rango.",
+            "Aquí está un ejemplo de una simple búsqueda inversa de alfabeto:",
+            "<blockquote>var alfa = {<br>  1:\"Z\",<br>  2:\"Y\",<br>  3:\"X\",<br>  4:\"W\",<br>  ...<br>  24:\"C\",<br>  25:\"B\",<br>  26:\"A\"<br>};<br>alfa[2]; // \"Y\"<br>alfa[24]; // \"C\"<br><br>var valor = 2;<br>alfa[valor]; // \"Y\"</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Convierte la sentencia switch en una tabla de búsqueda llamada <code>lookup</code>. Usala para buscar <code>val</code> y asigna la cadena asociada a la variable <code>result</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "function phoneticLookup(val) {",
+            "  var result = \"\";",
+            "",
+            "  // Only change code below this line",
+            "  switch(val) {",
+            "    case \"alpha\": ",
+            "      result = \"Adams\";",
+            "      break;",
+            "    case \"bravo\": ",
+            "      result = \"Boston\";",
+            "      break;",
+            "    case \"charlie\": ",
+            "      result = \"Chicago\";",
+            "      break;",
+            "    case \"delta\": ",
+            "      result = \"Denver\";",
+            "      break;",
+            "    case \"echo\": ",
+            "      result = \"Easy\";",
+            "      break;",
+            "    case \"foxtrot\": ",
+            "      result = \"Frank\";",
+            "  }",
+            "",
+            "  // Only change code above this line",
+            "  return result;",
+            "}",
+            "",
+            "// Change this value to test",
+            "phoneticLookup(\"charlie\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "567af2437cbaa8c51670a16c",
+      "title": "Testing Objects for Properties",
+      "description": [
+        "Sometimes it is useful to check if the property of a given object exists or not. We can use the <code>.hasOwnProperty(propname)</code> method of objects to determine if that object has the given property name. <code>.hasOwnProperty()</code> returns <code>true</code> or <code>false</code> if the property is found or not.",
+        "<strong>Example</strong>",
+        "<blockquote>var myObj = {<br>  top: \"hat\",<br>  bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\");    // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
+        "<hr>",
+        "Modify the function <code>checkObj</code> to test <code>myObj</code> for <code>checkProp</code>. If the property is found, return that property's value. If not, return <code>\"Not Found\"</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myObj = {\n  gift: \"pony\",\n  pet: \"kitten\",\n  bed: \"sleigh\"\n};\nfunction checkObj(checkProp) {\n  if(myObj.hasOwnProperty(checkProp)) {\n    return myObj[checkProp];\n  } else {\n    return \"Not Found\";\n  }\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>checkObj(\"gift\")</code> should return  <code>\"pony\"</code>.'",
+          "testString": "assert(checkObj(\"gift\") === \"pony\", '<code>checkObj(\"gift\")</code> should return  <code>\"pony\"</code>.')"
+        },
+        {
+          "text": "<code>checkObj(\"pet\")</code> should return  <code>\"kitten\"</code>.'",
+          "testString": "assert(checkObj(\"pet\") === \"kitten\", '<code>checkObj(\"pet\")</code> should return  <code>\"kitten\"</code>.')"
+        },
+        {
+          "text": "<code>checkObj(\"house\")</code> should return  <code>\"Not Found\"</code>.'",
+          "testString": "assert(checkObj(\"house\") === \"Not Found\", '<code>checkObj(\"house\")</code> should return  <code>\"Not Found\"</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Probar si un objeto tiene cierta propiedad",
+          "description": [
+            "A veces es útil revisar si cierta propiedad existe o no en un objeto dado. Podemos usar el método de objetos <code>.hasOwnProperty(nomprop)</code> para determinar si un objeto tiene la propiedad <code>nomprop</code>. <code>.hasOwnProperty()</code> retorna <code>true</code> o <code>false</code> si la propiedad es encontrada o no.",
+            "<strong>Ejemplo</strong>",
+            "<blockquote>var miObj = {<br>  arriba: \"sombrero\",<br>  abajo: \"pantalones\"<br>};<br>miObj.hasOwnProperty(\"arriba\");    // true<br>miObj.hasOwnProperty(\"medio\"); // false</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Modifica la función <code>checkObj</code> que prueba si <code>myObj</code> tiene la propiedad <code>checkProp</code>. Si la propiedad es encontrada, retorna el valor de esa propiedad. Si no, retorna <code>\"Not Found\"</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var myObj = {",
+            "  gift: \"pony\",",
+            "  pet: \"kitten\",",
+            "  bed: \"sleigh\"",
+            "};",
+            "",
+            "function checkObj(checkProp) {",
+            "  // Your Code Here",
+            "  ",
+            "  return \"Change Me!\";",
+            "}",
+            "",
+            "// Test your code by modifying these values",
+            "checkObj(\"gift\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244cb",
+      "title": "Manipulating Complex Objects",
+      "description": [
+        "Sometimes you may want to store data in a flexible <dfn>Data Structure</dfn>. A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of <dfn>strings</dfn>, <dfn>numbers</dfn>, <dfn>booleans</dfn>, <dfn>arrays</dfn>, <dfn>functions</dfn>, and <dfn>objects</dfn>.",
+        "Here's an example of a complex data structure:",
+        "<blockquote>var ourMusic = [<br>  {<br>    \"artist\": \"Daft Punk\",<br>    \"title\": \"Homework\",<br>    \"release_year\": 1997,<br>    \"formats\": [ <br>      \"CD\", <br>      \"Cassette\", <br>      \"LP\"<br>    ],<br>    \"gold\": true<br>  }<br>];</blockquote>",
+        "This is an array which contains one object inside. The object has various pieces of <dfn>metadata</dfn> about an album. It also has a nested <code>\"formats\"</code> array. If you want to add more album records, you can do this by adding records to the top level array.",
+        "Objects hold data in a property, which has a key-value format. In the example above, <code>\"artist\": \"Daft Punk\"</code> is a property that has a key of <code>\"artist\"</code> and a value of <code>\"Daft Punk\"</code>.",
+        "<a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> or <code>JSON</code> is a related data interchange format used to store data.",
+        "<blockquote>{<br>  \"artist\": \"Daft Punk\",<br>  \"title\": \"Homework\",<br>  \"release_year\": 1997,<br>  \"formats\": [ <br>    \"CD\",<br>    \"Cassette\",<br>    \"LP\"<br>  ],<br>  \"gold\": true<br>}</blockquote>",
+        "<strong>Note</strong><br>You will need to place a comma after every object in the array, unless it is the last object in the array.",
+        "<hr>",
+        "Add a new album to the <code>myMusic</code> array. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> number, and a <code>formats</code> array of strings."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myMusic = [\n  {\n    \"artist\": \"Billy Joel\",\n    \"title\": \"Piano Man\",\n    \"release_year\": 1973,\n    \"formats\": [ \n      \"CS\", \n      \"8T\", \n      \"LP\" ],\n    \"gold\": true\n  }, \n  {\n    \"artist\": \"ABBA\",\n    \"title\": \"Ring Ring\",\n    \"release_year\": 1973,\n    \"formats\": [ \n      \"CS\", \n      \"8T\", \n      \"LP\",\n    \"CD\",\n  ]\n  }\n];"
+      ],
+      "tests": [
+        {
+          "text": "<code>myMusic</code> should be an array'",
+          "testString": "assert(Array.isArray(myMusic), '<code>myMusic</code> should be an array')"
+        },
+        {
+          "text": "<code>myMusic</code> should have at least two elements'",
+          "testString": "assert(myMusic.length > 1, '<code>myMusic</code> should have at least two elements')"
+        },
+        {
+          "text": "<code>myMusic[1]</code> should be an object'",
+          "testString": "assert(typeof myMusic[1] === 'object', '<code>myMusic[1]</code> should be an object')"
+        },
+        {
+          "text": "<code>myMusic[1]</code> should have at least 4 properties'",
+          "testString": "assert(Object.keys(myMusic[1]).length > 3, '<code>myMusic[1]</code> should have at least 4 properties')"
+        },
+        {
+          "text": "<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string'",
+          "testString": "assert(myMusic[1].hasOwnProperty('artist') && typeof myMusic[1].artist === 'string', '<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string')"
+        },
+        {
+          "text": "<code>myMusic[1]</code> should  contain a <code>title</code> property which is a string'",
+          "testString": "assert(myMusic[1].hasOwnProperty('title') && typeof myMusic[1].title === 'string', '<code>myMusic[1]</code> should  contain a <code>title</code> property which is a string')"
+        },
+        {
+          "text": "<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number'",
+          "testString": "assert(myMusic[1].hasOwnProperty('release_year') && typeof myMusic[1].release_year === 'number', '<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number')"
+        },
+        {
+          "text": "<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array'",
+          "testString": "assert(myMusic[1].hasOwnProperty('formats') && Array.isArray(myMusic[1].formats), '<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array')"
+        },
+        {
+          "text": "<code>formats</code> should be an array of strings with at least two elements'",
+          "testString": "assert(myMusic[1].formats.every(function(item) { return (typeof item === \"string\")}) && myMusic[1].formats.length > 1, '<code>formats</code> should be an array of strings with at least two elements')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Manipula objetos complicados",
+          "description": [
+            "Los objetos JavaScript son flexibles porque permiten <dfn>Estructuras de Datos</dfn> con combinaciones arbitrarias de <dfn>cadenas</dfn>, <dfn>números</dfn>, <dfn>booleanos</dfn>, <dfn>vectores</dfn>, <dfn>funciones</dfn>, y <dfn>objetos</dfn>.",
+            "Aquí está un ejemplo de un objeto complicado:",
+            "<blockquote>var nuestraMusica = [<br>  {<br>    \"artista\": \"Daft Punk\",<br>    \"titulo\": \"Homework\",<br>    \"año_publicacion\": 1997,<br>    \"formatos\": [ <br>      \"CD\", <br>      \"Cassette\", <br>      \"LP\" ],<br>    \"oro\": true<br>  }<br>];</blockquote>",
+            "Este es un vector de objetos con diversos <dfn>metadatos</dfn> acerca de un álbum musical. Además tiene anidado un vector <code>formatos</code>. En el vector de nivel superior, pueden añadirse otros registros del álbum.",
+            "<strong>Nota</strong><br>En vectores que tengan más de un objeto, necesitarás separar un objeto de otro mediante comas.",
+            "<h4>Instrucciones</h4>",
+            "Agrega un nuevo álbum al objeto <code>myMusic</code>. Agrega las cadenas <code>artist</code> y <code>title</code>, el número <code>release_year</code> y un vector de cadenas <code>formats</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myMusic = [",
+            "  {",
+            "    \"artist\": \"Billy Joel\",",
+            "    \"title\": \"Piano Man\",",
+            "    \"release_year\": 1973,",
+            "    \"formats\": [ ",
+            "      \"CD\",",
+            "      \"8T\",",
+            "      \"LP\"",
+            "    ],",
+            "    \"gold\": true",
+            "  }",
+            "  // Add record here",
+            "];",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(x){ if (Array.isArray(x)) { return JSON.stringify(x); } return \"myMusic is not an array\"})(myMusic);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244cc",
+      "title": "Accessing Nested Objects",
+      "description": [
+        "The sub-properties of objects can be accessed by chaining together the dot or bracket notation.",
+        "Here is a nested object:",
+        "<blockquote>var ourStorage = {<br>  \"desk\": {<br>    \"drawer\": \"stapler\"<br>  },<br>  \"cabinet\": {<br>    \"top drawer\": { <br>      \"folder1\": \"a file\",<br>      \"folder2\": \"secrets\"<br>    },<br>    \"bottom drawer\": \"soda\"<br>  }<br>};<br>ourStorage.cabinet[\"top drawer\"].folder2;  // \"secrets\"<br>ourStorage.desk.drawer; // \"stapler\"</blockquote>",
+        "<hr>",
+        "Access the <code>myStorage</code> object and assign the contents of the <code>glove box</code> property to the <code>gloveBoxContents</code> variable. Use bracket notation for properties with a space in their name."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myStorage = {  \n  \"car\":{  \n    \"inside\":{  \n      \"glove box\":\"maps\",\n      \"passenger seat\":\"crumbs\"\n    },\n    \"outside\":{  \n      \"trunk\":\"jack\"\n    }\n  }\n};\nvar gloveBoxContents = myStorage.car.inside[\"glove box\"];"
+      ],
+      "tests": [
+        {
+          "text": "<code>gloveBoxContents</code> should equal \"maps\"'",
+          "testString": "assert(gloveBoxContents === \"maps\", '<code>gloveBoxContents</code> should equal \"maps\"')"
+        },
+        {
+          "text": "Use dot and bracket notation to access <code>myStorage</code>'",
+          "testString": "assert(/=\\s*myStorage\\.car\\.inside\\[\\s*(\"|')glove box\\1\\s*\\]/g.test(code), 'Use dot and bracket notation to access <code>myStorage</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Acceder a objetos anidados",
+          "description": [
+            "Las sub-propiedades de los objetos pueden ser accesadas mediante encadenamiento de la notación punto o corchete.",
+            "Aquí está un objeto anidado:",
+            "<blockquote>var nuestroAlmacen = {<br>  \"escritorio\": {<br>    \"cajon\": \"grapadora\"<br>  },<br>  \"armario\": {<br>    \"cajón superior\": { <br>      \"legajador1\": \"un archivo\",<br>      \"legajador2\": \"secretos\"<br>    },<br>    \"cajón inferior\": \"gaseosa\"<br>  }<br>}<br>nuestroAlmacen.armario[\"cajón superior\"].legajador2;  // \"secretos\"<br>nuestroAlmacen.escritorio.cajon; // \"grapadora\"</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Accede al objeto <code>myStorage</code> para recuperar el contenido de <code>glove box</code>. Usa notación corchete para las propiedades con un espacio en su nombre."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/accessing-nested-objects-in-json",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var myStorage = {",
+            "  \"car\": {",
+            "    \"inside\": {",
+            "      \"glove box\": \"maps\",",
+            "      \"passenger seat\": \"crumbs\"",
+            "     },",
+            "    \"outside\": {",
+            "      \"trunk\": \"jack\"",
+            "    }",
+            "  }",
+            "};",
+            "",
+            "var gloveBoxContents = undefined; // Change this line",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(x) { \n  if(typeof x != 'undefined') { \n    return \"gloveBoxContents = \" + x;\n  }\n  return \"gloveBoxContents is undefined\";\n})(gloveBoxContents);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244cd",
+      "title": "Accessing Nested Arrays",
+      "description": [
+        "As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
+        "Here is an example of how to access a nested array:",
+        "<blockquote>var ourPets = [<br>  {<br>    animalType: \"cat\",<br>    names: [<br>      \"Meowzer\",<br>      \"Fluffy\",<br>      \"Kit-Cat\"<br>    ]<br>  },<br>  {<br>    animalType: \"dog\",<br>    names: [<br>      \"Spot\",<br>      \"Bowser\",<br>      \"Frankie\"<br>    ]<br>  }<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
+        "<hr>",
+        "Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var myPlants = [\n  { \n    type: \"flowers\",\n    list: [\n      \"rose\",\n      \"tulip\",\n      \"dandelion\"\n    ]\n  },\n  {\n    type: \"trees\",\n    list: [\n      \"fir\",\n      \"pine\",\n      \"birch\"\n    ]\n  }  \n];\n\n// Only change code below this line\n\nvar secondTree = myPlants[1].list[1];"
+      ],
+      "tests": [
+        {
+          "text": "<code>secondTree</code> should equal \"pine\"'",
+          "testString": "assert(secondTree === \"pine\", '<code>secondTree</code> should equal \"pine\"')"
+        },
+        {
+          "text": "Use dot and bracket notation to access <code>myPlants</code>'",
+          "testString": "assert(/=\\s*myPlants\\[1\\].list\\[1\\]/.test(code), 'Use dot and bracket notation to access <code>myPlants</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Acceder a vectores anidados",
+          "description": [
+            "Como hemos visto en ejemplos anteriores, los objetos pueden contener objetos anidados y vectores anidados. De forma similar a acceder a objetos anidados, la notación corchete en vectores puede ser encadenada para acceder a vectores anidados.",
+            "Aquí está un ejemplo de como acceder a un vector anidado:",
+            "<blockquote>var nuestrasMascotas = { <br>  \"gatos\": [<br>    \"Maullador\",<br>    \"Blandito\",<br>    \"Kit-Cat\"<br>  ],<br>  \"perros\": [<br>    \"Mancha\",<br>    \"Bowser\",<br>    \"Frankie\"<br>  ]<br>};<br>nuestrasMascotas.cats[1]; // \"Blandito\"<br>nuestrasMascotas.dogs[0]; // \"Mancha\"</blockquote>",
+            "<h4>Instrucciones</h4>",
+            "Recupera el segundo arbol de la variable <code>myPlants</code> usando notación punto para objetos y notación corchete para vectores."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var myPlants = [",
+            "  { ",
+            "    type: \"flowers\",",
+            "    list: [",
+            "      \"rose\",",
+            "      \"tulip\",",
+            "      \"dandelion\"",
+            "    ]",
+            "  },",
+            "  {",
+            "    type: \"trees\",",
+            "    list: [",
+            "      \"fir\",",
+            "      \"pine\",",
+            "      \"birch\"",
+            "    ]",
+            "  }  ",
+            "];",
+            "",
+            "// Only change code below this line",
+            "",
+            "var secondTree = \"\"; // Change this line",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(x) { \n  if(typeof x != 'undefined') { \n    return \"secondTree = \" + x;\n  }\n  return \"secondTree is undefined\";\n})(secondTree);"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244cf",
+      "title": "Record Collection",
+      "description": [
+        "You are given a JSON object representing a part of your musical album collection. Each album has several properties and a unique id number as its key. Not all albums have complete information.",
+        "Write a function which takes an album's <code>id</code> (like <code>2548</code>), a property <code>prop</code> (like <code>\"artist\"</code> or <code>\"tracks\"</code>), and a <code>value</code> (like <code>\"Addicted to Love\"</code>) to modify the data in this collection.",
+        "If <code>prop</code> isn't <code>\"tracks\"</code> and <code>value</code> isn't empty (<code>\"\"</code>), update or set the <code>value</code> for that record album's property.",
+        "Your function must always return the entire collection object.",
+        "There are several rules for handling incomplete data:",
+        "If <code>prop</code> is <code>\"tracks\"</code> but the album doesn't have a <code>\"tracks\"</code> property, create an empty array before adding the new value to the album's corresponding property.",
+        "If <code>prop</code> is <code>\"tracks\"</code> and <code>value</code> isn't empty (<code>\"\"</code>), push the <code>value</code> onto the end of the album's existing <code>tracks</code> array.",
+        "If <code>value</code> is empty (<code>\"\"</code>), delete the given <code>prop</code> property from the album.",
+        "<strong>Hints</strong><br>Use <code>bracket notation</code> when <a href=\"accessing-objects-properties-with-variables\" target=\"_blank\">accessing object properties with variables</a>.",
+        "Push is an array method you can read about on <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\" target=\"_blank\">Mozilla Developer Network</a>.",
+        "You may refer back to <a href=\"manipulating-complex-objects\" target=\"_blank\">Manipulating Complex Objects</a> Introducing JavaScript Object Notation (JSON) for a refresher."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var collection = {\n    2548: {\n      album: \"Slippery When Wet\",\n      artist: \"Bon Jovi\",\n      tracks: [ \n        \"Let It Rock\", \n        \"You Give Love a Bad Name\" \n      ]\n    },\n    2468: {\n      album: \"1999\",\n      artist: \"Prince\",\n      tracks: [ \n        \"1999\", \n        \"Little Red Corvette\" \n      ]\n    },\n    1245: {\n      artist: \"Robert Palmer\",\n      tracks: [ ]\n    },\n    5439: {\n      album: \"ABBA Gold\"\n    }\n};\n// Keep a copy of the collection for tests\nvar collectionCopy = JSON.parse(JSON.stringify(collection));\n\n// Only change code below this line\nfunction updateRecords(id, prop, value) {\n  if(value === \"\") delete collection[id][prop];\n  else if(prop === \"tracks\") {\n    collection[id][prop] = collection[id][prop] || [];\n    collection[id][prop].push(value);\n  } else {\n    collection[id][prop] = value;\n  }\n  \n  return collection;\n}"
+      ],
+      "tests": [
+        {
+          "text": "After <code>updateRecords(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>'",
+          "testString": "collection = collectionCopy; assert(updateRecords(5439, 'After <code>updateRecords(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>')"
+        },
+        {
+          "text": "After <code>updateRecords(5439, \"tracks\", \"Take a Chance on Me\")</code>, <code>tracks</code> should have <code>\"Take a Chance on Me\"</code> as the last element.'",
+          "testString": "assert(updateRecords(5439, 'After <code>updateRecords(5439, \"tracks\", \"Take a Chance on Me\")</code>, <code>tracks</code> should have <code>\"Take a Chance on Me\"</code> as the last element.')"
+        },
+        {
+          "text": "After <code>updateRecords(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set'",
+          "testString": "updateRecords(2548, \"artist\", \"\"); assert(!collection[2548].hasOwnProperty(\"artist\"), 'After <code>updateRecords(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set')"
+        },
+        {
+          "text": "After <code>updateRecords(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have <code>\"Addicted to Love\"</code> as the last element.'",
+          "testString": "assert(updateRecords(1245, 'After <code>updateRecords(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have <code>\"Addicted to Love\"</code> as the last element.')"
+        },
+        {
+          "text": "After <code>updateRecords(2468, \"tracks\", \"Free\")</code>, <code>tracks</code> should have <code>\"1999\"</code> as the first element.'",
+          "testString": "assert(updateRecords(2468, 'After <code>updateRecords(2468, \"tracks\", \"Free\")</code>, <code>tracks</code> should have <code>\"1999\"</code> as the first element.')"
+        },
+        {
+          "text": "After <code>updateRecords(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set'",
+          "testString": "updateRecords(2548, \"tracks\", \"\"); assert(!collection[2548].hasOwnProperty(\"tracks\"), 'After <code>updateRecords(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set')"
+        },
+        {
+          "text": "After <code>updateRecords(1245, \"album\", \"Riptide\")</code>, <code>album</code> should be <code>\"Riptide\"</code>'",
+          "testString": "assert(updateRecords(1245, 'After <code>updateRecords(1245, \"album\", \"Riptide\")</code>, <code>album</code> should be <code>\"Riptide\"</code>')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Colección de registros",
+          "description": [
+            "Se te da un objeto que representa (una pequeña parte de) tu colección de grabaciones. Cada álbum es identificado por un número id único y tiene varias propiedades. No todos los álbumes tienen la información completa.",
+            "Escribe una función que reciba un <code>id</code>, una propiedad (<code>prop</code>) y un valor (<code>value</code>).",
+            "Para el <code>id</code> dado, en la colección <code>collection</code>:",
+            "Si el valor <code>value</code> no está en blanco (<code>value !== \"\"</code>) y <code>prop</code> no es <code>\"tracks\"</code> entonces actualiza o establece el valor de la propiedad <code>prop</code>.",
+            "Si la propiedad <code>prop</code> es <code>\"tracks\"</code> y <code>value</code> no está en blanco, empuja (<em>push</em>) el valor <code>value</code> al final del vector <code>tracks</code>.",
+            "Si el valor <code>value</code> está en blanco, elimina esa <code>prop</code>.",
+            "Siempre retorna el objeto <code>collection</code> entero.",
+            "<strong>Nota</strong><br>No olvides usar <code>notación corchete</code> cuando <a href=\"accessing-objects-properties-with-variables\" target=\"_blank\">accedes a propiedades de objetos con variables</a>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var collection = {",
+            "    \"2548\": {",
+            "      \"album\": \"Slippery When Wet\",",
+            "      \"artist\": \"Bon Jovi\",",
+            "      \"tracks\": [ ",
+            "        \"Let It Rock\", ",
+            "        \"You Give Love a Bad Name\" ",
+            "      ]",
+            "    },",
+            "    \"2468\": {",
+            "      \"album\": \"1999\",",
+            "      \"artist\": \"Prince\",",
+            "      \"tracks\": [ ",
+            "        \"1999\", ",
+            "        \"Little Red Corvette\" ",
+            "      ]",
+            "    },",
+            "    \"1245\": {",
+            "      \"artist\": \"Robert Palmer\",",
+            "      \"tracks\": [ ]",
+            "    },",
+            "    \"5439\": {",
+            "      \"album\": \"ABBA Gold\"",
+            "    }",
+            "};",
+            "// Keep a copy of the collection for tests",
+            "var collectionCopy = JSON.parse(JSON.stringify(collection));",
+            "",
+            "// Only change code below this line",
+            "function updateRecords(id, prop, value) {",
+            "  ",
+            "  ",
+            "  return collection;",
+            "}",
+            "",
+            "// Alter values below to test your code",
+            "updateRecords(5439, \"artist\", \"ABBA\");",
+            ""
+          ],
+          "head": "",
+          "tail": ";(function(x) { return \"collection = \\n\" + JSON.stringify(x, '\\n', 2); })(collection);"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb1bdef",
+      "title": "Iterate with JavaScript While Loops",
+      "description": [
+        "You can run the same code multiple times by using a loop.",
+        "The first type of loop we will learn is called a \"<code>while</code>\" loop because it runs \"while\" a specified condition is true and stops once that condition is no longer true.",
+        "<blockquote>var ourArray = [];<br>var i = 0;<br>while(i &#60; 5) {<br>  ourArray.push(i);<br>  i++;<br>}</blockquote>",
+        "Let's try getting a while loop to work by pushing values to an array.",
+        "<hr>",
+        "Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop."
+      ],
+      "solutions": [
+        "var myArray = [];\nvar i = 0;\nwhile(i < 5) {\n  myArray.push(i);\n  i++;\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should be using a <code>while</code> loop for this.'",
+          "testString": "assert(code.match(/while/g), 'You should be using a <code>while</code> loop for this.')"
+        },
+        {
+          "text": "<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.'",
+          "testString": "assert.deepEqual(myArray, '<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Iterar con JavaScript con ciclos while",
+          "description": [
+            "Puede ejecutar el mismo código varias veces mediante el uso de un ciclo.",
+            "Otro tipo de ciclo de JavaScript se llama un ciclo \"while\", ya que se ejecuta, \"mientras que\" algo sea cierto y se detiene una vez que ya no sea así.",
+            "<code>var ourArray = [];</code>",
+            "<code>var i = 0;</code>",
+            "<code>while(i < 5) {</code>",
+            "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
+            "<code>&nbsp;&nbsp;i++;</code>",
+            "<code>}</code>",
+            "Intentemos que un ciclo <code>while</code> empuje valores en un vector.",
+            "<h4>Instrucciones</h4>",
+            "Empuja los números de 0 a 4 para <code>myArray</code> utilizando un ciclo <code>while</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var myArray = [];",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\"){(function(){return myArray;})();}"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb5bdef",
+      "title": "Iterate with JavaScript For Loops",
+      "description": [
+        "You can run the same code multiple times by using a loop.",
+        "The most common type of JavaScript loop is called a \"<code>for loop</code>\" because it runs \"for\" a specific number of times.",
+        "For loops are declared with three optional expressions separated by semicolons:",
+        "<code>for ([initialization]; [condition]; [final-expression])</code>",
+        "The <code>initialization</code> statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.",
+        "The <code>condition</code> statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to <code>true</code>. When <code>condition</code> is <code>false</code> at the start of the iteration, the loop will stop executing. This means if <code>condition</code> starts as <code>false</code>, your loop will never execute.",
+        "The <code>final-expression</code> is executed at the end of each loop iteration, prior to the next <code>condition</code> check and is usually used to increment or decrement your loop counter.",
+        "In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i &#60; 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
+        "<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 5; i++) {<br>  ourArray.push(i);<br>}</blockquote>",
+        "<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
+        "<hr>",
+        "Use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>."
+      ],
+      "solutions": [
+        "var ourArray = [];\nfor (var i = 0; i < 5; i++) {\n  ourArray.push(i);\n}\nvar myArray = [];\nfor (var i = 1; i < 6; i++) {\n  myArray.push(i);\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should be using a <code>for</code> loop for this.'",
+          "testString": "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.')"
+        },
+        {
+          "text": "<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.'",
+          "testString": "assert.deepEqual(myArray, '<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Iterar en JavaScript con ciclos for",
+          "description": [
+            "Puede ejecutar el mismo código varias veces mediante el uso de un ciclo.",
+            "El tipo más común de bucle de JavaScript se llama \"ciclo for\"porque se ejecuta \"por\" (for) un número específico de veces.",
+            "Los ciclos for se declaran con tres expresiones opcionales separadas por punto y coma:",
+            "<code>for ([inicialización]; [condición]; [expresión-final])</code>",
+            "La <code>inicialización</code> se ejecuta sólo una vez antes de que empiece el ciclo. Normalmente se utiliza para definir e inicializar su variable de ciclo. ",
+            "La expresión <code>condición</code> se evalúa al principio de cada iteración del ciclo y continuará en el ciclo siempre y cuando sea verdadera (<code>true</code>). Cuando la <code>condición</code> sea falsa (<code>false</code>) al comienzo de la iteración, se detendrá la ejecución del ciclo.  Esto significa que si la <code>condición</code> inicia en el valor falso <code>false</code>, el ciclo no se ejecutará. ",
+            "La <code>expresión final</code> se ejecuta al final de cada repetición del ciclo, antes del siguiente chequeo de la <code>condición</code> y se utiliza generalmente para aumentar o disminuir el contador del ciclo.",
+            "En el siguiente ejemplo inicializamos con <code>i = 0</code> e iteramos mientras nuestra condición <code>i <5</code> sea verdadera.  Vamos a incrementar <code>i</code> en <code>1</code> en cada iteración del ciclo con <code>i++</code> como nuestra <code>expresión final</code>. ",
+            "<code>var ourArray = [];</code>",
+            "<code>for (var i = 0; i < 5; i++) {</code>",
+            "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
+            "<code>}</code>",
+            "<code>ourArray</code> ahora contendrá <code>[0,1,2,3,4]</code>.",
+            "<h4>Instrucciones</h4>",
+            "Vamos a utilizar un ciclo <code>for</code> para empujar los valores del 1 al 5 en <code>myArray</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [];",
+            "",
+            "for (var i = 0; i < 5; i++) {",
+            "  ourArray.push(i);",
+            "}",
+            "",
+            "// Setup",
+            "var myArray = [];",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "if (typeof myArray !== \"undefined\"){(function(){return myArray;})();}"
+        }
+      }
+    },
+    {
+      "id": "56104e9e514f539506016a5c",
+      "title": "Iterate Odd Numbers With a For Loop",
+      "description": [
+        "For loops don't have to iterate one at a time. By changing our <code>final-expression</code>, we can count by even numbers.",
+        "We'll start at <code>i = 0</code> and loop while <code>i &#60; 10</code>. We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.",
+        "<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 10; i += 2) {<br>  ourArray.push(i);<br>}</blockquote>",
+        "<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.",
+        "Let's change our <code>initialization</code> so we can count by odd numbers.",
+        "<hr>",
+        "Push the odd numbers from 1 through 9 to <code>myArray</code> using a <code>for</code> loop."
+      ],
+      "solutions": [
+        "var ourArray = [];\nfor (var i = 0; i < 10; i += 2) {\n  ourArray.push(i);\n}\nvar myArray = [];\nfor (var i = 1; i < 10; i += 2) {\n  myArray.push(i);\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should be using a <code>for</code> loop for this.'",
+          "testString": "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.')"
+        },
+        {
+          "text": "<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.'",
+          "testString": "assert.deepEqual(myArray, '<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Itera por los números pares con un ciclo for",
+          "description": [
+            "Los ciclos <code>for</code> no siempre iteran incrementado de a uno. Cambiando nuestra <code>expresión final</code>, podemos contar los números pares.",
+            "Vamos a empezar con <code>i = 0</code> e iterar mientras <code>i <10</code>.  Vamos a incrementar <code>i</code> de a 2 en cada iteración <code>i + = 2</code>. ",
+            "<code>var ourArray = [];</code>",
+            "<code>for (var i = 0; i < 10; i += 2) {</code>",
+            "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
+            "<code>}</code>",
+            "<code>ourArray</code> ahora contendrá <code>[0,2,4,6,8]</code>.",
+            "Vamos a cambiar nuestra <code>inicialización</code> y <code>expresión final</code> para que podamos contar los números impares.",
+            "<h4>Instrucciones</h4>",
+            "Empuja los números impares del 1 al 9 en <code>myArray</code> utilizando un ciclo <code>for</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [];",
+            "",
+            "for (var i = 0; i < 10; i += 2) {",
+            "  ourArray.push(i);",
+            "}",
+            "",
+            "// Setup",
+            "var myArray = [];",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\"){(function(){return myArray;})();}"
+        }
+      }
+    },
+    {
+      "id": "56105e7b514f539506016a5e",
+      "title": "Count Backwards With a For Loop",
+      "description": [
+        "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 backward by twos by odd numbers.",
+        "<hr>",
+        "Push the odd numbers from 9 through 1 to <code>myArray</code> using a <code>for</code> loop."
+      ],
+      "solutions": [
+        "var ourArray = [];\nfor (var i = 10; i > 0; i -= 2) {\n  ourArray.push(i);\n}\nvar myArray = [];\nfor (var i = 9; i > 0; i -= 2) {\n  myArray.push(i);\n}"
+      ],
+      "tests": [
+        {
+          "text": "You should be using a <code>for</code> loop for this.'",
+          "testString": "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.')"
+        },
+        {
+          "text": "You should be using the array method <code>push</code>.'",
+          "testString": "assert(code.match(/myArray.push/), 'You should be using the array method <code>push</code>.')"
+        },
+        {
+          "text": "<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.'",
+          "testString": "assert.deepEqual(myArray, '<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Cuenta hacia atrás con un ciclo for",
+          "description": [
+            "Un ciclo también puede contar hacia atrás, siempre y cuando definamos las condiciones adecuadas.",
+            "Para contar hacia atrás de dos en dos, tendremos que cambiar nuestra <code>inicialización</code>, la <code>condición</code> y la <code>última-expresión</code>.",
+            "Vamos a empezar con <code>i = 10</code> e iteraremos mientras <code>i > 0</code>.  Vamos a decrementar <code>i</code> de a 2 por cada iteración con <code>i -= 2</code>. ",
+            "<code>var ourArray = [];</code>",
+            "<code>for (var i = 10; i > 0; i -= 2) {</code>",
+            "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
+            "<code>}</code>",
+            "<code>ourArray</code> ahora contendrá <code>[10,8,6,4,2]</code>.",
+            "Vamos a cambiar nuestra <code>inicialización</code> y la <code>expresión final</code> para que podamos contar hacia atrás de dos en dos pero números impares.",
+            "<h4>Instrucciones</h4>",
+            "Empuja los números impares del 9 a 1 en <code>myArray</code> utilizando un ciclo <code>for</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArray = [];",
+            "",
+            "for (var i = 10; i > 0; i -= 2) {",
+            "  ourArray.push(i);",
+            "}",
+            "",
+            "// Setup",
+            "var myArray = [];",
+            "",
+            "// Only change code below this line.",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\"){(function(){return myArray;})();}"
+        }
+      }
+    },
+    {
+      "id": "5675e877dbd60be8ad28edc6",
+      "title": "Iterate Through an Array with a For Loop",
+      "description": [
+        "A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a <code>for</code> loop. This code will output each element of the array <code>arr</code> to the console:",
+        "<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br>   console.log(arr[i]);<br>}</blockquote>",
+        "Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our <dfn>condition</dfn> for this loop is <code>i < arr.length</code>, which stops when <code>i</code> is at length - 1.",
+        "<hr>",
+        "Declare and initialize a variable <code>total</code> to <code>0</code>. Use a <code>for</code> loop to add the value of each element of the <code>myArr</code> array to <code>total</code>."
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "var ourArr = [ 9, 10, 11, 12];\nvar ourTotal = 0;\n\nfor (var i = 0; i < ourArr.length; i++) {\n  ourTotal += ourArr[i];\n}\n\nvar myArr = [ 2, 3, 4, 5, 6];\nvar total = 0;\n\nfor (var i = 0; i < myArr.length; i++) {\n  total += myArr[i];\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>total</code> should be declared and initialized to 0'",
+          "testString": "assert(code.match(/var.*?total\\s*=\\s*0.*?;/), '<code>total</code> should be declared and initialized to 0')"
+        },
+        {
+          "text": "<code>total</code> should equal 20'",
+          "testString": "assert(total === 20, '<code>total</code> should equal 20')"
+        },
+        {
+          "text": "You should use a <code>for</code> loop to iterate through <code>myArr</code>'",
+          "testString": "assert(code.match(/for\\s*\\(/g).length > 1 && code.match(/myArr\\s*\\[/), 'You should use a <code>for</code> loop to iterate through <code>myArr</code>')"
+        },
+        {
+          "text": "Do not set <code>total</code> to 20 directly'",
+          "testString": "assert(!code.match(/total[\\s\\+\\-]*=\\s*(\\d(?!\\s*[;, 'Do not set <code>total</code> to 20 directly')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Iterar a través de un vector con un ciclo for",
+          "description": [
+            "Una tarea común en JavaScript es iterar a traves del contenido de un vector. Una manera de hacerlo es con un ciclo <code>for</code>. Este código imprimirá cada elemento del vector <code>arr</code> en la consola:",
+            "<blockquote>var arr = [10,9,8,7,6];<br>for (var i=0; i < arr.length; i++) {<br>   console.log(arr[i]);<br>}</blockquote>",
+            "Recuerda que los vectores tienen numeración que comienza en cero, la cual significa que el último índice del vector es su longitud - 1. Nuestra <dfn>condición</dfn> para este ciclo es <code>i < arr.length</code>, que lo detendrá cuando <code>i</code> sea la longitud - 1.",
+            "<h4>Instrucciones</h4>",
+            "Declara e inicializa una variable <code>total</code> en <code>0</code>. Usa un ciclo <code>for</code> para añadir el valor de cada elemento del vector <code>myArr</code> a <code>total</code>."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "var ourArr = [ 9, 10, 11, 12];",
+            "var ourTotal = 0;",
+            "",
+            "for (var i = 0; i < ourArr.length; i++) {",
+            "  ourTotal += ourArr[i];",
+            "}",
+            "",
+            "// Setup",
+            "var myArr = [ 2, 3, 4, 5, 6];",
+            "",
+            "// Only change code below this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": "(function(){if(typeof total !== 'undefined') { return \"total = \" + total; } else { return \"total is undefined\";}})()"
+        }
+      }
+    },
+    {
+      "id": "56533eb9ac21ba0edf2244e1",
+      "title": "Nesting For Loops",
+      "description": [
+        "If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:",
+        "<blockquote>var arr = [<br>  [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>  for (var j=0; j &lt; arr[i].length; j++) {<br>    console.log(arr[i][j]);<br>  }<br>}</blockquote>",
+        "This outputs each sub-element in <code>arr</code> one at a time. Note that for the inner loop, we are checking the <code>.length</code> of <code>arr[i]</code>, since <code>arr[i]</code> is itself an array.",
+        "<hr>",
+        "Modify function <code>multiplyAll</code> so that it multiplies the <code>product</code> variable by each number in the sub-arrays of <code>arr</code>"
+      ],
+      "releasedOn": "January 1, 2016",
+      "solutions": [
+        "function multiplyAll(arr) {\n  var product = 1;\n  for (var i = 0; i < arr.length; i++) {\n    for (var j = 0; j < arr[i].length; j++) {\n      product *= arr[i][j];\n    }\n  }\n  return product;\n}\n\nmultiplyAll([[1,2],[3,4],[5,6,7]]);"
+      ],
+      "tests": [
+        {
+          "text": "<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>'",
+          "testString": "assert(multiplyAll([[1], '<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>')"
+        },
+        {
+          "text": "<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>'",
+          "testString": "assert(multiplyAll([[1, '<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>')"
+        },
+        {
+          "text": "<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>'",
+          "testString": "assert(multiplyAll([[5, '<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Anidar ciclos for",
+          "description": [
+            "Si tienes una matriz multi-dimensional, puedes usar la misma lógica del punto anterior para iterar a través de un vector y cualquier sub-vector. Aquí está un ejemplo:",
+            "<blockquote>var arr = [<br>  [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>  for (var j=0; j &lt; arr[i].length; j++) {<br>    console.log(arr[i][j]);<br>  }<br>}</blockquote>",
+            "Esto imprime cada sub-elemento en <code>arr</code> uno a la vez. Nota que en el ciclo interior, estamos comprobando la longitud <code>.length</code> de <code>arr[i]</code>, ya que <code>arr[i]</code> es por si mismo un vector.",
+            "<h4>Instrucciones</h4>",
+            "Modifica la función <code>multiplyAll</code> de manera que esta multiplique la variable <code>product</code> por cada número en los sub-vectores de <code>arr</code>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function multiplyAll(arr) {",
+            "  var product = 1;",
+            "  // Only change code below this line",
+            "  ",
+            "  // Only change code above this line",
+            "  return product;",
+            "}",
+            "",
+            "// Modify values below to test your code",
+            "multiplyAll([[1,2],[3,4],[5,6,7]]);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "5a2efd662fb457916e1fe604",
+      "title": "Iterate with JavaScript Do...While Loops",
+      "description": [
+        "You can run the same code multiple times by using a loop.",
+        "The next type of loop you will learn is called a \"<code>do...while</code>\" loop because it first will \"<code>do</code>\" one pass of the code inside the loop no matter what, and then it runs \"<code>while</code>\" a specified condition is true and stops once that condition is no longer true. Let's look at an example.",
+        "<blockquote>var ourArray = [];<br>var i = 0;<br>do {<br>  ourArray.push(i);<br>  i++;<br>} while (i < 5);</blockquote>",
+        "This behaves just as you would expect with any other type of loop, and the resulting array will look like <code>[0, 1, 2, 3, 4]</code>. However, what makes the <code>do...while</code> different from other loops is how it behaves when the condition fails on the first check. Let's see this in action.",
+        "Here is a regular while loop that will run the code in the loop as long as <code>i < 5</code>.",
+        "<blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br>  ourArray.push(i);<br>  i++;<br>}</blockquote>",
+        "Notice that we initialize the value of <code>i</code> to be 5. When we execute the next line, we notice that <code>i</code> is not less than 5. So we do not execute the code inside the loop. The result is that <code>ourArray</code> will end up with nothing added to it, so it will still look like this <code>[]</code> when all the code in the example above finishes running.",
+        "Now, take a look at a <code>do...while</code> loop.",
+        "<blockquote>var ourArray = []; <br>var i = 5;<br>do {<br>  ourArray.push(i);<br>  i++;<br>} while (i < 5);</blockquote>",
+        "In this case, we initialize the value of <code>i</code> as 5, just like we did with the while loop. When we get to the next line, there is no check for the value of <code>i</code>, so we go to the code inside the curly braces and execute it. We will add one element to the array and increment <code>i</code> before we get to the condition check. Then, when we get to checking if <code>i < 5</code> see that <code>i</code> is now 6, which fails the conditional check. So we exit the loop and are done. At the end of the above example, the value of <code>ourArray</code> is <code>[5]</code>.",
+        "Essentially, a <code>do...while</code> loop ensures that the code inside the loop will run at least once.",
+        "Let's try getting a <code>do...while</code> loop to work by pushing values to an array.",
+        "<hr>",
+        "Change the <code>while</code> loop in the code to a <code>do...while</code> loop so that the loop will push the number 10 to <code>myArray</code>, and <code>i</code> will be equal to <code>11</code> when your code finishes running."
+      ],
+      "solutions": [
+        "var myArray = [];\nvar i = 10;\ndo {\n  myArray.push(i);\n  i++;\n} while (i < 5)"
+      ],
+      "tests": [
+        {
+          "text": "You should be using a <code>do...while</code> loop for this.'",
+          "testString": "assert(code.match(/do/g), 'You should be using a <code>do...while</code> loop for this.')"
+        },
+        {
+          "text": "<code>myArray</code> should equal <code>[10]</code>.'",
+          "testString": "assert.deepEqual(myArray, '<code>myArray</code> should equal <code>[10]</code>.')"
+        },
+        {
+          "text": "<code>i</code> should equal <code>11</code>'",
+          "testString": "assert.deepEqual(i, '<code>i</code> should equal <code>11</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Setup",
+            "var myArray = [];",
+            "var i = 10;",
+            "",
+            "// Only change code below this line.",
+            "",
+            "while (i < 5) {",
+            "  myArray.push(i);",
+            "  i++;",
+            "}",
+            ""
+          ],
+          "head": "",
+          "tail": "if(typeof myArray !== \"undefined\"){(function(){return myArray;})();}"
+        }
+      }
+    },
+    {
+      "id": "5688e62ea601b2482ff8422b",
+      "title": "Profile Lookup",
+      "description": [
+        "We have an array of objects representing different people in our contacts lists.",
+        "A <code>lookUpProfile</code> function that takes <code>name</code> and a property (<code>prop</code>) as arguments has been pre-written for you.",
+        "The function should check if <code>name</code> is an actual contact's <code>firstName</code> and the given property (<code>prop</code>) is a property of that contact.",
+        "If both are true, then return the \"value\" of that property.",
+        "If <code>name</code> does not correspond to any contacts then return <code>\"No such contact\"</code>",
+        "If <code>prop</code> does not correspond to any valid properties of a contact found to match <code>name</code> then return <code>\"No such property\"</code>"
+      ],
+      "releasedOn": "January 8, 2016",
+      "solutions": [
+        "var contacts = [\n    {\n        \"firstName\": \"Akira\",\n        \"lastName\": \"Laine\",\n        \"number\": \"0543236543\",\n        \"likes\": [\"Pizza\", \"Coding\", \"Brownie Points\"]\n    },\n    {\n        \"firstName\": \"Harry\",\n        \"lastName\": \"Potter\",\n        \"number\": \"0994372684\",\n        \"likes\": [\"Hogwarts\", \"Magic\", \"Hagrid\"]\n    },\n    {\n        \"firstName\": \"Sherlock\",\n        \"lastName\": \"Holmes\",\n        \"number\": \"0487345643\",\n        \"likes\": [\"Intriguing Cases\", \"Violin\"]\n    },\n    {\n        \"firstName\": \"Kristian\",\n        \"lastName\": \"Vos\",\n        \"number\": \"unknown\",\n        \"likes\": [\"JavaScript\", \"Gaming\", \"Foxes\"]\n    },\n];\n\n\n//Write your function in between these comments\nfunction lookUpProfile(name, prop){\n    for(var i in contacts){\n      if(contacts[i].firstName === name) {\n        return contacts[i][prop] || \"No such property\";\n      }\n    }\n   return \"No such contact\";\n}\n//Write your function in between these comments\n\nlookUpProfile(\"Akira\", \"likes\");"
+      ],
+      "tests": [
+        {
+          "text": "<code>\"Kristian\", \"lastName\"</code> should return <code>\"Vos\"</code>'",
+          "testString": "assert(lookUpProfile('Kristian', '<code>\"Kristian\", \"lastName\"</code> should return <code>\"Vos\"</code>')"
+        },
+        {
+          "text": "<code>\"Sherlock\", \"likes\"</code> should return <code>[\"Intriguing Cases\", \"Violin\"]</code>'",
+          "testString": "assert.deepEqual(lookUpProfile(\"Sherlock\", '<code>\"Sherlock\", \"likes\"</code> should return <code>[\"Intriguing Cases\", \"Violin\"]</code>')"
+        },
+        {
+          "text": "<code>\"Harry\",\"likes\"</code> should return an array'",
+          "testString": "assert(typeof lookUpProfile(\"Harry\", '<code>\"Harry\",\"likes\"</code> should return an array')"
+        },
+        {
+          "text": "<code>\"Bob\", \"number\"</code> should return \"No such contact\"'",
+          "testString": "assert(lookUpProfile(\"Bob\", '<code>\"Bob\", \"number\"</code> should return \"No such contact\"')"
+        },
+        {
+          "text": "<code>\"Bob\", \"potato\"</code> should return \"No such contact\"'",
+          "testString": "assert(lookUpProfile(\"Bob\", '<code>\"Bob\", \"potato\"</code> should return \"No such contact\"')"
+        },
+        {
+          "text": "<code>\"Akira\", \"address\"</code> should return \"No such property\"'",
+          "testString": "assert(lookUpProfile(\"Akira\", '<code>\"Akira\", \"address\"</code> should return \"No such property\"')"
+        }
+      ],
+      "type": "checkpoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Búsqueda de perfiles",
+          "description": [
+            "Tenemos un vector de objetos que representan diferentes personas en nuestra lista de contactos.",
+            "Una función <code>lookUp</code> que recibe el nombre (<code>firstName</code>) y una propiedad (<code>prop</code>) como argumentos ya ha sido escrita previamente para ti.",
+            "La función debe comprobar si <code>firstName</code> es un nombre (<code>firstName</code>) de algún contacto y si la propiedad dada (<code>prop</code>) es una propiedad de ese contacto.",
+            "Si ambos son verdaderos, entonces retorna el valor (<code>value</code>) de esa propiedad.",
+            "Si <code>firstName</code> no corresponde a ningun contacto entonces retorna <code>\"No such contact\"</code>",
+            "Si <code>prop</code> no corresponde a ninguna propiedad válida entonces retorna <code>\"No such property\"</code>",
+            ""
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "//Setup",
+            "var contacts = [",
+            "    {",
+            "        \"firstName\": \"Akira\",",
+            "        \"lastName\": \"Laine\",",
+            "        \"number\": \"0543236543\",",
+            "        \"likes\": [\"Pizza\", \"Coding\", \"Brownie Points\"]",
+            "    },",
+            "    {",
+            "        \"firstName\": \"Harry\",",
+            "        \"lastName\": \"Potter\",",
+            "        \"number\": \"0994372684\",",
+            "        \"likes\": [\"Hogwarts\", \"Magic\", \"Hagrid\"]",
+            "    },",
+            "    {",
+            "        \"firstName\": \"Sherlock\",",
+            "        \"lastName\": \"Holmes\",",
+            "        \"number\": \"0487345643\",",
+            "        \"likes\": [\"Intriguing Cases\", \"Violin\"]",
+            "    },",
+            "    {",
+            "        \"firstName\": \"Kristian\",",
+            "        \"lastName\": \"Vos\",",
+            "        \"number\": \"unknown\",",
+            "        \"likes\": [\"JavaScript\", \"Gaming\", \"Foxes\"]",
+            "    }",
+            "];",
+            "",
+            "",
+            "function lookUpProfile(name, prop){",
+            "// Only change code below this line",
+            "",
+            "// Only change code above this line",
+            "}",
+            "",
+            "// Change these values to test your function",
+            "lookUpProfile(\"Akira\", \"likes\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c11feddfaeb9bdef",
+      "title": "Generate Random Fractions with JavaScript",
+      "description": [
+        "Random numbers are useful for creating random behavior.",
+        "JavaScript has a <code>Math.random()</code> function that generates a random decimal number between <code>0</code> (inclusive) and not quite up to <code>1</code> (exclusive). Thus <code>Math.random()</code> can return a <code>0</code> but never quite return a <code>1</code>",
+        "<strong>Note</strong><br>Like <a href='storing-values-with-the-assignment-operator' target='_blank'>Storing Values with the Equal Operator</a>, all function calls will be resolved before the <code>return</code> executes, so we can <code>return</code> the value of the <code>Math.random()</code> function.",
+        "<hr>",
+        "Change <code>randomFraction</code> to return a random number instead of returning <code>0</code>."
+      ],
+      "solutions": [
+        "function randomFraction() {\n  return Math.random();\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>randomFraction</code> should return a random number.'",
+          "testString": "assert(typeof randomFraction() === \"number\", '<code>randomFraction</code> should return a random number.')"
+        },
+        {
+          "text": "The number returned by <code>randomFraction</code> should be a decimal.'",
+          "testString": "assert((randomFraction()+''). match(/\\./g), 'The number returned by <code>randomFraction</code> should be a decimal.')"
+        },
+        {
+          "text": "You should be using <code>Math.random</code> to generate the random decimal number.'",
+          "testString": "assert(code.match(/Math\\.random/g).length >= 0, 'You should be using <code>Math.random</code> to generate the random decimal number.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Generar fracciones al azar con JavaScript",
+          "description": [
+            "Los números aleatorios son útiles para crear un comportamiento aleatorio.",
+            "JavaScript tiene una función <code>Math.random()</code> que genera un número decimal aleatorio.",
+            "<h4>Instrucciones</h4>",
+            "Cambia <code>randomFraction</code> para que devuelva un número al azar en lugar de devolver <code>0</code>.",
+            "Ten en cuenta que puedes retornar lo retornado por una función, igual que harías para devolver una variable o valor."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function randomFraction() {",
+            "",
+            "  // Only change code below this line.",
+            "",
+            "  return 0;",
+            "",
+            "  // Only change code above this line.",
+            "}"
+          ],
+          "head": "",
+          "tail": "(function(){return randomFraction();})();"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c12feddfaeb1bdef",
+      "title": "Generate Random Whole Numbers with JavaScript",
+      "description": [
+        "It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.",
+        "<ol><li>Use <code>Math.random()</code> to generate a random decimal.</li><li>Multiply that random decimal by <code>20</code>.</li><li>Use another function, <code>Math.floor()</code> to round the number down to its nearest whole number.</li></ol>",
+        "Remember that <code>Math.random()</code> can never quite return a <code>1</code> and, because we're rounding down, it's impossible to actually get <code>20</code>. This technique will give us a whole number between <code>0</code> and <code>19</code>.",
+        "Putting everything together, this is what our code looks like:",
+        "<code>Math.floor(Math.random() * 20);</code>",
+        "We are calling <code>Math.random()</code>, multiplying the result by 20, then passing the value to <code>Math.floor()</code> function to round the value down to the nearest whole number.",
+        "<hr>",
+        "Use this technique to generate and return a random whole number between <code>0</code> and <code>9</code>."
+      ],
+      "solutions": [
+        "var randomNumberBetween0and19 = Math.floor(Math.random() * 20);\nfunction randomWholeNum() {\n  return Math.floor(Math.random() * 10);\n}"
+      ],
+      "tests": [
+        {
+          "text": "The result of <code>randomWholeNum</code> should be a whole number.'",
+          "testString": "assert(typeof randomWholeNum() === \"number\" && (function(){var r = randomWholeNum();return Math.floor(r) === r;})(), 'The result of <code>randomWholeNum</code> should be a whole number.')"
+        },
+        {
+          "text": "You should be using <code>Math.random</code> to generate a random number.'",
+          "testString": "assert(code.match(/Math.random/g).length > 1, 'You should be using <code>Math.random</code> to generate a random number.')"
+        },
+        {
+          "text": "You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.'",
+          "testString": "assert(code.match(/\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10[\\D]\\s*?/g) || code.match(/\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?/g), 'You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.')"
+        },
+        {
+          "text": "You should use <code>Math.floor</code> to remove the decimal part of the number.'",
+          "testString": "assert(code.match(/Math.floor/g).length > 1, 'You should use <code>Math.floor</code> to remove the decimal part of the number.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Genera números aleatorios enteros con JavaScript",
+          "description": [
+            "Es muy bueno que podamos generar números decimales al azar, pero es aún más útil si lo utilizamos para generar números enteros aleatorios.",
+            "En primer lugar, vamos a usar <code>Math.random()</code> para generar un decimal aleatorio.",
+            "Entonces vamos a multiplicar este decimal azar por 20.",
+            "Por último, vamos a usar otra función, <code>Math.floor()</code> para redondear el número hasta su número entero más próximo.",
+            "Esta técnica nos da un número entero entre 0 y 19.",
+            "Tenga en cuenta que debido a que estamos redondeando, es imposible obtener 20.",
+            "Poniendo todo junto, así es como se ve nuestro código:",
+            "<code>Math.floor(Math.random() * 20);</code>",
+            "¿Ves como <code>Math.floor</code> toma <code>(Math.random() * 20)</code> como su argumento? Así es - puedes pasar el resultado de un función como argumento de otra función.",
+            "<h4>Instrucciones</h4>",
+            "Usa esta técnica para generar y devolver un número entero aleatorio entre 0 y 9."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var randomNumberBetween0and19 = Math.floor(Math.random() * 20);",
+            "",
+            "function randomWholeNum() {",
+            "",
+            "  // Only change code below this line.",
+            "",
+            "  return Math.random();",
+            "}"
+          ],
+          "head": "",
+          "tail": "(function(){return randomWholeNum();})();"
+        }
+      }
+    },
+    {
+      "id": "cf1111c1c12feddfaeb2bdef",
+      "title": "Generate Random Whole Numbers within a Range",
+      "description": [
+        "Instead of generating a random number between zero and a given number like we did before, we can generate a random number that falls within a range of two specific numbers.",
+        "To do this, we'll define a minimum number <code>min</code> and a maximum number <code>max</code>.",
+        "Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:",
+        "<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
+        "<hr>",
+        "Create a function called <code>randomRange</code> that takes a range <code>myMin</code> and <code>myMax</code> and returns a random number that's greater than or equal to <code>myMin</code>, and is less than or equal to <code>myMax</code>, inclusive."
+      ],
+      "solutions": [
+        "function randomRange(myMin, myMax) {\n  return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;\n}"
+      ],
+      "tests": [
+        {
+          "text": "The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.'",
+          "testString": "assert(calcMin === 5, 'The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.')"
+        },
+        {
+          "text": "The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.'",
+          "testString": "assert(calcMax === 15, 'The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.')"
+        },
+        {
+          "text": "The random number generated by <code>randomRange</code> should be an integer, not a decimal.'",
+          "testString": "assert(randomRange(0, 'The random number generated by <code>randomRange</code> should be an integer, not a decimal.')"
+        },
+        {
+          "text": "<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.'",
+          "testString": "assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})(), '<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "es": {
+          "title": "Genera números aleatorios enteros dentro de un rango",
+          "description": [
+            "En lugar de generar un número aleatorio entre cero y un número dado como lo hicimos antes, podemos generar un número aleatorio que caiga dentro de un rango de dos números específicos.",
+            "Para ello, vamos a definir un número mínimo <code>min</code> y un número máximo <code>max</code>.",
+            "He aquí la fórmula que utilizaremos. Tómate un momento para leer y tratar de entender lo que el código está haciendo: ",
+            "<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
+            "Definir dos variables: <code>myMin</code> y <code>myMax</code>, y asignales valores enteros.",
+            "<h4>Instrucciones</h4>",
+            "A continuación, crea una función llamada <code>myFunction</code> que devuelva un número aleatorio mayor o igual a <code>myMin</code>, y menor o igual a <code>myMax</code>. "
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Example",
+            "function ourRandomRange(ourMin, ourMax) {",
+            "",
+            "  return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;",
+            "}",
+            "",
+            "ourRandomRange(1, 9);",
+            "",
+            "// Only change code below this line.",
+            "",
+            "function randomRange(myMin, myMax) {",
+            "",
+            "  return 0; // Change this line",
+            "",
+            "}",
+            "",
+            "// Change these values to test your function",
+            "var myRandom = randomRange(5, 15);"
+          ],
+          "head": "",
+          "tail": "var calcMin = 100;\nvar calcMax = -100;\nfor(var i = 0; i < 100; i++) {\n  var result = randomRange(5,15);\n  calcMin = Math.min(calcMin, result);\n  calcMax = Math.max(calcMax, result);\n}\n(function(){\n  if(typeof myRandom === 'number') {\n    return \"myRandom = \" + myRandom;\n  } else {\n    return \"myRandom undefined\";\n  }\n})();"
+        }
+      }
+    },
+    {
+      "id": "587d7b7e367417b2b2512b23",
+      "title": "Use the parseInt Function",
+      "description": [
+        "The <code>parseInt()</code> function parses a string and returns an integer. Here's an example:",
+        "<code>var a = parseInt(\"007\");</code>",
+        "The above function converts the string \"007\" to an integer 7. If the first character in the string can't be converted into a number, then it returns <code>NaN</code>.",
+        "<hr>",
+        "Use <code>parseInt()</code> in the <code>convertToInteger</code> function so it converts the input string <code>str</code> into an integer, and returns it."
+      ],
+      "solutions": [],
+      "tests": [
+        {
+          "text": "<code>convertToInteger</code> should use the <code>parseInt()</code> function'",
+          "testString": "assert(/parseInt/g.test(code), '<code>convertToInteger</code> should use the <code>parseInt()</code> function')"
+        },
+        {
+          "text": "<code>convertToInteger(\"56\")</code> should return a number'",
+          "testString": "assert(typeof(convertToInteger(\"56\")) === \"number\", '<code>convertToInteger(\"56\")</code> should return a number')"
+        },
+        {
+          "text": "<code>convertToInteger(\"56\")</code> should return 56'",
+          "testString": "assert(convertToInteger(\"56\") === 56, '<code>convertToInteger(\"56\")</code> should return 56')"
+        },
+        {
+          "text": "<code>convertToInteger(\"77\")</code> should return 77'",
+          "testString": "assert(convertToInteger(\"77\") === 77, '<code>convertToInteger(\"77\")</code> should return 77')"
+        },
+        {
+          "text": "<code>convertToInteger(\"JamesBond\")</code> should return NaN'",
+          "testString": "assert.isNaN(convertToInteger(\"JamesBond\"), '<code>convertToInteger(\"JamesBond\")</code> should return NaN')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "releasedOn": "February 17, 2017",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function convertToInteger(str) {",
+            "  ",
+            "}",
+            "",
+            "convertToInteger(\"56\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7e367417b2b2512b22",
+      "title": "Use the parseInt Function with a Radix",
+      "description": [
+        "The <code>parseInt()</code> function parses a string and returns an integer. It takes a second argument for the radix, which specifies the base of the number in the string. The radix can be an integer between 2 and 36.",
+        "The function call looks like:",
+        "<code>parseInt(string, radix);</code>",
+        "And here's an example:",
+        "<code>var a = parseInt(\"11\", 2);</code>",
+        "The radix variable says that \"11\" is in the binary system, or base 2. This example converts the string \"11\" to an integer 3.",
+        "<hr>",
+        "Use <code>parseInt()</code> in the <code>convertToInteger</code> function so it converts a binary number to an integer and returns it."
+      ],
+      "solutions": [],
+      "tests": [
+        {
+          "text": "<code>convertToInteger</code> should use the <code>parseInt()</code> function'",
+          "testString": "assert(/parseInt/g.test(code), '<code>convertToInteger</code> should use the <code>parseInt()</code> function')"
+        },
+        {
+          "text": "<code>convertToInteger(\"10011\")</code> should return a number'",
+          "testString": "assert(typeof(convertToInteger(\"10011\")) === \"number\", '<code>convertToInteger(\"10011\")</code> should return a number')"
+        },
+        {
+          "text": "<code>convertToInteger(\"10011\")</code> should return 19'",
+          "testString": "assert(convertToInteger(\"10011\") === 19, '<code>convertToInteger(\"10011\")</code> should return 19')"
+        },
+        {
+          "text": "<code>convertToInteger(\"111001\")</code> should return 57'",
+          "testString": "assert(convertToInteger(\"111001\") === 57, '<code>convertToInteger(\"111001\")</code> should return 57')"
+        },
+        {
+          "text": "<code>convertToInteger(\"JamesBond\")</code> should return NaN'",
+          "testString": "assert.isNaN(convertToInteger(\"JamesBond\"), '<code>convertToInteger(\"JamesBond\")</code> should return NaN')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "releasedOn": "February 17, 2017",
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function convertToInteger(str) {",
+            "  ",
+            "}",
+            "",
+            "convertToInteger(\"10011\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7e367417b2b2512b24",
+      "title": "Use the Conditional (Ternary) Operator",
+      "description": [
+        "The <dfn>conditional operator</dfn>, also called the <dfn>ternary operator</dfn>, can be used as a one line if-else expression.",
+        "The syntax is:",
+        "<code>condition ? statement-if-true : statement-if-false;</code>",
+        "The following function uses an if-else statement to check a condition:",
+        "<blockquote>function findGreater(a, b) {<br>  if(a > b) {<br>    return \"a is greater\";<br>  }<br>  else {<br>    return \"b is greater\";<br>  }<br>}</blockquote>",
+        "This can be re-written using the <code>conditional operator</code>:",
+        "<blockquote>function findGreater(a, b) {<br>  return a > b ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
+        "<hr>",
+        "Use the <code>conditional operator</code> in the <code>checkEqual</code> function to check if two numbers are equal or not. The function should return either true or false."
+      ],
+      "solutions": [],
+      "tests": [
+        {
+          "text": "<code>checkEqual</code> should use the <code>conditional operator</code>'",
+          "testString": "assert(/.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?/gi.test(code), '<code>checkEqual</code> should use the <code>conditional operator</code>')"
+        },
+        {
+          "text": "<code>checkEqual(1, 2)</code> should return false'",
+          "testString": "assert(checkEqual(1, '<code>checkEqual(1, 2)</code> should return false')"
+        },
+        {
+          "text": "<code>checkEqual(1, 1)</code> should return true'",
+          "testString": "assert(checkEqual(1, '<code>checkEqual(1, 1)</code> should return true')"
+        },
+        {
+          "text": "<code>checkEqual(1, -1)</code> should return false'",
+          "testString": "assert(checkEqual(1, '<code>checkEqual(1, -1)</code> should return false')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "releasedOn": "February 17, 2017",
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function checkEqual(a, b) {",
+            "  ",
+            "}",
+            "",
+            "checkEqual(1, 2);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b7e367417b2b2512b21",
+      "title": "Use Multiple Conditional (Ternary) Operators",
+      "description": [
+        "In the previous challenge, you used a single <code>conditional operator</code>. You can also chain them together to check for multiple conditions.",
+        "The following function uses if, else if, and else statements to check multiple conditions:",
+        "<blockquote>function findGreaterOrEqual(a, b) {<br>  if(a === b) {<br>    return \"a and b are equal\";<br>  }<br>  else if(a > b) {<br>    return \"a is greater\";<br>  }<br>  else {<br>    return \"b is greater\";<br>  }<br>}</blockquote>",
+        "The above function can be re-written using multiple <code>conditional operators</code>:",
+        "<blockquote>function findGreaterOrEqual(a, b) {<br>  return (a === b) ? \"a and b are equal\" : (a > b) ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
+        "<hr>",
+        "Use multiple <code>conditional operators</code> in the <code>checkSign</code> function to check if a number is positive, negative or zero."
+      ],
+      "solutions": [],
+      "tests": [
+        {
+          "text": "<code>checkSign</code> should use multiple <code>conditional operators</code>'",
+          "testString": "assert(/.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?/gi.test(code), '<code>checkSign</code> should use multiple <code>conditional operators</code>')"
+        },
+        {
+          "text": "<code>checkSign(10)</code> should return \"positive\". Note that capitalization matters'",
+          "testString": "assert(checkSign(10) === 'positive', '<code>checkSign(10)</code> should return \"positive\". Note that capitalization matters')"
+        },
+        {
+          "text": "<code>checkSign(-12)</code> should return \"negative\". Note that capitalization matters'",
+          "testString": "assert(checkSign(-12) === 'negative', '<code>checkSign(-12)</code> should return \"negative\". Note that capitalization matters')"
+        },
+        {
+          "text": "<code>checkSign(0)</code> should return \"zero\". Note that capitalization matters'",
+          "testString": "assert(checkSign(0) === 'zero', '<code>checkSign(0)</code> should return \"zero\". Note that capitalization matters')"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "releasedOn": "February 17, 2017",
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function checkSign(num) {",
+            "  ",
+            "}",
+            "",
+            "checkSign(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/basic-javascript.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/debugging.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/debugging.json
new file mode 100644
index 0000000000..392bcb3229
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/debugging.json
@@ -0,0 +1,599 @@
+{
+  "name": "Debugging",
+  "order": 4,
+  "time": "1 hour",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "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>",
+        "<hr>",
+        "Use the <code>console.log()</code> method to print the value of the variable <code>a</code> where noted in the code."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use <code>console.log()</code> to check the value of the variable <code>a</code>.'",
+          "testString": "assert(code.match(/console\\.log\\(a\\)/g), 'Your code should use <code>console.log()</code> to check the value of the variable <code>a</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let a = 5;",
+            "let b = 1;",
+            "a++;",
+            "// Add your code below this line",
+            "",
+            "",
+            "let sumAB = a + b;",
+            "console.log(sumAB);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b83367417b2b2512b37",
+      "title": "Understanding the Differences between the freeCodeCamp and Browser Console",
+      "description": [
+        "You may have noticed that some freeCodeCamp JavaScript challenges include their own console.  This console behaves a little differently than the browser console you used in the last challenge.",
+        "The following challenge is meant to highlight some of the differences between the freeCodeCamp console and the browser console.",
+        "First, the browser console.  When you load and run an ordinary JavaScript file in your browser the <code>console.log()</code> statements will print exactly what you tell them to print to the browser console the exact number of times you requested. In your in-browser text editor the process is slightly different and can be confusing at first.",
+        "Values passed to <code>console.log()</code> in the text editor block run each set of tests as well as one more time for any function calls that you have in you code.",
+        "This lends itself to some interesting behavior and might trip you up in the beginning, because a logged value that you expect to see only once may print out many more times depending on the number of tests and the values being passed to those tests.",
+        "If you would like to see only your single output and not have to worry about running through the test cycles, you can use <code>console.clear()</code>.",
+        "<hr>",
+        "Use <code>console.log()</code> to print the variables in the code where indicated.",
+        ""
+      ],
+      "tests": [
+        {
+          "text": "Use <code>console.log()</code> to print the <code>outputTwice</code> variable.  In your Browser Console this should print out the value of the variable two times.'",
+          "testString": "assert(code.match(/console\\.log\\(outputTwo\\)/g), 'Use <code>console.log()</code> to print the <code>outputTwice</code> variable.  In your Browser Console this should print out the value of the variable two times.')"
+        },
+        {
+          "text": "Use <code>console.log()</code> to print the <code>outputOne</code> variable.'",
+          "testString": "assert(code.match(/console\\.log\\(outputOne\\)/g), 'Use <code>console.log()</code> to print the <code>outputOne</code> variable.')"
+        },
+        {
+          "text": "Use <code>console.clear()</code> to modify your output so that <code>outputOne</code> variable only outputs once.'",
+          "testString": "assert(code.match(/console\\.clear\\(\\)/g), 'Use <code>console.clear()</code> to modify your output so that <code>outputOne</code> variable only outputs once.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// Open your browser console",
+            "let outputTwo = \"This will print to the browser console 2 times\";",
+            "// Use console.log() to print the outputTwo variable",
+            "",
+            "",
+            "let outputOne = \"Try to get this to log only once to the browser console\";",
+            "// Use console.clear() in the next line to print the outputOne only once",
+            "",
+            "",
+            "// Use console.log() to print the outputOne variable",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use <code>typeof</code> in two <code>console.log()</code> statements to check the type of the variables.'",
+          "testString": "assert(code.match(/console\\.log\\(typeof[\\( ].*\\)?\\)/g).length == 2, 'Your code should use <code>typeof</code> in two <code>console.log()</code> statements to check the type of the variables.')"
+        },
+        {
+          "text": "Your code should use <code>typeof</code> to check the type of the variable <code>seven</code>.'",
+          "testString": "assert(code.match(/typeof[\\( ]seven\\)?/g), 'Your code should use <code>typeof</code> to check the type of the variable <code>seven</code>.')"
+        },
+        {
+          "text": "Your code should use <code>typeof</code> to check the type of the variable <code>three</code>.'",
+          "testString": "assert(code.match(/typeof[\\( ]three\\)?/g), 'Your code should use <code>typeof</code> to check the type of the variable <code>three</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let seven = 7;",
+            "let three = \"3\";",
+            "console.log(seven + three);",
+            "// Add your code below this line",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Fix the two spelling errors in the code so the <code>netWorkingCapital</code> calculation works."
+      ],
+      "tests": [
+        {
+          "text": "Check the spelling of the two variables used in the netWorkingCapital calculation, the console output should show that \"Net working capital is: 2\".'",
+          "testString": "assert(netWorkingCapital === 2, 'Check the spelling of the two variables used in the netWorkingCapital calculation, the console output should show that \"Net working capital is: 2\".')"
+        },
+        {
+          "text": "There should be no instances of mis-spelled variables in the code.'",
+          "testString": "assert(!code.match(/recievables/g), 'There should be no instances of mis-spelled variables in the code.')"
+        },
+        {
+          "text": "The <code>receivables</code> variable should be declared and used properly in the code.'",
+          "testString": "assert(code.match(/receivables/g).length == 2, 'The <code>receivables</code> variable should be declared and used properly in the code.')"
+        },
+        {
+          "text": "There should be no instances of mis-spelled variables in the code.'",
+          "testString": "assert(!code.match(/payable;/g), 'There should be no instances of mis-spelled variables in the code.')"
+        },
+        {
+          "text": "The <code>payables</code> variable should be declared and used properly in the code.'",
+          "testString": "assert(code.match(/payables/g).length == 2, 'The <code>payables</code> variable should be declared and used properly in the code.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let receivables = 10;",
+            "let payables = 8;",
+            "let netWorkingCapital = recievables - payable;",
+            "console.log(`Net working capital is: ${netWorkingCapital}`);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Fix the two pair errors in the code."
+      ],
+      "tests": [
+        {
+          "text": "Your code should fix the missing piece of the array.'",
+          "testString": "assert(code.match(/myArray\\s*?=\\s*?\\[\\s*?1\\s*?, 'Your code should fix the missing piece of the array.')"
+        },
+        {
+          "text": "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\".'",
+          "testString": "assert(arraySum === 6, '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",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let myArray = [1, 2, 3;",
+            "let arraySum = myArray.reduce((previous, current =>  previous + current);",
+            "console.log(`Sum of array values is: ${arraySum}`);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should fix the quotes around the <code>href</code> value \"#Home\" by either changing or escaping them.'",
+          "testString": "assert(code.match(/<a href=\\s*?('|\\\\\")#Home\\1\\s*?>/g), 'Your code should fix the quotes around the <code>href</code> value \"#Home\" by either changing or escaping them.')"
+        },
+        {
+          "text": "Your code should keep the double quotes around the entire string.'",
+          "testString": "assert(code.match(/\"<p>.*?<\\/p>\";/g), 'Your code should keep the double quotes around the entire string.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let innerHtml = \"<p>Click here to <a href=\"#Home\">return home</a></p>\";",
+            "console.log(innerHtml);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Fix the condition so the program runs the right branch, and the appropriate value is assigned to <code>result</code>."
+      ],
+      "tests": [
+        {
+          "text": "Your code should fix the condition so it checks for equality, instead of using assignment.'",
+          "testString": "assert(result == \"Not equal!\", 'Your code should fix the condition so it checks for equality, instead of using assignment.')"
+        },
+        {
+          "text": "The condition can use either <code>==</code> or <code>===</code> to test for equality.'",
+          "testString": "assert(code.match(/x\\s*?===?\\s*?y/g), 'The condition can use either <code>==</code> or <code>===</code> to test for equality.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let x = 7;",
+            "let y = 9;",
+            "let result = \"to come\";",
+            "",
+            "if(x = y) {",
+            "  result = \"Equal!\";",
+            "} else {",
+            "  result = \"Not equal!\";",
+            "}",
+            "",
+            "console.log(result);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Fix the code so the variable <code>result</code> is set to the value returned from calling the function <code>getNine</code>."
+      ],
+      "tests": [
+        {
+          "text": "Your code should fix the variable <code>result</code> so it is set to the number that the function <code>getNine</code> returns.'",
+          "testString": "assert(result == 9, 'Your code should fix the variable <code>result</code> so it is set to the number that the function <code>getNine</code> returns.')"
+        },
+        {
+          "text": "Your code should call the <code>getNine</code> function.'",
+          "testString": "assert(code.match(/getNine\\(\\)/g).length == 2, 'Your code should call the <code>getNine</code> function.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function getNine() {",
+            "  let x = 6;",
+            "  let y = 3;",
+            "  return x + y;",
+            "}",
+            "",
+            "let result = getNine;",
+            "console.log(result);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "The function <code>raiseToPower</code> raises a base to an exponent. Unfortunately, it's not called properly - fix the code so the value of <code>power</code> is the expected 8."
+      ],
+      "tests": [
+        {
+          "text": "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.'",
+          "testString": "assert(power == 8, '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.')"
+        },
+        {
+          "text": "Your code should use the correct order of the arguments for the <code>raiseToPower</code> function call.'",
+          "testString": "assert(code.match(/raiseToPower\\(\\s*?base\\s*?, 'Your code should use the correct order of the arguments for the <code>raiseToPower</code> function call.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function raiseToPower(b, e) {",
+            "  return Math.pow(b, e);",
+            "}",
+            "",
+            "let base = 2;",
+            "let exp = 3;",
+            "let power = raiseToPower(exp, base);",
+            "console.log(power);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Fix the two indexing errors in the following function so all the numbers 1 through 5 are printed to the console."
+      ],
+      "tests": [
+        {
+          "text": "Your code should set the initial condition of the loop so it starts at the first index.'",
+          "testString": "assert(code.match(/i\\s*?=\\s*?0\\s*?;/g).length == 1, 'Your code should set the initial condition of the loop so it starts at the first index.')"
+        },
+        {
+          "text": "Your code should fix the initial condition of the loop so that the index starts at 0.'",
+          "testString": "assert(!code.match(/i\\s?=\\s*?1\\s*?;/g), 'Your code should fix the initial condition of the loop so that the index starts at 0.')"
+        },
+        {
+          "text": "Your code should set the terminal condition of the loop so it stops at the last index.'",
+          "testString": "assert(code.match(/i\\s*?<\\s*?len\\s*?;/g).length == 1, 'Your code should set the terminal condition of the loop so it stops at the last index.')"
+        },
+        {
+          "text": "Your code should fix the terminal condition of the loop so that it stops at 1 before the length.'",
+          "testString": "assert(!code.match(/i\\s*?<=\\s*?len;/g), 'Your code should fix the terminal condition of the loop so that it stops at 1 before the length.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function countToFive() {",
+            "  let firstFive = \"12345\";",
+            "  let len = firstFive.length;",
+            "  // Fix the line below",
+            "  for (let i = 1; i <= len; i++) {",
+            "  // Do not alter code below this line",
+            "    console.log(firstFive[i]);",
+            "  }",
+            "}",
+            "",
+            "countToFive();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "Your code should set the <code>matrix</code> variable to an array holding 3 rows of 2 columns of zeroes each.'",
+          "testString": "assert(JSON.stringify(matrix) == \"[[0, 'Your code should set the <code>matrix</code> variable to an array holding 3 rows of 2 columns of zeroes each.')"
+        },
+        {
+          "text": "The <code>matrix</code> variable should have 3 rows.'",
+          "testString": "assert(matrix.length == 3, 'The <code>matrix</code> variable should have 3 rows.')"
+        },
+        {
+          "text": "The <code>matrix</code> variable should have 2 columns in each row.'",
+          "testString": "assert(matrix[0].length == 2 && matrix[1].length === 2 && matrix[2].length === 2, 'The <code>matrix</code> variable should have 2 columns in each row.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should change the comparison operator in the terminal condition (the middle part) of the <code>for</code> loop.'",
+          "testString": "assert(code.match(/i\\s*?<=\\s*?4;/g).length == 1, 'Your code should change the comparison operator in the terminal condition (the middle part) of the <code>for</code> loop.')"
+        },
+        {
+          "text": "Your code should fix the comparison operator in the terminal condition of the loop.'",
+          "testString": "assert(!code.match(/i\\s*?!=\\s*?4;/g), 'Your code should fix the comparison operator in the terminal condition of the loop.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function myFunc() {",
+            "  for (let i = 1; i != 4; i += 2) {",
+            "    console.log(\"Still going!\");",
+            "  }",
+            "}"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/debugging.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json
new file mode 100644
index 0000000000..1daee91730
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json
@@ -0,0 +1,1396 @@
+{
+  "name": "ES6",
+  "order": 2,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7b87367417b2b2512b3f",
+      "title": "Explore Differences Between the var and let Keywords",
+      "description": [
+        "One of the biggest problems with declaring variables with the <code>var</code> keyword is that you can overwrite variable declarations without an error.",
+        "<blockquote>var camper = 'James';<br>var camper = 'David';<br>console.log(camper);<br>// logs 'David'</blockquote>",
+        "As you can see in the code above, the <code>camper</code> variable is originally declared as <code>James</code> and then overridden to be <code>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 that you did not intend to overwrite.",
+        "Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.<br>",
+        "A new keyword called <code>let</code> was introduced in ES6 to solve this potential issue with the <code>var</code> keyword.",
+        "If you were to replace <code>var</code> with <code>let</code> in the variable declarations of the code above, the result would be an error.",
+        "<blockquote>let camper = 'James';<br>let camper = 'David'; // throws an error</blockquote>",
+        "This error can be seen in the console of your browser.",
+        "So unlike <code>var</code>, when using <code>let</code>, a variable with the same name can only be declared once.",
+        "Note the <code>\"use strict\"</code>. This enables Strict Mode, which catches common coding mistakes and \"unsafe\" actions. For instance:",
+        "<blockquote>\"use strict\";<br>x = 3.14; // throws an error because x is not declared</blockquote>",
+        "<hr>",
+        "Update the code so it only uses the <code>let</code> keyword."
+      ],
+      "tests": [
+        {
+          "text": "<code>var</code> does not exist in code.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), '<code>var</code> does not exist in code.')"
+        },
+        {
+          "text": "<code>catName</code> should be <code>Oliver</code>.'",
+          "testString": "assert(catName === \"Oliver\", '<code>catName</code> should be <code>Oliver</code>.')"
+        },
+        {
+          "text": "<code>quote</code> should be <code>\"Oliver says Meow!\"</code>'",
+          "testString": "assert(quote === \"Oliver says Meow!\", '<code>quote</code> should be <code>\"Oliver says Meow!\"</code>')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var catName;",
+            "var quote;",
+            "function catTalk() {",
+            "  \"use strict\";",
+            "",
+            "  catName = \"Oliver\";",
+            "  quote = catName + \" says Meow!\";",
+            "",
+            "}",
+            "catTalk();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b87367417b2b2512b40",
+      "title": "Compare Scopes of the var and let Keywords",
+      "description": [
+        "When you declare a variable with the <code>var</code> keyword, it is declared globally, or locally if declared inside a function.",
+        "The <code>let</code> keyword behaves similarly, but with some extra features. When you declare a variable with the <code>let</code> keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.",
+        "For example:",
+        "<blockquote>var numArray = [];<br>for (var i = 0; i < 3; i++) {<br>  numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
+        "With the <code>var</code> keyword, <code>i</code> is declared globally. So when <code>i++</code> is executed, it updates the global variable. This code is similiar to the following:",
+        "<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br>  numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
+        "This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the <code>i</code> variable. This is because the stored function will always refer to the value of the updated global <code>i</code> variable.",
+        "<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br>  if(i === 2){<br>    printNumTwo = function() {<br>      return i;<br>    };<br>  }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>",
+        "As you can see, <code>printNumTwo()</code> prints 3 and not 2. This is because the value assigned to <code>i</code> was updated and the <code>printNumTwo()</code> returns the global <code>i</code> and not the value <code>i</code> had when the function was created in the for loop. The <code>let</code> keyword does not follow this behavior:",
+        "<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br>  if (i === 2) {<br>    printNumTwo = function() {<br>      return i;<br>    };<br>  }<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns \"i is not defined\"</blockquote>",
+        "<code>i</code> is not defined because it was not declared in the global scope. It is only declared within the for loop statement. <code>printNumTwo()</code> returned the correct value because three different <code>i</code> variables with unique values (0, 1, and 2) were created by the <code>let</code> keyword within the loop statement.",
+        "<hr>",
+        "Fix the code so that <code>i</code> declared in the if statement is a separate variable than <code>i</code> declared in the first line of the function. Be certain not to use the <code>var</code> keyword anywhere in your code.",
+        "This exercise is designed to illustrate the difference between how <code>var</code> and <code>let</code> keywords assign scope to the declared variable. When programming a function similar to the one used in this exercise, it is often better to use different variable names to avoid confusion."
+      ],
+      "tests": [
+        {
+          "text": "<code>var</code> does not exist in code.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), '<code>var</code> does not exist in code.')"
+        },
+        {
+          "text": "The variable <code>i</code> declared in the if statement should equal \"block scope\".'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), 'The variable <code>i</code> declared in the if statement should equal \"block scope\".')"
+        },
+        {
+          "text": "<code>checkScope()</code> should return \"function scope\"'",
+          "testString": "assert(checkScope() === \"function scope\", '<code>checkScope()</code> should return \"function scope\"')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "",
+            "function checkScope() {",
+            "\"use strict\";",
+            "  var i = \"function scope\";",
+            "  if (true) {",
+            "    i = \"block scope\";",
+            "    console.log(\"Block scope i is: \", i);",
+            "  }",
+            "  console.log(\"Function scope i is: \", i);",
+            "  return i;",
+            "}"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b87367417b2b2512b41",
+      "title": "Declare a Read-Only Variable with the const Keyword",
+      "description": [
+        "<code>let</code> is not the only new way to declare variables. In ES6, you can also declare variables using the <code>const</code> keyword.",
+        "<code>const</code> has all the awesome features that <code>let</code> has, with the added bonus that variables declared using <code>const</code> are read-only. They are a constant value, which means that once a variable is assigned with <code>const</code>, it cannot be reassigned.",
+        "<blockquote>\"use strict\"<br>const FAV_PET = \"Cats\";<br>FAV_PET = \"Dogs\"; // returns error</blockquote>",
+        "As you can see, trying to reassign a variable declared with <code>const</code> will throw an error. You should always name variables you don't want to reassign using the <code>const</code> keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice is to name your constants in all upper-cases and with an underscore to separate words (e.g. <code>EXAMPLE_VARIABLE</code>).",
+        "<hr>",
+        "Change the code so that all variables are declared using <code>let</code> or <code>const</code>. Use <code>let</code> when you want the variable to change, and <code>const</code> when you want the variable to remain constant. Also, rename variables declared with <code>const</code> to conform to common practices, meaning constants should be in all caps"
+      ],
+      "tests": [
+        {
+          "text": "<code>var</code> does not exist in code.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), '<code>var</code> does not exist in code.')"
+        },
+        {
+          "text": "<code>SENTENCE</code> should be a constant variable (by using <code>const</code>).'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g), '<code>SENTENCE</code> should be a constant variable (by using <code>const</code>).')"
+        },
+        {
+          "text": "<code>i</code> should be a variable only defined within the for loop scope (by using<code>let</code>).'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/(let i)/g), '<code>i</code> should be a variable only defined within the for loop scope (by using<code>let</code>).')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function printManyTimes(str) {",
+            "  \"use strict\";",
+            "",
+            "  // change code below this line",
+            "",
+            "  var sentence = str + \" is cool!\";",
+            "  for(var i = 0; i < str.length; i+=2) {",
+            "    console.log(str);",
+            "  }",
+            "",
+            "  // change code above this line",
+            "",
+            "}",
+            "printManyTimes(\"freeCodeCamp\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b87367417b2b2512b42",
+      "title": "Mutate an Array Declared with const",
+      "description": [
+        "The <code>const</code> declaration has many use cases in modern JavaScript.",
+        "Some developers prefer to assign all their variables using <code>const</code> by default, unless they know they will need to reassign the value. Only in that case, they use <code>let</code>.",
+        "However, it is important to understand that objects (including arrays and functions) assigned to a variable using <code>const</code> are still mutable. Using the <code>const</code> declaration only prevents reassignment of the variable identifier.",
+        "<blockquote>\"use strict\";<br>const s = [5, 6, 7];<br>s = [1, 2, 3]; // throws error, trying to assign a const<br>s[2] = 45; // works just as it would with an array declared with var or let<br>console.log(s); // returns [5, 6, 45]</blockquote>",
+        "As you can see, you can mutate the object <code>[5, 6, 7]</code> itself and the variable <code>s</code> will still point to the altered array <code>[5, 6, 45]</code>. Like all arrays, the array elements in <code>s</code> are mutable, but because <code>const</code> was used, you cannot use the variable identifier <code>s</code> to point to a different array using the assignment operator.",
+        "<hr>",
+        "An array is declared as <code>const s = [5, 7, 2]</code>. Change the array to <code>[2, 5, 7]</code> using various element assignment."
+      ],
+      "tests": [
+        {
+          "text": "Do not replace <code>const</code> keyword.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace <code>const</code> keyword.')"
+        },
+        {
+          "text": "<code>s</code> should be a constant variable (by using <code>const</code>).'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s/g), '<code>s</code> should be a constant variable (by using <code>const</code>).')"
+        },
+        {
+          "text": "Do not change the original array declaration.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s\\s*=\\s*\\[\\s*5\\s*, 'Do not change the original array declaration.')"
+        },
+        {
+          "text": "<code>s</code> should be equal to <code>[2, 5, 7]</code>.'",
+          "testString": "assert.deepEqual(s, '<code>s</code> should be equal to <code>[2, 5, 7]</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const s = [5, 7, 2];",
+            "function editInPlace() {",
+            "  \"use strict\";",
+            "  // change code below this line",
+            "",
+            "  // s = [2, 5, 7]; <- this is invalid",
+            "",
+            "  // change code above this line",
+            "}",
+            "editInPlace();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "598f48a36c8c40764b4e52b3",
+      "title": "Prevent Object Mutation",
+      "description": [
+        "As seen in previous challenge, <code>const</code> declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function <code>Object.freeze</code> to prevent data mutation.",
+        "Once the object is freezed, you can no longer add/update/delete properties from it. Any attempt at changing the object will be rejected without any error.",
+        "<blockquote>\nlet obj = {\n  name:\"FreeCodeCamp\"\n  review:\"Awesome\"\n};\nObject.freeze(obj);\nobj.review = \"bad\"; //will be ignored. Mutation not allowed\nobj.newProp = \"Test\"; // will be ignored. Mutation not allowed\nconsole.log(obj); \n// { name: \"FreeCodeCamp\", review:\"Awesome\"}\n</blockquote>",
+        "<hr>",
+        "In this challenge you are going to use <code>Object.freeze</code> to prevent mathematical constants from changing. You need to freeze <code>MATH_CONSTANTS</code> object so that noone is able alter the value of <code>PI</code> or add any more properties to it."
+      ],
+      "tests": [
+        {
+          "text": "Do not replace <code>const</code> keyword.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace <code>const</code> keyword.')"
+        },
+        {
+          "text": "<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS/g), '<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).')"
+        },
+        {
+          "text": "Do not change original <code>MATH_CONSTANTS</code>.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS\\s+=\\s+{\\s+PI:\\s+3.14\\s+};/g), 'Do not change original <code>MATH_CONSTANTS</code>.')"
+        },
+        {
+          "text": "<code>PI</code> equals <code>3.14</code>.'",
+          "testString": "assert(PI === 3.14, '<code>PI</code> equals <code>3.14</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Aug 12, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function freezeObj() {",
+            "  \"use strict\";",
+            "  const MATH_CONSTANTS = {",
+            "    PI: 3.14",
+            "  };",
+            "  // change code below this line",
+            "",
+            "",
+            "  // change code above this line",
+            "  try {",
+            "    MATH_CONSTANTS.PI = 99;",
+            "  } catch( ex ) {",
+            "    console.log(ex);",
+            "  }",
+            "  return MATH_CONSTANTS.PI;",
+            "}",
+            "const PI = freezeObj();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b87367417b2b2512b43",
+      "title": "Use Arrow Functions to Write Concise Anonymous Functions",
+      "description": [
+        "In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.",
+        "To achieve this, we often use the following syntax:",
+        "<blockquote>const myFunc = function() {<br>  const myVar = \"value\";<br>  return myVar;<br>}</blockquote>",
+        "ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use <strong>arrow function syntax</strong>:",
+        "<blockquote>const myFunc = () => {<br>  const myVar = \"value\";<br>  return myVar;<br>}</blockquote>",
+        "When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword <code>return</code> as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:",
+        "<blockquote>const myFunc= () => \"value\"</blockquote>",
+        "This code will still return <code>value</code> by default.",
+        "<hr>",
+        "Rewrite the function assigned to the variable <code>magic</code> which returns a new <code>Date()</code> to use arrow function syntax. Also make sure nothing is defined using the keyword <code>var</code>."
+      ],
+      "tests": [
+        {
+          "text": "User did replace <code>var</code> keyword.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.')"
+        },
+        {
+          "text": "<code>magic</code> should be a constant variable (by using <code>const</code>).'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+magic/g), '<code>magic</code> should be a constant variable (by using <code>const</code>).')"
+        },
+        {
+          "text": "<code>magic</code> is a <code>function</code>.'",
+          "testString": "assert(typeof magic === 'function', '<code>magic</code> is a <code>function</code>.')"
+        },
+        {
+          "text": "<code>magic()</code> returns correct date.'",
+          "testString": "assert(magic().getDate() == new Date().getDate(), '<code>magic()</code> returns correct date.')"
+        },
+        {
+          "text": "<code>function</code> keyword was not used.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var magic = function() {",
+            "  \"use strict\";",
+            "  return new Date();",
+            "};"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b88367417b2b2512b44",
+      "title": "Write Arrow Functions with Parameters",
+      "description": [
+        "Just like a normal function, you can pass arguments into arrow functions.",
+        "<blockquote>// doubles input value and returns it<br>const doubler = (item) => item * 2;</blockquote>",
+        "You can pass more than one argument into arrow functions as well.",
+        "<hr>",
+        "Rewrite the <code>myConcat</code> function which appends contents of <code>arr2</code> to <code>arr1</code> so that the function uses arrow function syntax."
+      ],
+      "tests": [
+        {
+          "text": "User did replace <code>var</code> keyword.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.')"
+        },
+        {
+          "text": "<code>myConcat</code> should be a constant variable (by using <code>const</code>).'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+myConcat/g), '<code>myConcat</code> should be a constant variable (by using <code>const</code>).')"
+        },
+        {
+          "text": "<code>myConcat</code> should be a function'",
+          "testString": "assert(typeof myConcat === 'function', '<code>myConcat</code> should be a function')"
+        },
+        {
+          "text": "<code>myConcat()</code> returns the correct <code>array</code>'",
+          "testString": "assert(() => { const a = myConcat([1], '<code>myConcat()</code> returns the correct <code>array</code>')"
+        },
+        {
+          "text": "<code>function</code> keyword was not used.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var myConcat = function(arr1, arr2) {",
+            "  \"use strict\";",
+            "  return arr1.concat(arr2);",
+            "};",
+            "// test your code",
+            "console.log(myConcat([1, 2], [3, 4, 5]));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b88367417b2b2512b45",
+      "title": "Write Higher Order Arrow Functions",
+      "description": [
+        "It's time we see how powerful arrow functions are when processing data.",
+        "Arrow functions work really well with higher order functions, such as <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, that take other functions as arguments for processing collections of data.",
+        "Read the following code:",
+        "<blockquote>FBPosts.filter(function(post) {<br>  return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>",
+        "We have written this with <code>filter()</code> to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:",
+        "<blockquote>FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</blockquote>",
+        "This code is more succinct and accomplishes the same task with fewer lines of code.",
+        "<hr>",
+        "Use arrow function syntax to compute the square of only the positive integers (fractions are not integers) in the array <code>realNumberArray</code> and store the new array in the variable <code>squaredIntegers</code>."
+      ],
+      "tests": [
+        {
+          "text": "User did replace <code>var</code> keyword.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.')"
+        },
+        {
+          "text": "<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+squaredIntegers/g), '<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).')"
+        },
+        {
+          "text": "<code>squaredIntegers</code> should be an <code>array</code>'",
+          "testString": "assert(Array.isArray(squaredIntegers), '<code>squaredIntegers</code> should be an <code>array</code>')"
+        },
+        {
+          "text": "<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>'",
+          "testString": "assert(squaredIntegers[0] === 16 && squaredIntegers[1] === 1764 && squaredIntegers[2] === 36, '<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>')"
+        },
+        {
+          "text": "<code>function</code> keyword was not used.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.')"
+        },
+        {
+          "text": "loop should not be used'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/(for)|(while)/g), 'loop should not be used')"
+        },
+        {
+          "text": "<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), '<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];",
+            "const squareList = (arr) => {",
+            "  \"use strict\";",
+            "  // change code below this line",
+            "  const squaredIntegers = arr;",
+            "  // change code above this line",
+            "  return squaredIntegers;",
+            "};",
+            "// test your code",
+            "const squaredIntegers = squareList(realNumberArray);",
+            "console.log(squaredIntegers);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b88367417b2b2512b46",
+      "title": "Set Default Parameters for Your Functions",
+      "description": [
+        "In order to help us create more flexible functions, ES6 introduces <dfn>default parameters</dfn> for functions.",
+        "Check out this code:",
+        "<blockquote>function greeting(name = \"Anonymous\") {<br>  return \"Hello \" + name;<br>}<br>console.log(greeting(\"John\")); // Hello John<br>console.log(greeting()); // Hello Anonymous</blockquote>",
+        "The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter <code>name</code> will receive its default value <code>\"Anonymous\"</code> when you do not provide a value for the parameter. You can add default values for as many parameters as you want.",
+        "<hr>",
+        "Modify the function <code>increment</code> by adding default parameters so that it will add 1 to <code>number</code> if <code>value</code> is not specified."
+      ],
+      "tests": [
+        {
+          "text": "The result of <code>increment(5, 2)</code> should be <code>7</code>.'",
+          "testString": "assert(increment(5, 'The result of <code>increment(5, 2)</code> should be <code>7</code>.')"
+        },
+        {
+          "text": "The result of <code>increment(5)</code> should be <code>6</code>.'",
+          "testString": "assert(increment(5) === 6, 'The result of <code>increment(5)</code> should be <code>6</code>.')"
+        },
+        {
+          "text": "default parameter <code>1</code> was used for <code>value</code>.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/value\\s*=\\s*1/g), 'default parameter <code>1</code> was used for <code>value</code>.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const increment = (function() {",
+            "  \"use strict\";",
+            "  return function increment(number, value) {",
+            "    return number + value;",
+            "  };",
+            "})();",
+            "console.log(increment(5, 2)); // returns 7",
+            "console.log(increment(5)); // returns NaN"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b88367417b2b2512b47",
+      "title": "Use the Rest Operator with Function Parameters",
+      "description": [
+        "In order to help us create more flexible functions, ES6 introduces the <dfn>rest operator</dfn> for function parameters. With the rest operator, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.",
+        "Check out this code:",
+        "<blockquote>function howMany(...args) {<br>  return \"You have passed \" + args.length + \" arguments.\";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments<br>console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>",
+        "The rest operator eliminates the need to check the <code>args</code> array and allows us to apply <code>map()</code>, <code>filter()</code> and <code>reduce()</code> on the parameters array.",
+        "<hr>",
+        "Modify the function <code>sum</code> so that is uses the rest operator and it works in the same way with any number of parameters."
+      ],
+      "tests": [
+        {
+          "text": "The result of <code>sum(0,1,2)</code> should be 3'",
+          "testString": "assert(sum(0, 'The result of <code>sum(0,1,2)</code> should be 3')"
+        },
+        {
+          "text": "The result of <code>sum(1,2,3,4)</code> should be 10'",
+          "testString": "assert(sum(1, 'The result of <code>sum(1,2,3,4)</code> should be 10')"
+        },
+        {
+          "text": "The result of <code>sum(5)</code> should be 5'",
+          "testString": "assert(sum(5) === 5, 'The result of <code>sum(5)</code> should be 5')"
+        },
+        {
+          "text": "The result of <code>sum()</code> should be 0'",
+          "testString": "assert(sum() === 0, 'The result of <code>sum()</code> should be 0')"
+        },
+        {
+          "text": "The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/function\\s+sum\\s*\\(\\s*...args\\s*\\)\\s*{/g), 'The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const sum = (function() {",
+            "  \"use strict\";",
+            "  return function sum(x, y, z) {",
+            "    const args = [ x, y, z ];",
+            "    return args.reduce((a, b) => a + b, 0);",
+            "  };",
+            "})();",
+            "console.log(sum(1, 2, 3)); // 6"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b89367417b2b2512b48",
+      "title": "Use the Spread Operator to Evaluate Arrays In-Place",
+      "description": [
+        "ES6 introduces the <dfn>spread operator</dfn>, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.",
+        "The ES5 code below uses <code>apply()</code> to compute the maximum value in an array:",
+        "<blockquote>var arr = [6, 89, 3, 45];<br>var maximus = Math.max.apply(null, arr); // returns 89</blockquote>",
+        "We had to use <code>Math.max.apply(null, arr)</code> because <code>Math.max(arr)</code> returns <code>NaN</code>. <code>Math.max()</code> expects comma-separated arguments, but not an array.",
+        "The spread operator makes this syntax much better to read and maintain.",
+        "<blockquote>const arr = [6, 89, 3, 45];<br>const maximus = Math.max(...arr); // returns 89</blockquote>",
+        "<code>...arr</code> returns an unpacked array. In other words, it <em>spreads</em> the array.",
+        "However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work:",
+        "<blockquote>const spreaded = ...arr; // will throw a syntax error</blockquote>",
+        "<hr>",
+        "Copy all contents of <code>arr1</code> into another array <code>arr2</code> using the spread operator."
+      ],
+      "tests": [
+        {
+          "text": "<code>arr2</code> is correct copy of <code>arr1</code>.'",
+          "testString": "assert(arr2.every((v, '<code>arr2</code> is correct copy of <code>arr1</code>.')"
+        },
+        {
+          "text": "<code>...</code> spread operator was used to duplicate <code>arr1</code>.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/\\[\\s*...arr1\\s*\\]/g), '<code>...</code> spread operator was used to duplicate <code>arr1</code>.')"
+        },
+        {
+          "text": "<code>arr2</code> remains unchanged when <code>arr1</code> is changed.'",
+          "testString": "assert((arr1, '<code>arr2</code> remains unchanged when <code>arr1</code> is changed.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];",
+            "let arr2;",
+            "(function() {",
+            "  \"use strict\";",
+            "  arr2 = []; // change this line",
+            "})();",
+            "console.log(arr2);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b89367417b2b2512b49",
+      "title": "Use Destructuring Assignment to Assign Variables from Objects",
+      "description": [
+        "We saw earlier how spread operator can effectively spread, or unpack, the contents of the array.",
+        "We can do something similar with objects as well. <dfn>Destructuring assignment</dfn> is special syntax for neatly assigning values taken directly from an object to variables.",
+        "Consider the following ES5 code:",
+        "<blockquote>var voxel = {x: 3.6, y: 7.4, z: 6.54 };<br>var x = voxel.x; // x = 3.6<br>var y = voxel.y; // y = 7.4<br>var z = voxel.z; // z = 6.54</blockquote>",
+        "Here's the same assignment statement with ES6 destructuring syntax:",
+        "<blockquote>const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54</blockquote>",
+        "If instead you want to store the values of <code>voxel.x</code> into <code>a</code>, <code>voxel.y</code> into <code>b</code>, and <code>voxel.z</code> into <code>c</code>, you have that freedom as well.",
+        "<blockquote>const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54</blockquote>",
+        "You may read it as \"get the field <code>x</code> and copy the value into <code>a</code>,\" and so on.",
+        "<hr>",
+        "Use destructuring to obtain the length of the input string <code>str</code>, and assign the length to <code>len</code> in line."
+      ],
+      "tests": [
+        {
+          "text": "the function <code>getLength()</code> returns a number.'",
+          "testString": "assert(typeof getLength('') === 'number', 'the function <code>getLength()</code> returns a number.')"
+        },
+        {
+          "text": "<code>getLength(\"FreeCodeCamp\")</code> should be <code>12</code>'",
+          "testString": "assert(getLength(\"FreeCodeCamp\") === 12, '<code>getLength(\"FreeCodeCamp\")</code> should be <code>12</code>')"
+        },
+        {
+          "text": "destructuring with reassignment was used'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*length\\s*:\\s*len\\s*}\\s*=\\s*str/g), 'destructuring with reassignment was used')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function getLength(str) {",
+            "  \"use strict\";",
+            "",
+            "  // change code below this line",
+            "  const length = 0; // change this",
+            "  // change code above this line",
+            "",
+            "  return len; // you must assign length to len in line",
+            "",
+            "}",
+            "",
+            "console.log(getLength('FreeCodeCamp'));"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b89367417b2b2512b4a",
+      "title": "Use Destructuring Assignment to Assign Variables from Nested Objects",
+      "description": [
+        "We can similarly destructure <em>nested</em> objects into variables.",
+        "Consider the following code:",
+        "<blockquote>const a = {<br>  start: { x: 5, y: 6},<br>  end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>",
+        "In the example above, the variable <code>start</code> is assigned the value of <code>a.start</code>, which is also an object.",
+        "<hr>",
+        "Use destructuring assignment to obtain <code>max</code> of <code>forecast.tomorrow</code> and assign it to <code>maxOfTomorrow</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>maxOfTomorrow</code> equals <code>84.6</code>'",
+          "testString": "assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, '<code>maxOfTomorrow</code> equals <code>84.6</code>')"
+        },
+        {
+          "text": "nested destructuring was used'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*tomorrow\\s*:\\s*\\{\\s*max\\s*:\\s*maxOfTomorrow\\s*\\}\\s*\\}\\s*=\\s*forecast/g), 'nested destructuring was used')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const LOCAL_FORECAST = {",
+            "  today: { min: 72, max: 83 },",
+            "  tomorrow: { min: 73.3, max: 84.6 }",
+            "};",
+            "",
+            "function getMaxOfTmrw(forecast) {",
+            "  \"use strict\";",
+            "  // change code below this line",
+            "  const maxOfTomorrow = undefined; // change this line",
+            "  // change code above this line",
+            "  return maxOfTomorrow;",
+            "}",
+            "",
+            "console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b89367417b2b2512b4b",
+      "title": "Use Destructuring Assignment to Assign Variables from Arrays",
+      "description": [
+        "ES6 makes destructuring arrays as easy as destructuring objects.",
+        "One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick or choose which elements you want to assign to variables.",
+        "Destructuring an array lets us do exactly that:",
+        "<blockquote>const [a, b] = [1, 2, 3, 4, 5, 6];<br>console.log(a, b); // 1, 2</blockquote>",
+        "The variable <code>a</code> is assigned the first value of the array, and <code>b</code> is assigned the second value of the array.",
+        "We can also access the value at any index in an array with destructuring by using commas to reach the desired index:",
+        "<blockquote>const [a, b,,, c] = [1, 2, 3, 4, 5, 6];<br>console.log(a, b, c); // 1, 2, 5 </blockquote>",
+        "<hr>",
+        "Use destructuring assignment to swap the values of <code>a</code> and <code>b</code> so that <code>a</code> receives the value stored in <code>b</code>, and <code>b</code> receives the value stored in <code>a</code>."
+      ],
+      "tests": [
+        {
+          "text": "Value of <code>a</code> should be 6, after swapping.'",
+          "testString": "assert(a === 6, 'Value of <code>a</code> should be 6, after swapping.')"
+        },
+        {
+          "text": "Value of <code>b</code> should be 8, after swapping.'",
+          "testString": "assert(b === 8, 'Value of <code>b</code> should be 8, after swapping.')"
+        },
+        {
+          "text": "Use array destructuring to swap a and b.'",
+          "testString": "// assert(/\\[\\s*(\\w)\\s*, 'Use array destructuring to swap a and b.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let a = 8, b = 6;",
+            "(() => {",
+            "  \"use strict\";",
+            "  // change code below this line",
+            "  ",
+            "  // change code above this line",
+            "})();",
+            "console.log(a); // should be 6",
+            "console.log(b); // should be 8"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4c",
+      "title": "Use Destructuring Assignment with the Rest Operator to Reassign Array Elements",
+      "description": [
+        "In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.",
+        "The result is similar to <code>Array.prototype.slice()</code>, as shown below:",
+        "<blockquote>const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];<br>console.log(a, b); // 1, 2<br>console.log(arr); // [3, 4, 5, 7]</blockquote>",
+        "Variables <code>a</code> and <code>b</code> take the first and second values from the array. After that, because of rest operator's presence, <code>arr</code> gets rest of the values in the form of an array.",
+        "The rest element only works correctly as the last variable in the list. As in, you cannot use the rest operator to catch a subarray that leaves out last element of the original array.",
+        "<hr>",
+        "Use destructuring assignment with the rest operator to perform an effective <code>Array.prototype.slice()</code> so that <code>arr</code> is a sub-array of the original array <code>source</code> with the first two elements ommitted."
+      ],
+      "tests": [
+        {
+          "text": "<code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>'",
+          "testString": "assert(arr.every((v, '<code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>')"
+        },
+        {
+          "text": "destructuring was used.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/\\[\\s*\\w\\s*, 'destructuring was used.')"
+        },
+        {
+          "text": "<code>Array.slice()</code> was not used.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/Array.slice/g), '<code>Array.slice()</code> was not used.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const source = [1,2,3,4,5,6,7,8,9,10];",
+            "function removeFirstTwo(list) {",
+            "  \"use strict\";",
+            "  // change code below this line",
+            "  arr = list; // change this",
+            "  // change code below this line",
+            "  return arr;",
+            "}",
+            "const arr = removeFirstTwo(source);",
+            "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];"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4d",
+      "title": "Use Destructuring Assignment to Pass an Object as a Function's Parameters",
+      "description": [
+        "In some cases, you can destructure the object in a function argument itself.",
+        "Consider the code below:",
+        "<blockquote>const profileUpdate = (profileData) => {<br>  const { name, age, nationality, location } = profileData;<br>  // do something with these variables<br>}</blockquote>",
+        "This effectively destructures the object sent into the function. This can also be done in-place:",
+        "<blockquote>const profileUpdate = ({ name, age, nationality, location }) => {<br>  /* do something with these fields */<br>}</blockquote>",
+        "This removes some extra lines and makes our code look neat.",
+        "This has the added benefit of not having to manipulate an entire object in a function; only the fields that are needed are copied inside the function.",
+        "<hr>",
+        "Use destructuring assignment within the argument to the function <code>half</code> to send only <code>max</code> and <code>min</code> inside the function."
+      ],
+      "tests": [
+        {
+          "text": "<code>stats</code> should be an <code>object</code>.'",
+          "testString": "assert(typeof stats === 'object', '<code>stats</code> should be an <code>object</code>.')"
+        },
+        {
+          "text": "<code>half(stats)</code> should be <code>28.015</code>'",
+          "testString": "assert(half(stats) === 28.015, '<code>half(stats)</code> should be <code>28.015</code>')"
+        },
+        {
+          "text": "Destructuring was used.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/\\(\\s*\\{\\s*\\w+\\s*, 'Destructuring was used.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const stats = {",
+            "  max: 56.78,",
+            "  standard_deviation: 4.34,",
+            "  median: 34.54,",
+            "  mode: 23.87,",
+            "  min: -0.75,",
+            "  average: 35.85",
+            "};",
+            "const half = (function() {",
+            "  \"use strict\"; // do not change this line",
+            "",
+            "  // change code below this line",
+            "  return function half(stats) {",
+            "    // use function argument destructuring",
+            "    return (stats.max + stats.min) / 2.0;",
+            "  };",
+            "  // change code above this line",
+            "",
+            "})();",
+            "console.log(stats); // should be object",
+            "console.log(half(stats)); // should be 28.015"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4e",
+      "title": "Create Strings using Template Literals",
+      "description": [
+        "A new feature of ES6 is the <dfn>template literal</dfn>. This is a special type of string that allows you to use string interpolation features to create strings.",
+        "Consider the code below:",
+        "<blockquote>const person = {<br>  name: \"Zodiac Hasbro\",<br>  age: 56<br>};<br><br>// string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>",
+        "A lot of things happened there.",
+        "Firstly, the <code>${variable}</code> syntax used above is a place holder. Basically, you won't have to use concatenation with the <code>+</code> operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with <code>${</code> and <code>}</code>.",
+        "Secondly, the example uses backticks (<code>`</code>), not quotes (<code>'</code> or <code>\"</code>), to wrap the string. Notice that the string is multi-line.",
+        "This new way of creating strings gives you more flexibility to create robust strings.",
+        "<hr>",
+        "Use template literal syntax with backticks to display each entry of the <code>result</code> object's <code>failure</code> array. Each entry should be wrapped inside an <code>li</code> element with the class attribute <code>text-warning</code>, and listed within the <code>resultDisplayArray</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.'",
+          "testString": "assert(typeof makeList(result.failure) === 'object' && resultDisplayArray.length === 3, '<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.')"
+        },
+        {
+          "text": "<code>resultDisplayArray</code> is the desired output.'",
+          "testString": "assert(makeList(result.failure).every((v, '<code>resultDisplayArray</code> is the desired output.')"
+        },
+        {
+          "text": "Template strings were used'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/\\`<li class=\"text-warning\">\\$\\{\\w+\\}<\\/li>\\`/g), 'Template strings were used')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const result = {",
+            "  success: [\"max-length\", \"no-amd\", \"prefer-arrow-functions\"],",
+            "  failure: [\"no-var\", \"var-on-top\", \"linebreak\"],",
+            "  skipped: [\"id-blacklist\", \"no-dup-keys\"]",
+            "};",
+            "function makeList(arr) {",
+            "  \"use strict\";",
+            "",
+            "  // change code below this line",
+            "  const resultDisplayArray = null;",
+            "  // change code above this line",
+            "",
+            "  return resultDisplayArray;",
+            "}",
+            "/**",
+            " * makeList(result.failure) should return:",
+            " * [ <li class=\"text-warning\">no-var</li>,",
+            " *   <li class=\"text-warning\">var-on-top</li>, ",
+            " *   <li class=\"text-warning\">linebreak</li> ]",
+            " **/",
+            "const resultDisplayArray = makeList(result.failure);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4f",
+      "title": "Write Concise Object Literal Declarations Using Simple Fields",
+      "description": [
+        "ES6 adds some nice support for easily definining object literals.",
+        "Consider the following code:",
+        "<blockquote>const getMousePosition = (x, y) => ({<br>  x: x,<br>  y: y<br>});</blockquote>",
+        "<code>getMousePosition</code> is a simple function that returns an object containing two fields.",
+        "ES6 provides the syntactic sugar to eliminate the redundancy of having to write <code>x: x</code>. You can simply write <code>x</code> once, and it will be converted to<code>x: x</code> (or something equivalent) under the hood.",
+        "Here is the same function from above rewritten to use this new syntax:",
+        "<blockquote>const getMousePosition = (x, y) => ({ x, y });</blockquote>",
+        "<hr>",
+        "Use simple fields with object literals to create and return a <code>Person</code> object."
+      ],
+      "tests": [
+        {
+          "text": "the output is <code>{name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}</code>.'",
+          "testString": "assert(() => {const res={name:\"Zodiac Hasbro\", 'the output is <code>{name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}</code>.')"
+        },
+        {
+          "text": "No <code>:</code> were used.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/:/g), 'No <code>:</code> were used.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "const createPerson = (name, age, gender) => {",
+            "  \"use strict\";",
+            "  // change code below this line",
+            "  return {",
+            "    name: name,",
+            "    age: age,",
+            "    gender: gender",
+            "  };",
+            "  // change code above this line",
+            "};",
+            "console.log(createPerson(\"Zodiac Hasbro\", 56, \"male\")); // returns a proper object"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8b367417b2b2512b50",
+      "title": "Write Concise Declarative Functions with ES6",
+      "description": [
+        "When defining functions within objects in ES5, we have to use the keyword <code>function</code> as follows:",
+        "<blockquote>const person = {<br>  name: \"Taylor\",<br>  sayHello: function() {<br>    return `Hello! My name is ${this.name}.`;<br>  }<br>};</blockquote>",
+        "With ES6, You can remove the <code>function</code> keyword and colon altogether when defining functions in objects. Here's an example of this syntax:",
+        "<blockquote>const person = {<br>  name: \"Taylor\",<br>  sayHello() {<br>    return `Hello! My name is ${this.name}.`;<br>  }<br>};</blockquote>",
+        "<hr>",
+        "Refactor the function <code>setGear</code> inside the object <code>bicycle</code> to use the shorthand syntax described above."
+      ],
+      "tests": [
+        {
+          "text": "<code>setGear</code> is a function and changes the <code>gear</code> variable.'",
+          "testString": "assert(() => { bicycle.setGear(48); return bicycle.gear === 48 }, '<code>setGear</code> is a function and changes the <code>gear</code> variable.')"
+        },
+        {
+          "text": "Declarative function was used.'",
+          "testString": "getUserInput => assert(!getUserInput('index').match(/:\\s*function\\s*\\(\\)/g), 'Declarative function was used.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// change code below this line",
+            "const bicycle = {",
+            "  gear: 2,",
+            "  setGear: function(newGear) {",
+            "    \"use strict\";",
+            "    this.gear = newGear;",
+            "  }",
+            "};",
+            "// change code above this line",
+            "bicycle.setGear(3);",
+            "console.log(bicycle.gear);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8b367417b2b2512b53",
+      "title": "Use class Syntax to Define a Constructor Function",
+      "description": [
+        "ES6 provides a new syntax to help create objects, using the keyword <dfn>class</dfn>.",
+        "This is to be noted, that the <code>class</code> 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 <code>new</code> keyword to instantiate an object.",
+        "<blockquote>var SpaceShuttle = function(targetPlanet){<br>  this.targetPlanet = targetPlanet;<br>}<br>var zeus = new spaceShuttle('Jupiter');</blockquote>",
+        "The class syntax simply replaces the constructor function creation:",
+        "<blockquote>class SpaceShuttle {<br>  constructor(targetPlanet){<br>    this.targetPlanet = targetPlanet;<br>  }<br>}<br>const zeus = new spaceShuttle('Jupiter');</blockquote>",
+        "Notice that the <code>class</code> keyword declares a new function, and a constructor was added, which would be invoked when <code>new</code> is called - to create a new object.",
+        "<hr>",
+        "Use <code>class</code> keyword and write a proper constructor to create the <code>Vegetable</code> class.",
+        "The <code>Vegetable</code> lets you create a vegetable object, with a property <code>name</code>, to be passed to constructor."
+      ],
+      "tests": [
+        {
+          "text": "<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.'",
+          "testString": "assert(typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function', '<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.')"
+        },
+        {
+          "text": "<code>class</code> keyword was used.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/class/g), '<code>class</code> keyword was used.')"
+        },
+        {
+          "text": "<code>Vegetable</code> can be instantiated.'",
+          "testString": "assert(() => {const a = new Vegetable(\"apple\"); return typeof a === 'object';}, '<code>Vegetable</code> can be instantiated.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function makeClass() {",
+            "  \"use strict\";",
+            "  /* Alter code below this line */",
+            "",
+            "  /* Alter code above this line */",
+            "  return Vegetable;",
+            "}",
+            "const Vegetable = makeClass();",
+            "const carrot = new Vegetable('carrot');",
+            "console.log(carrot.name); // => should be 'carrot'"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8c367417b2b2512b54",
+      "title": "Use getters and setters to Control Access to an Object",
+      "description": [
+        "You can obtain values from an object, and set a value of a property within an object.",
+        "These are classically called <dfn>getters</dfn> and <dfn>setters</dfn>.",
+        "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.",
+        "<blockquote>class Book {<br>  constructor(author) {<br>    this._author = author;<br>  }<br>  // getter<br>  get writer(){<br>    return this._author;<br>  }<br>  // setter<br>  set writer(updatedAuthor){<br>    this._author = updatedAuthor;<br>  }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer);<br>lol.writer = 'wut';<br>console.log(lol.writer);</blockquote>",
+        "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.",
+        "<hr>",
+        "Use <code>class</code> keyword to create a Thermostat class. The constructor accepts Farenheit temperature.",
+        "Now create <code>getter</code> and <code>setter</code> in the class, to obtain the temperature in Celsius scale.",
+        "Remember that <code>C = 5/9 * (F - 32)</code> and <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."
+      ],
+      "tests": [
+        {
+          "text": "<code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.'",
+          "testString": "assert(typeof Thermostat === 'function' && typeof Thermostat.constructor === 'function', '<code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.')"
+        },
+        {
+          "text": "<code>class</code> keyword was used.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/class/g), '<code>class</code> keyword was used.')"
+        },
+        {
+          "text": "<code>Thermostat</code> can be instantiated.'",
+          "testString": "assert(() => {const t = new Thermostat(32); return typeof t === 'object' && t.temperature === 0;}, '<code>Thermostat</code> can be instantiated.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function makeClass() {",
+            "  \"use strict\";",
+            "  /* Alter code below this line */",
+            "",
+            "  /* Alter code above this line */",
+            "  return Thermostat;",
+            "}",
+            "const Thermostat = makeClass();",
+            "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"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8c367417b2b2512b55",
+      "title": "Understand the Differences Between import and require",
+      "description": [
+        "In the past, the function <code>require()</code> 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 <dfn>import</dfn>. 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 <code>math_array_functions</code> has about 20 functions, but I only need one, <code>countItems</code>, in my current file. The old <code>require()</code> approach would force me to bring in all 20 functions. With this new <code>import</code> syntax, I can bring in just the desired function, like so:",
+        "<blockquote>import { countItems } from \"math_array_functions\"</blockquote>",
+        "A description of the above code:",
+        "<blockquote>import { function } from \"file_path_goes_here\"<br>// We can also import variables the same way!</blockquote>",
+        "There are a few ways to write an <code>import</code> statement, but the above is a very common use-case.",
+        "<strong>Note</strong><br>The whitespace surrounding the function inside the curly braces is a best practice - it makes it easier to read the <code>import</code> statement.",
+        "<strong>Note</strong><br>The lessons in this section handle non-browser features. <code>import</code>, 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.",
+        "<strong>Note</strong><br>In most cases, the file path requires a <code>./</code> before it; otherwise, node will look in the <code>node_modules</code> directory first trying to load it as a dependencie.",
+        "<hr>",
+        "Add the appropriate <code>import</code> statement that will allow the current file to use the <code>capitalizeString</code> function. The file where this function lives is called <code>\"string_functions\"</code>, and it is in the same directory as the current file."
+      ],
+      "tests": [
+        {
+          "text": "valid <code>import</code> statement'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/import\\s+\\{\\s?capitalizeString\\s?\\}\\s+from\\s+\"string_functions\"/g), 'valid <code>import</code> statement')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "\"use strict\";",
+            "capitalizeString(\"hello!\");"
+          ],
+          "head": "window.require = function (str) {\nif (str === 'string_functions') {\nreturn {\ncapitalizeString: str => str.toUpperCase()\n}}};",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8c367417b2b2512b56",
+      "title": "Use export to Reuse a Code Block",
+      "description": [
+        "In the previous challenge, you learned about <code>import</code> 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 <code>import</code>, known as <dfn>export</dfn>. 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 <code>import</code>, <code>export</code> is a non-browser feature.",
+        "The following is what we refer to as a <dfn>named export</dfn>. With this, we can import any code we export into another file with the <code>import</code> syntax you learned in the last lesson. Here's an example:",
+        "<blockquote>const capitalizeString = (string) => {<br>  return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } //How to export functions.<br>export const foo = \"bar\"; //How to export variables.</blockquote>",
+        "Alternatively, if you would like to compact all your <code>export</code> statements into one line, you can take this approach:",
+        "<blockquote>const capitalizeString = (string) => {<br>  return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>const foo = \"bar\";<br>export { capitalizeString, foo }</blockquote>",
+        "Either approach is perfectly acceptable.",
+        "<hr>",
+        "Below are two variables that I want to make available for other files to use. Utilizing the first way I demonstrated <code>export</code>, export the two variables."
+      ],
+      "tests": [
+        {
+          "text": "<code>foo</code> is exported.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+foo\\s+=+\\s\"bar\"/g), '<code>foo</code> is exported.')"
+        },
+        {
+          "text": "<code>bar</code> is exported.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+boo\\s+=+\\s\"far\"/g), '<code>bar</code> is exported.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "\"use strict\";",
+            "const foo = \"bar\";",
+            "const boo = \"far\";"
+          ],
+          "head": "window.exports = function(){};",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8c367417b2b2512b57",
+      "title": "Use * to Import Everything from a File",
+      "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 <dfn>import *</dfn> syntax.",
+        "Here's an example where the contents of a file named <code>\"math_functions\"</code> are imported into a file in the same directory:",
+        "<blockquote>import * as myMathModule from \"math_functions\"<br>myMathModule.add(2,3);<br>myMathModule.subtract(5,3);</blockquote>",
+        "And breaking down that code:",
+        "<blockquote>import * as object_with_name_of_your_choice from \"file_path_goes_here\"<br>object_with_name_of_your_choice.imported_function</blockquote>",
+        "You may use any name following the <code>import * as </code>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.",
+        "<hr>",
+        "The code below requires the contents of a file, <code>\"capitalize_strings\"</code>, found in the same directory as it, imported. Add the appropriate <code>import *</code> statement to the top of the file, using the object provided."
+      ],
+      "tests": [
+        {
+          "text": "Properly uses <code>import * as</code> syntax.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/import\\s+\\*\\s+as\\s+myStringModule\\s+from\\s+\"capitalize_strings\"/g), 'Properly uses <code>import * as</code> syntax.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "\"use strict\";",
+            "myStringModule.capitalize(\"foo\");",
+            "myStringModule.lowercase(\"Foo\");"
+          ],
+          "head": "window.require = function(str) {\nif (str === 'capitalize_strings') {\nreturn {\ncapitalize: str => str.toUpperCase(),\nlowercase: str => str.toLowerCase()\n}}};",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8c367417b2b2512b58",
+      "title": "Create an Export Fallback with export default",
+      "description": [
+        "In the <code>export</code> lesson, you learned about the syntax referred to as a <dfn>named export</dfn>. This allowed you to make multiple functions and variables available for use in other files.",
+        "There is another <code>export</code> syntax you need to know, known as <dfn>export default</dfn>. 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 <code>export default</code>:",
+        "<blockquote>export default function add(x,y) {<br>  return x + y;<br>}</blockquote>",
+        "Note: Since <code>export default</code> 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. Additionally, you cannot use <code>export default</code> with <code>var</code>, <code>let</code>, or <code>const</code>",
+        "<hr>",
+        "The following function should be the fallback value for the module. Please add the necessary code to do so."
+      ],
+      "tests": [
+        {
+          "text": "Proper used of <code>export</code> fallback.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/export\\s+default\\s+function\\s+subtract\\(x, 'Proper used of <code>export</code> fallback.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "\"use strict\";",
+            "function subtract(x,y) {return x - y;}"
+          ],
+          "head": "window.exports = function(){};",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8d367417b2b2512b59",
+      "title": "Import a Default Export",
+      "description": [
+        "In the last challenge, you learned about <code>export default</code> and its uses. It is important to note that, to import a default export, you need to use a different <code>import</code> syntax.",
+        "In the following example, we have a function, <code>add</code>, that is the default export of a file, <code>\"math_functions\"</code>. Here is how to import it:",
+        "<blockquote>import add from \"math_functions\";<br>add(5,4); //Will return 9</blockquote>",
+        "The syntax differs in one key place - the imported value, <code>add</code>, is not surrounded by curly braces, <code>{}</code>. Unlike exported values, the primary method of importing a default export is to simply write the value's name after <code>import</code>.",
+        "<hr>",
+        "In the following code, please import the default export, <code>subtract</code>, from the file <code>\"math_functions\"</code>, found in the same directory as this file."
+      ],
+      "tests": [
+        {
+          "text": "Properly imports <code>export default</code> method.'",
+          "testString": "getUserInput => assert(getUserInput('index').match(/import\\s+subtract\\s+from\\s+\"math_functions\"/g), 'Properly imports <code>export default</code> method.')"
+        }
+      ],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "\"use strict\";",
+            "subtract(7,4);"
+          ],
+          "head": "window.require = function(str) {\nif (str === 'math_functions') {\nreturn function(a, b) {\nreturn a - b;\n}}};",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/es6.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
new file mode 100644
index 0000000000..03f9919289
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
@@ -0,0 +1,1727 @@
+{
+  "name": "Functional Programming",
+  "order": 8,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "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",
+        "<hr>",
+        "The members of freeCodeCamp 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."
+      ],
+      "tests": [
+        {
+          "text": "The <code>tea4TeamFCC</code> variable should hold 40 cups of tea for the team.'",
+          "testString": "assert(tea4TeamFCC.length === 40, 'The <code>tea4TeamFCC</code> variable should hold 40 cups of tea for the team.')"
+        },
+        {
+          "text": "The <code>tea4TeamFCC</code> variable should hold cups of green tea.'",
+          "testString": "assert(tea4TeamFCC[0] === 'greenTea', 'The <code>tea4TeamFCC</code> variable should hold cups of green tea.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "/**",
+            " * 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);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "The <code>tea4GreenTeamFCC</code> variable should hold 27 cups of green tea for the team.'",
+          "testString": "assert(tea4GreenTeamFCC.length === 27, 'The <code>tea4GreenTeamFCC</code> variable should hold 27 cups of green tea for the team.')"
+        },
+        {
+          "text": "The <code>tea4GreenTeamFCC</code> variable should hold cups of green tea.'",
+          "testString": "assert(tea4GreenTeamFCC[0] === 'greenTea', 'The <code>tea4GreenTeamFCC</code> variable should hold cups of green tea.')"
+        },
+        {
+          "text": "The <code>tea4BlackTeamFCC</code> variable should hold 13 cups of black tea.'",
+          "testString": "assert(tea4BlackTeamFCC.length === 13, 'The <code>tea4BlackTeamFCC</code> variable should hold 13 cups of black tea.')"
+        },
+        {
+          "text": "The <code>tea4BlackTeamFCC</code> variable should hold cups of black tea.'",
+          "testString": "assert(tea4BlackTeamFCC[0] === 'blackTea', 'The <code>tea4BlackTeamFCC</code> variable should hold cups of black tea.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "/**",
+            " * 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",
+            ");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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."
+      ],
+      "tests": [
+        {
+          "text": "Move ahead to understand the error.'",
+          "testString": "assert(true, 'Move ahead to understand the error.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.'",
+          "testString": "assert(fixedValue === 4, 'Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.')"
+        },
+        {
+          "text": "Your <code>incrementer</code> function should return a value that is one larger than the <code>fixedValue</code> value.'",
+          "testString": "assert(newValue === 5, '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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.'",
+          "testString": "assert(fixedValue === 4, 'Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.')"
+        },
+        {
+          "text": "Your <code>incrementer</code> function should take a parameter.'",
+          "testString": "assert(code.match(/function\\s+?incrementer\\s*?\\(.+?\\)/g), 'Your <code>incrementer</code> function should take a parameter.')"
+        },
+        {
+          "text": "Your <code>incrementer</code> function should return a value that is one larger than the <code>fixedValue</code> value.'",
+          "testString": "assert(newValue === 5, '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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<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>.'",
+          "testString": "assert(JSON.stringify(bookList) === JSON.stringify([\"The Hound of the Baskervilles\", '<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>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert(JSON.stringify(newBookList) === JSON.stringify(['The Hound of the Baskervilles', '<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>.')"
+        },
+        {
+          "text": "<code>newerBookList</code> should equal <code>[\"The Hound of the Baskervilles\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\"]</code>.'",
+          "testString": "assert(JSON.stringify(newerBookList) === JSON.stringify(['The Hound of the Baskervilles', '<code>newerBookList</code> should equal <code>[\"The Hound of the Baskervilles\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\"]</code>.')"
+        },
+        {
+          "text": "<code>newestBookList</code> should equal <code>[\"The Hound of the Baskervilles\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\", \"A Brief History of Time\"]</code>.'",
+          "testString": "assert(JSON.stringify(newestBookList) === JSON.stringify(['The Hound of the Baskervilles', '<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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b61",
+      "title": "Use the map Method 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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "The <code>watchList</code> variable should not change.'",
+          "testString": "assert(watchList[0].Title === \"Inception\" && watchList[4].Director == \"James Cameron\", 'The <code>watchList</code> variable should not change.')"
+        },
+        {
+          "text": "Your code should not use a <code>for</code> loop.'",
+          "testString": "assert(!code.match(/for\\s*?\\(.+?\\)/g), 'Your code should not use a <code>for</code> loop.')"
+        },
+        {
+          "text": "Your code should use the <code>map</code> method.'",
+          "testString": "assert(code.match(/\\.map/g), 'Your code should use the <code>map</code> method.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert(JSON.stringify(rating) === JSON.stringify([{\"title\":\"Inception\", '<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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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); "
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>new_s</code> should equal <code>[46, 130, 196, 10]</code>.'",
+          "testString": "assert(JSON.stringify(new_s) === JSON.stringify([46, '<code>new_s</code> should equal <code>[46, 130, 196, 10]</code>.')"
+        },
+        {
+          "text": "Your code should not use the <code>map</code> method.'",
+          "testString": "assert(!code.match(/\\.map/g), 'Your code should not use the <code>map</code> method.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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;",
+            "});"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b63",
+      "title": "Use the filter Method 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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "The <code>watchList</code> variable should not change.'",
+          "testString": "assert(watchList[0].Title === \"Inception\" && watchList[4].Director == \"James Cameron\", 'The <code>watchList</code> variable should not change.')"
+        },
+        {
+          "text": "Your code should use the <code>filter</code> method.'",
+          "testString": "assert(code.match(/\\.filter/g), 'Your code should use the <code>filter</code> method.')"
+        },
+        {
+          "text": "Your code should not use a <code>for</code> loop.'",
+          "testString": "assert(!code.match(/for\\s*?\\(.+?\\)/g), 'Your code should not use a <code>for</code> loop.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(filteredList, '<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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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); "
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b64",
+      "title": "Implement the filter Method 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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>new_s</code> should equal <code>[23, 65, 5]</code>.'",
+          "testString": "assert(JSON.stringify(new_s) === JSON.stringify([23, '<code>new_s</code> should equal <code>[23, 65, 5]</code>.')"
+        },
+        {
+          "text": "Your code should not use the <code>filter</code> method.'",
+          "testString": "assert(!code.match(/\\.filter/g), 'Your code should not use the <code>filter</code> method.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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;",
+            "});"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>slice</code> method.'",
+          "testString": "assert(code.match(/\\.slice/g), 'Your code should use the <code>slice</code> method.')"
+        },
+        {
+          "text": "The <code>inputAnim</code> variable should not change.'",
+          "testString": "assert(JSON.stringify(inputAnim) === JSON.stringify([\"Cat\", 'The <code>inputAnim</code> variable should not change.')"
+        },
+        {
+          "text": "<code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 3)</code> should return <code>[\"Dog\", \"Tiger\"]</code>.'",
+          "testString": "assert(JSON.stringify(sliceArray([\"Cat\", '<code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 3)</code> should return <code>[\"Dog\", \"Tiger\"]</code>.')"
+        },
+        {
+          "text": "<code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 0, 1)</code> should return <code>[\"Cat\"]</code>.'",
+          "testString": "assert(JSON.stringify(sliceArray([\"Cat\", '<code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 0, 1)</code> should return <code>[\"Cat\"]</code>.')"
+        },
+        {
+          "text": "<code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 4)</code> should return <code>[\"Dog\", \"Tiger\", \"Zebra\"]</code>.'",
+          "testString": "assert(JSON.stringify(sliceArray([\"Cat\", '<code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 4)</code> should return <code>[\"Dog\", \"Tiger\", \"Zebra\"]</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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(inputAnim, 1, 3);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>slice</code> method.'",
+          "testString": "assert(code.match(/\\.slice/g), 'Your code should use the <code>slice</code> method.')"
+        },
+        {
+          "text": "Your code should not use the <code>splice</code> method.'",
+          "testString": "assert(!code.match(/\\.splice/g), 'Your code should not use the <code>splice</code> method.')"
+        },
+        {
+          "text": "The <code>inputCities</code> array should not change.'",
+          "testString": "assert(JSON.stringify(inputCities) === JSON.stringify([\"Chicago\", 'The <code>inputCities</code> array should not change.')"
+        },
+        {
+          "text": "<code>nonMutatingSplice([\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"])</code> should return <code>[\"Chicago\", \"Delhi\", \"Islamabad\"]</code>.'",
+          "testString": "assert(JSON.stringify(nonMutatingSplice([\"Chicago\", '<code>nonMutatingSplice([\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"])</code> should return <code>[\"Chicago\", \"Delhi\", \"Islamabad\"]</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>concat</code> method.'",
+          "testString": "assert(code.match(/\\.concat/g), 'Your code should use the <code>concat</code> method.')"
+        },
+        {
+          "text": "The <code>first</code> array should not change.'",
+          "testString": "assert(JSON.stringify(first) === JSON.stringify([1, 'The <code>first</code> array should not change.')"
+        },
+        {
+          "text": "The <code>second</code> array should not change.'",
+          "testString": "assert(JSON.stringify(second) === JSON.stringify([4, 'The <code>second</code> array should not change.')"
+        },
+        {
+          "text": "<code>nonMutatingConcat([1, 2, 3], [4, 5])</code> should return <code>[1, 2, 3, 4, 5]</code>.'",
+          "testString": "assert(JSON.stringify(nonMutatingConcat([1, '<code>nonMutatingConcat([1, 2, 3], [4, 5])</code> should return <code>[1, 2, 3, 4, 5]</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>concat</code> method.'",
+          "testString": "assert(code.match(/\\.concat/g), 'Your code should use the <code>concat</code> method.')"
+        },
+        {
+          "text": "Your code should not use the <code>push</code> method.'",
+          "testString": "assert(!code.match(/\\.push/g), 'Your code should not use the <code>push</code> method.')"
+        },
+        {
+          "text": "The <code>first</code> array should not change.'",
+          "testString": "assert(JSON.stringify(first) === JSON.stringify([1, 'The <code>first</code> array should not change.')"
+        },
+        {
+          "text": "The <code>second</code> array should not change.'",
+          "testString": "assert(JSON.stringify(second) === JSON.stringify([4, 'The <code>second</code> array should not change.')"
+        },
+        {
+          "text": "<code>nonMutatingPush([1, 2, 3], [4, 5])</code> should return <code>[1, 2, 3, 4, 5]</code>.'",
+          "testString": "assert(JSON.stringify(nonMutatingPush([1, '<code>nonMutatingPush([1, 2, 3], [4, 5])</code> should return <code>[1, 2, 3, 4, 5]</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "The <code>watchList</code> variable should not change.'",
+          "testString": "assert(watchList[0].Title === \"Inception\" && watchList[4].Director == \"James Cameron\", 'The <code>watchList</code> variable should not change.')"
+        },
+        {
+          "text": "Your code should use the <code>reduce</code> method.'",
+          "testString": "assert(code.match(/\\.reduce/g), 'Your code should use the <code>reduce</code> method.')"
+        },
+        {
+          "text": "The <code>averageRating</code> should equal 8.675.'",
+          "testString": "assert(averageRating == 8.675, 'The <code>averageRating</code> should equal 8.675.')"
+        },
+        {
+          "text": "Your code should not use a <code>for</code> loop.'",
+          "testString": "assert(!code.match(/for\\s*?\\(.*\\)/g), '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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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); "
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Use the <code>sort</code> method in the <code>alphabeticalOrder</code> function to sort the elements of <code>arr</code> in alphabetical order."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>sort</code> method.'",
+          "testString": "assert(code.match(/\\.sort/g), 'Your code should use the <code>sort</code> method.')"
+        },
+        {
+          "text": "<code>alphabeticalOrder([\"a\", \"d\", \"c\", \"a\", \"z\", \"g\"])</code> should return <code>[\"a\", \"a\", \"c\", \"d\", \"g\", \"z\"]</code>.'",
+          "testString": "assert(JSON.stringify(alphabeticalOrder([\"a\", '<code>alphabeticalOrder([\"a\", \"d\", \"c\", \"a\", \"z\", \"g\"])</code> should return <code>[\"a\", \"a\", \"c\", \"d\", \"g\", \"z\"]</code>.')"
+        },
+        {
+          "text": "<code>alphabeticalOrder([\"x\", \"h\", \"a\", \"m\", \"n\", \"m\"])</code> should return <code>[\"a\", \"h\", \"m\", \"m\", \"n\", \"x\"]</code>.'",
+          "testString": "assert(JSON.stringify(alphabeticalOrder([\"x\", '<code>alphabeticalOrder([\"x\", \"h\", \"a\", \"m\", \"n\", \"m\"])</code> should return <code>[\"a\", \"h\", \"m\", \"m\", \"n\", \"x\"]</code>.')"
+        },
+        {
+          "text": "<code>alphabeticalOrder([\"a\", \"a\", \"a\", \"a\", \"x\", \"t\"])</code> should return <code>[\"a\", \"a\", \"a\", \"a\", \"t\", \"x\"]</code>.'",
+          "testString": "assert(JSON.stringify(alphabeticalOrder([\"a\", '<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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function alphabeticalOrder(arr) {",
+            "  // Add your code below this line",
+            "  ",
+            "  ",
+            "  // Add your code above this line",
+            "}",
+            "alphabeticalOrder([\"a\", \"d\", \"c\", \"a\", \"z\", \"g\"]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>sort</code> method.'",
+          "testString": "assert(code.match(/\\.sort/g), 'Your code should use the <code>sort</code> method.')"
+        },
+        {
+          "text": "Your code should use the <code>concat</code> method.'",
+          "testString": "assert(code.match(/\\.concat/g), 'Your code should use the <code>concat</code> method.')"
+        },
+        {
+          "text": "The <code>globalArray</code> variable should not change.'",
+          "testString": "assert(JSON.stringify(globalArray) === JSON.stringify([5, 'The <code>globalArray</code> variable should not change.')"
+        },
+        {
+          "text": "<code>nonMutatingSort(globalArray)</code> should return <code>[2, 3, 5, 6, 9]</code>.'",
+          "testString": "assert(JSON.stringify(nonMutatingSort(globalArray)) === JSON.stringify([2, '<code>nonMutatingSort(globalArray)</code> should return <code>[2, 3, 5, 6, 9]</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var globalArray = [5, 6, 3, 2, 9];",
+            "function nonMutatingSort(arr) {",
+            "  // Add your code below this line",
+            "  ",
+            "  ",
+            "  // Add your code above this line",
+            "}",
+            "nonMutatingSort(globalArray);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>split</code> method.'",
+          "testString": "assert(code.match(/\\.split/g), 'Your code should use the <code>split</code> method.')"
+        },
+        {
+          "text": "<code>splitify(\"Hello World,I-am code\")</code> should return <code>[\"Hello\", \"World\", \"I\", \"am\", \"code\"]</code>.'",
+          "testString": "assert(JSON.stringify(splitify(\"Hello World, '<code>splitify(\"Hello World,I-am code\")</code> should return <code>[\"Hello\", \"World\", \"I\", \"am\", \"code\"]</code>.')"
+        },
+        {
+          "text": "<code>splitify(\"Earth-is-our home\")</code> should return <code>[\"Earth\", \"is\", \"our\", \"home\"]</code>.'",
+          "testString": "assert(JSON.stringify(splitify(\"Earth-is-our home\")) === JSON.stringify([\"Earth\", '<code>splitify(\"Earth-is-our home\")</code> should return <code>[\"Earth\", \"is\", \"our\", \"home\"]</code>.')"
+        },
+        {
+          "text": "<code>splitify(\"This.is.a-sentence\")</code> should return <code>[\"This\", \"is\", \"a\", \"sentence\"]</code>.'",
+          "testString": "assert(JSON.stringify(splitify(\"This.is.a-sentence\")) === JSON.stringify([\"This\", '<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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function splitify(str) {",
+            "  // Add your code below this line",
+            "  ",
+            "  ",
+            "  // Add your code above this line",
+            "}",
+            "splitify(\"Hello World,I-am code\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>join</code> method.'",
+          "testString": "assert(code.match(/\\.join/g), 'Your code should use the <code>join</code> method.')"
+        },
+        {
+          "text": "Your code should not use the <code>replace</code> method.'",
+          "testString": "assert(!code.match(/\\.replace/g), 'Your code should not use the <code>replace</code> method.')"
+        },
+        {
+          "text": "<code>sentensify(\"May-the-force-be-with-you\")</code> should return a string.'",
+          "testString": "assert(typeof sentensify(\"May-the-force-be-with-you\") === \"string\", '<code>sentensify(\"May-the-force-be-with-you\")</code> should return a string.')"
+        },
+        {
+          "text": "<code>sentensify(\"May-the-force-be-with-you\")</code> should return <code>\"May the force be with you\"</code>.'",
+          "testString": "assert(sentensify(\"May-the-force-be-with-you\") === \"May the force be with you\", '<code>sentensify(\"May-the-force-be-with-you\")</code> should return <code>\"May the force be with you\"</code>.')"
+        },
+        {
+          "text": "<code>sentensify(\"The.force.is.strong.with.this.one\")</code> should return <code>\"The force is strong with this one\"</code>.'",
+          "testString": "assert(sentensify(\"The.force.is.strong.with.this.one\") === \"The force is strong with this one\", '<code>sentensify(\"The.force.is.strong.with.this.one\")</code> should return <code>\"The force is strong with this one\"</code>.')"
+        },
+        {
+          "text": "<code>sentensify(\"There,has,been,an,awakening\")</code> should return <code>\"There has been an awakening\"</code>.'",
+          "testString": "assert(sentensify(\"There, '<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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function sentensify(str) {",
+            "  // Add your code below this line",
+            "  ",
+            "  ",
+            "  // Add your code above this line",
+            "}",
+            "sentensify(\"May-the-force-be-with-you\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 freeCodeCamp site.",
+        "<hr>",
+        "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"
+      ],
+      "tests": [
+        {
+          "text": "The <code>globalTitle</code> variable should not change.'",
+          "testString": "assert(globalTitle === \"Winter Is Coming\", 'The <code>globalTitle</code> variable should not change.')"
+        },
+        {
+          "text": "Your code should not use the <code>replace</code> method for this challenge.'",
+          "testString": "assert(!code.match(/\\.replace/g), 'Your code should not use the <code>replace</code> method for this challenge.')"
+        },
+        {
+          "text": "<code>urlSlug(\"Winter Is Coming\")</code> should return <code>\"winter-is-coming\"</code>.'",
+          "testString": "assert(urlSlug(\"Winter Is Coming\") === \"winter-is-coming\", '<code>urlSlug(\"Winter Is Coming\")</code> should return <code>\"winter-is-coming\"</code>.')"
+        },
+        {
+          "text": "<code>urlSlug(\" Winter Is  &nbsp;Coming\")</code> should return <code>\"winter-is-coming\"</code>.'",
+          "testString": "assert(urlSlug(\" Winter Is  Coming\") === \"winter-is-coming\", '<code>urlSlug(\" Winter Is  &nbsp;Coming\")</code> should return <code>\"winter-is-coming\"</code>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert(urlSlug(\"A Mind Needs Books Like A Sword Needs A Whetstone\") === \"a-mind-needs-books-like-a-sword-needs-a-whetstone\", '<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>.')"
+        },
+        {
+          "text": "<code>urlSlug(\"Hold The Door\")</code> should return <code>\"hold-the-door\"</code>.'",
+          "testString": "assert(urlSlug(\"Hold The Door\") === \"hold-the-door\", '<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": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// 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\""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>every</code> method.'",
+          "testString": "assert(code.match(/\\.every/g), 'Your code should use the <code>every</code> method.')"
+        },
+        {
+          "text": "<code>checkPositive([1, 2, 3, -4, 5])</code> should return <code>false</code>.'",
+          "testString": "assert(!checkPositive([1, '<code>checkPositive([1, 2, 3, -4, 5])</code> should return <code>false</code>.')"
+        },
+        {
+          "text": "<code>checkPositive([1, 2, 3, 4, 5])</code> should return <code>true</code>.'",
+          "testString": "assert(checkPositive([1, '<code>checkPositive([1, 2, 3, 4, 5])</code> should return <code>true</code>.')"
+        },
+        {
+          "text": "<code>checkPositive([1, -2, 3, -4, 5])</code> should return <code>false</code>.'",
+          "testString": "assert(!checkPositive([1, '<code>checkPositive([1, -2, 3, -4, 5])</code> should return <code>false</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function checkPositive(arr) {",
+            "  // Add your code below this line",
+            "  ",
+            "  ",
+            "  // Add your code above this line",
+            "}",
+            "checkPositive([1, 2, 3, -4, 5]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should use the <code>some</code> method.'",
+          "testString": "assert(code.match(/\\.some/g), 'Your code should use the <code>some</code> method.')"
+        },
+        {
+          "text": "<code>checkPositive([1, 2, 3, -4, 5])</code> should return <code>true</code>.'",
+          "testString": "assert(checkPositive([1, '<code>checkPositive([1, 2, 3, -4, 5])</code> should return <code>true</code>.')"
+        },
+        {
+          "text": "<code>checkPositive([1, 2, 3, 4, 5])</code> should return <code>true</code>.'",
+          "testString": "assert(checkPositive([1, '<code>checkPositive([1, 2, 3, 4, 5])</code> should return <code>true</code>.')"
+        },
+        {
+          "text": "<code>checkPositive([-1, -2, -3, -4, -5])</code> should return <code>false</code>.'",
+          "testString": "assert(!checkPositive([-1, '<code>checkPositive([-1, -2, -3, -4, -5])</code> should return <code>false</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function checkPositive(arr) {",
+            "  // Add your code below this line",
+            "  ",
+            "  ",
+            "  // Add your code above this line",
+            "}",
+            "checkPositive([1, 2, 3, -4, 5]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "<code>add(10)(20)(30)</code> should return <code>60</code>.'",
+          "testString": "assert(add(10)(20)(30) === 60, '<code>add(10)(20)(30)</code> should return <code>60</code>.')"
+        },
+        {
+          "text": "<code>add(1)(2)(3)</code> should return <code>6</code>.'",
+          "testString": "assert(add(1)(2)(3) === 6, '<code>add(1)(2)(3)</code> should return <code>6</code>.')"
+        },
+        {
+          "text": "<code>add(11)(22)(33)</code> should return <code>66</code>.'",
+          "testString": "assert(add(11)(22)(33) === 66, '<code>add(11)(22)(33)</code> should return <code>66</code>.')"
+        },
+        {
+          "text": "Your code should include a final statement that returns <code>x + y + z</code>.'",
+          "testString": "assert(code.match(/[xyz]\\s*?\\+\\s*?[xyz]\\s*?\\+\\s*?[xyz]/g), 'Your code should include a final statement that returns <code>x + y + z</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function add(x) {",
+            "  // Add your code below this line",
+            "  ",
+            "  ",
+            "  // Add your code above this line",
+            "}",
+            "add(10)(20)(30);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/functional-programming.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
new file mode 100644
index 0000000000..c9e362dc7e
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
@@ -0,0 +1,1773 @@
+{
+  "name": "Intermediate Algorithm Scripting",
+  "order": 9,
+  "time": "50 hours",
+  "helpRoom": "HelpJavaScript",
+  "challenges": [
+    {
+      "id": "a3566b1109230028080c9345",
+      "title": "Sum All Numbers in a Range",
+      "description": [
+        "We'll pass you an array of two numbers. Return the sum of those two numbers plus the sum of all the numbers between them.",
+        "The lowest number will not always come first.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "hints": [
+        "Use Math.max() to find the maximum value of two numbers.",
+        "Use Math.min() to find the minimum value of two numbers.",
+        "Remember to that you must add all the numbers in between so this would require a way to get those numbers."
+      ],
+      "solutions": [
+        "function sumAll(arr) {\n  var sum = 0;\n  arr.sort(function(a,b) {return a-b;});\n  for (var i = arr[0]; i <= arr[1]; i++) {\n    sum += i; \n  }\n  return sum;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>sumAll([1, 4])</code> should return a number.'",
+          "testString": "assert(typeof sumAll([1, '<code>sumAll([1, 4])</code> should return a number.')"
+        },
+        {
+          "text": "<code>sumAll([1, 4])</code> should return 10.'",
+          "testString": "assert.deepEqual(sumAll([1, '<code>sumAll([1, 4])</code> should return 10.')"
+        },
+        {
+          "text": "<code>sumAll([4, 1])</code> should return 10.'",
+          "testString": "assert.deepEqual(sumAll([4, '<code>sumAll([4, 1])</code> should return 10.')"
+        },
+        {
+          "text": "<code>sumAll([5, 10])</code> should return 45.'",
+          "testString": "assert.deepEqual(sumAll([5, '<code>sumAll([5, 10])</code> should return 45.')"
+        },
+        {
+          "text": "<code>sumAll([10, 5])</code> should return 45.'",
+          "testString": "assert.deepEqual(sumAll([10, '<code>sumAll([10, 5])</code> should return 45.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Math.max()",
+        "Math.min()",
+        "Array.prototype.reduce()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Suma todos los números en un rango",
+          "description": [
+            "Te pasaremos un vector que contiene dos números. Crea una función que devuelva la suma de esos dos números y todos los números entre ellos.",
+            "El número menor no siempre será el primer elemento en el vector.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Additionner tous les nombres d'une série",
+          "description": [
+            "Nous te passons un tableau de deux nombres. Crée une fonction qui renvoie la somme de ces 2 nombres ainsi que tous les nombres entre ceux-ci.",
+            "Le plus petit nombre ne viendra pas forcément en premier.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function sumAll(arr) {",
+            "  return 1;",
+            "}",
+            "",
+            "sumAll([1, 4]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a5de63ebea8dbee56860f4f2",
+      "title": "Diff Two Arrays",
+      "description": [
+        "Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both. In other words, return the symmetric difference of the two arrays.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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.",
+        "<strong>Note</strong><br>You can return the array with its elements in any order."
+      ],
+      "solutions": [
+        "function diffArray(arr1, arr2) {\n  var newArr = [];\n  var h1 = Object.create(null);\n  arr1.forEach(function(e) {\n    h1[e] = e;\n  });\n  \n  var h2 = Object.create(null);\n  arr2.forEach(function(e) {\n    h2[e] = e;\n  });\n  \n  Object.keys(h1).forEach(function(e) {\n     if (!(e in h2)) newArr.push(h1[e]);\n  });\n  Object.keys(h2).forEach(function(e) {\n     if (!(e in h1)) newArr.push(h2[e]);\n  });\n  // Same, same; but different.\n  return newArr;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])</code> should return an array.'",
+          "testString": "assert(typeof diffArray([1, '<code>diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])</code> should return an array.')"
+        },
+        {
+          "text": "<code>[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return <code>[\"pink wool\"]</code>.'",
+          "testString": "assert.sameMembers(diffArray([\"diorite\", '<code>[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return <code>[\"pink wool\"]</code>.')"
+        },
+        {
+          "text": "<code>[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return an array with one item.'",
+          "testString": "assert(diffArray([\"diorite\", '<code>[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return an array with one item.')"
+        },
+        {
+          "text": "<code>[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return <code>[\"diorite\", \"pink wool\"]</code>.'",
+          "testString": "assert.sameMembers(diffArray([\"andesite\", '<code>[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return <code>[\"diorite\", \"pink wool\"]</code>.')"
+        },
+        {
+          "text": "<code>[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return an array with two items.'",
+          "testString": "assert(diffArray([\"andesite\", '<code>[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return an array with two items.')"
+        },
+        {
+          "text": "<code>[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return <code>[]</code>.'",
+          "testString": "assert.sameMembers(diffArray([\"andesite\", '<code>[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return <code>[]</code>.')"
+        },
+        {
+          "text": "<code>[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return an empty array.'",
+          "testString": "assert(diffArray([\"andesite\", '<code>[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]</code> should return an empty array.')"
+        },
+        {
+          "text": "<code>[1, 2, 3, 5], [1, 2, 3, 4, 5]</code> should return <code>[4]</code>.'",
+          "testString": "assert.sameMembers(diffArray([1, '<code>[1, 2, 3, 5], [1, 2, 3, 4, 5]</code> should return <code>[4]</code>.')"
+        },
+        {
+          "text": "<code>[1, 2, 3, 5], [1, 2, 3, 4, 5]</code> should return an array with one item.'",
+          "testString": "assert(diffArray([1, '<code>[1, 2, 3, 5], [1, 2, 3, 4, 5]</code> should return an array with one item.')"
+        },
+        {
+          "text": "<code>[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]</code> should return <code>[\"piglet\", 4]</code>.'",
+          "testString": "assert.sameMembers(diffArray([1, '<code>[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]</code> should return <code>[\"piglet\", 4]</code>.')"
+        },
+        {
+          "text": "<code>[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]</code> should return an array with two items.'",
+          "testString": "assert(diffArray([1, '<code>[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]</code> should return an array with two items.')"
+        },
+        {
+          "text": "<code>[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]</code> should return <code>[\"snuffleupagus\", \"cookie monster\", \"elmo\"]</code>.'",
+          "testString": "assert.sameMembers(diffArray([], '<code>[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]</code> should return <code>[\"snuffleupagus\", \"cookie monster\", \"elmo\"]</code>.')"
+        },
+        {
+          "text": "<code>[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]</code> should return an array with three items.'",
+          "testString": "assert(diffArray([], '<code>[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]</code> should return an array with three items.')"
+        },
+        {
+          "text": "<code>[1, \"calf\", 3, \"piglet\"], [7, \"filly\"]</code> should return <code>[1, \"calf\", 3, \"piglet\", 7, \"filly\"]</code>.'",
+          "testString": "assert.sameMembers(diffArray([1, '<code>[1, \"calf\", 3, \"piglet\"], [7, \"filly\"]</code> should return <code>[1, \"calf\", 3, \"piglet\", 7, \"filly\"]</code>.')"
+        },
+        {
+          "text": "<code>[1, \"calf\", 3, \"piglet\"], [7, \"filly\"]</code> should return an array with six items.'",
+          "testString": "assert(diffArray([1, '<code>[1, \"calf\", 3, \"piglet\"], [7, \"filly\"]</code> should return an array with six items.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Comparison Operators",
+        "Array.prototype.slice()",
+        "Array.prototype.filter()",
+        "Array.prototype.indexOf()",
+        "Array.prototype.concat()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Obtén la diferencia entre dos vectores",
+          "description": [
+            "Crea una función que compare dos vectores y que devuelva un nuevo vector que contenga los elementos que sólo se encuentre en uno de los vectores dados, pero no en ambos En otras palabras, devuelve la diferencia simétrica entre los dos vectores.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Comparer 2 arrays",
+          "description": [
+            "Compare les 2 tableaux donnés et renvoie un nouvel tableau avec les éléments trouvé dans un seul des deux tableaux, pas dans les deux. En d'autres termes, renvoie la différence symétrique des deux tableaux.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function diffArray(arr1, arr2) {",
+            "  var newArr = [];",
+            "  // Same, same; but different.",
+            "  return newArr;",
+            "}",
+            "",
+            "diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>destroyer([1, 2, 3, 1, 2, 3], 2, 3)</code> should return <code>[1, 1]</code>.'",
+          "testString": "assert.deepEqual(destroyer([1, '<code>destroyer([1, 2, 3, 1, 2, 3], 2, 3)</code> should return <code>[1, 1]</code>.')"
+        },
+        {
+          "text": "<code>destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)</code> should return <code>[1, 5, 1]</code>.'",
+          "testString": "assert.deepEqual(destroyer([1, '<code>destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)</code> should return <code>[1, 5, 1]</code>.')"
+        },
+        {
+          "text": "<code>destroyer([3, 5, 1, 2, 2], 2, 3, 5)</code> should return <code>[1]</code>.'",
+          "testString": "assert.deepEqual(destroyer([3, '<code>destroyer([3, 5, 1, 2, 2], 2, 3, 5)</code> should return <code>[1]</code>.')"
+        },
+        {
+          "text": "<code>destroyer([2, 3, 2, 3], 2, 3)</code> should return <code>[]</code>.'",
+          "testString": "assert.deepEqual(destroyer([2, '<code>destroyer([2, 3, 2, 3], 2, 3)</code> should return <code>[]</code>.')"
+        },
+        {
+          "text": "<code>destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53)</code> should return <code>[\"hamburger\"]</code>.'",
+          "testString": "assert.deepEqual(destroyer([\"tree\", '<code>destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53)</code> should return <code>[\"hamburger\"]</code>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(destroyer([\"possum\", '<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": [
+        "Arguments object",
+        "Array.prototype.filter()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Buscar y Destruir",
+          "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.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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",
+          "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>.",
+            "Lembre-se de usar <a href=\"http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function destroyer(arr) {",
+            "  // Remove all the values",
+            "  return arr;",
+            "}",
+            "",
+            "destroyer([1, 2, 3, 1, 2, 3], 2, 3);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a8e512fbe388ac2f9198f0fa",
+      "title": "Wherefore art thou",
+      "description": [
+        "Make a function that looks through an array of objects (first argument) and returns an array of all objects that have matching name and value pairs (second argument). Each name and value pair of the source object has to be present in the object from the collection if it is to be included in the returned array.",
+        "For example, if the first argument is <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, and the second argument is <code>{ last: \"Capulet\" }</code>, then you must return the third object from the array (the first argument), because it contains the name and its value, that was passed on as the second argument.",
+        "Remember to use <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "solutions": [
+        "function whatIsInAName(collection, source) {\n  var arr = [];\n  var keys = Object.keys(source);\n  collection.forEach(function(e) {\n    if(keys.every(function(key) {return e[key] === source[key];})) {\n      arr.push(e);  \n    }\n  });\n  return arr;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" })</code> should return <code>[{ first: \"Tybalt\", last: \"Capulet\" }]</code>.'",
+          "testString": "assert.deepEqual(whatIsInAName([{ first: \"Romeo\", '<code>whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" })</code> should return <code>[{ first: \"Tybalt\", last: \"Capulet\" }]</code>.')"
+        },
+        {
+          "text": "<code>whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 })</code> should return <code>[{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }]</code>.'",
+          "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1 }, '<code>whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 })</code> should return <code>[{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }]</code>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, '<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>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, '<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>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, '<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>.')"
+        },
+        {
+          "text": "<code>whatIsInAName([{\"a\": 1, \"b\": 2, \"c\": 3}], {\"a\": 1, \"b\": 9999, \"c\": 3})</code> should return <code>[]</code>'",
+          "testString": "assert.deepEqual(whatIsInAName([{ \"a\": 1, '<code>whatIsInAName([{\"a\": 1, \"b\": 2, \"c\": 3}], {\"a\": 1, \"b\": 9999, \"c\": 3})</code> should return <code>[]</code>')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Global Object",
+        "Object.prototype.hasOwnProperty()",
+        "Object.keys()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "¿Dónde estás que no te veo?",
+          "description": [
+            "Crea una función que busque en un vector de objetos (primer argumento) y devuelva un vector con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el vector devuelto por la función",
+            "Por ejemplo, si el primer argumento es <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, y el segundo argumento es <code>{ last: \"Capulet\" }</code>, entonces tu función debe devolver el tercer objeto del vector en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "O Roméo! Roméo!",
+          "description": [
+            "Écris une fonction qui parcourt un array d'objets (premier argument) et renvoie un array de tous les objects ayant les paires de nom/valeur correspondantes à l'objet donné (second argument). Chaque paire de nom et de valeur de l'objet source doit être présente dans les objects renvoyés.",
+            "Par exemple, si le premier argument est <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, et le second argument est <code>{ last: \"Capulet\" }</code>, tu dois renvoyer le troisième objet de l'array (premier argument), parce qu'il contient le nom et sa valeur, donnés en deuxième argument.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function whatIsInAName(collection, source) {",
+            "  // What's in a name?",
+            "  var arr = [];",
+            "  // Only change code below this line",
+            "  ",
+            "  ",
+            "  // Only change code above this line",
+            "  return arr;",
+            "}",
+            "",
+            "whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" });"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/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."
+      ],
+      "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": [
+        {
+          "text": "<code>spinalCase(\"This Is Spinal Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.'",
+          "testString": "assert.deepEqual(spinalCase(\"This Is Spinal Tap\"), '<code>spinalCase(\"This Is Spinal Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.')"
+        },
+        {
+          "text": "<code>spinalCase(\"thisIsSpinal<wbr>Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.'",
+          "testString": "assert.strictEqual(spinalCase('thisIsSpinalTap'), '<code>spinalCase(\"thisIsSpinal<wbr>Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.')"
+        },
+        {
+          "text": "<code>spinalCase(\"The_Andy_<wbr>Griffith_Show\")</code> should return <code>\"the-andy-griffith-show\"</code>.'",
+          "testString": "assert.strictEqual(spinalCase(\"The_Andy_Griffith_Show\"), '<code>spinalCase(\"The_Andy_<wbr>Griffith_Show\")</code> should return <code>\"the-andy-griffith-show\"</code>.')"
+        },
+        {
+          "text": "<code>spinalCase(\"Teletubbies say Eh-oh\")</code> should return <code>\"teletubbies-say-eh-oh\"</code>.'",
+          "testString": "assert.strictEqual(spinalCase(\"Teletubbies say Eh-oh\"), '<code>spinalCase(\"Teletubbies say Eh-oh\")</code> should return <code>\"teletubbies-say-eh-oh\"</code>.')"
+        },
+        {
+          "text": "<code>spinalCase(\"AllThe-small Things\")</code> should return <code>\"all-the-small-things\"</code>.'",
+          "testString": "assert.strictEqual(spinalCase(\"AllThe-small Things\"), '<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.org/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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function spinalCase(str) {",
+            "  // \"It's such a fine line between stupid, and clever.\"",
+            "  // --David St. Hubbins",
+            "  return str;",
+            "}",
+            "",
+            "spinalCase('This Is Spinal Tap');"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "aa7697ea2477d1316795783b",
+      "title": "Pig Latin",
+      "description": [
+        "Translate the provided string to pig latin.",
+        "<a href=\"http://en.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> takes the first consonant (or consonant cluster) of an English word, moves it to the end of the word and suffixes an \"ay\".",
+        "If a word begins with a vowel you just add \"way\" to the end.",
+        "Input strings are guaranteed to be English words in all lowercase.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function translatePigLatin(str) {\n  if (isVowel(str.charAt(0))) return str + \"way\";\n  var front = [];\n  str = str.split('');\n  while (str.length && !isVowel(str[0])) {\n    front.push(str.shift());\n  }\n  return [].concat(str, front).join('') + 'ay';\n}\n\nfunction isVowel(c) {\n  return ['a', 'e', 'i', 'o', 'u'].indexOf(c.toLowerCase()) !== -1;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>translatePigLatin(\"california\")</code> should return \"aliforniacay\".'",
+          "testString": "assert.deepEqual(translatePigLatin(\"california\"), '<code>translatePigLatin(\"california\")</code> should return \"aliforniacay\".')"
+        },
+        {
+          "text": "<code>translatePigLatin(\"paragraphs\")</code> should return \"aragraphspay\".'",
+          "testString": "assert.deepEqual(translatePigLatin(\"paragraphs\"), '<code>translatePigLatin(\"paragraphs\")</code> should return \"aragraphspay\".')"
+        },
+        {
+          "text": "<code>translatePigLatin(\"glove\")</code> should return \"oveglay\".'",
+          "testString": "assert.deepEqual(translatePigLatin(\"glove\"), '<code>translatePigLatin(\"glove\")</code> should return \"oveglay\".')"
+        },
+        {
+          "text": "<code>translatePigLatin(\"algorithm\")</code> should return \"algorithmway\".'",
+          "testString": "assert.deepEqual(translatePigLatin(\"algorithm\"), '<code>translatePigLatin(\"algorithm\")</code> should return \"algorithmway\".')"
+        },
+        {
+          "text": "<code>translatePigLatin(\"eight\")</code> should return \"eightway\".'",
+          "testString": "assert.deepEqual(translatePigLatin(\"eight\"), '<code>translatePigLatin(\"eight\")</code> should return \"eightway\".')"
+        },
+        {
+          "text": "Should handle words where the first vowel comes in the end of the word.'",
+          "testString": "assert.deepEqual(translatePigLatin(\"schwartz\"), 'Should handle words where the first vowel comes in the end of the word.')"
+        },
+        {
+          "text": "Should handle words without vowels.'",
+          "testString": "assert.deepEqual(translatePigLatin(\"rhythm\"), 'Should handle words without vowels.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Array.prototype.indexOf()",
+        "Array.prototype.push()",
+        "Array.prototype.join()",
+        "String.prototype.substring()",
+        "String.prototype.split()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Latín de los cerdos",
+          "description": [
+            "Traduce la cadena de texto que se te provee al Latín de los cerdos (Pig Latin)",
+            "<a href=\"http://es.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> toma la primera consonante (o grupo de consonantes) de una palabra en inglés, la mueve al final de la palabra y agrega un \"ay\".",
+            "Si la palabra comienza con una vocal, simplemente añade \"way\" al final.",
+            "Cadenas de entrada están garantizadas de ser palabras en Inglés en minúscula.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Pig latin",
+          "description": [
+            "Traduis la phrase donnée en pig latin (verlan anglais)",
+            "Le <a href=\"http://fr.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> prend la ou les première(s) consonne(s) d'un mot en anglais et les mets à la fin du mot accompagné par le suffixe \"ay\".",
+            "Si un mot commence par une voyelle ajoute \"way\" à la fin du mot.",
+            "Les chaînes de caractères entrées sont garanties d'être des mots anglais, en lettres minuscules.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function translatePigLatin(str) {",
+            "  return str;",
+            "}",
+            "",
+            "translatePigLatin(\"consonant\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/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."
+      ],
+      "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": [
+        {
+          "text": "<code>myReplace(\"Let us go to the store\", \"store\", \"mall\")</code> should return \"Let us go to the mall\".'",
+          "testString": "assert.deepEqual(myReplace(\"Let us go to the store\", '<code>myReplace(\"Let us go to the store\", \"store\", \"mall\")</code> should return \"Let us go to the mall\".')"
+        },
+        {
+          "text": "<code>myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\")</code> should return \"He is Sitting on the couch\".'",
+          "testString": "assert.deepEqual(myReplace(\"He is Sleeping on the couch\", '<code>myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\")</code> should return \"He is Sitting on the couch\".')"
+        },
+        {
+          "text": "<code>myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\")</code> should return \"This has a spelling error\".'",
+          "testString": "assert.deepEqual(myReplace(\"This has a spellngi error\", '<code>myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\")</code> should return \"This has a spelling error\".')"
+        },
+        {
+          "text": "<code>myReplace(\"His name is Tom\", \"Tom\", \"john\")</code> should return \"His name is John\".'",
+          "testString": "assert.deepEqual(myReplace(\"His name is Tom\", '<code>myReplace(\"His name is Tom\", \"Tom\", \"john\")</code> should return \"His name is John\".')"
+        },
+        {
+          "text": "<code>myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\")</code> should return \"Let us get back to more Algorithms\".'",
+          "testString": "assert.deepEqual(myReplace(\"Let us get back to more Coding\", '<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.org/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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function myReplace(str, before, after) {",
+            "  return str;",
+            "}",
+            "",
+            "myReplace(\"A quick brown fox jumped over the lazy dog\", \"jumped\", \"leaped\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "afd15382cdfb22c9efe8b7de",
+      "title": "DNA Pairing",
+      "description": [
+        "The DNA strand is missing the pairing element. Take each character, get its pair, and return the results as a 2d array.",
+        "<a href=\"http://en.wikipedia.org/wiki/Base_pair\" target=\"_blank\">Base pairs</a> are a pair of AT and CG. Match the missing element to the provided character.",
+        "Return the provided character as the first element in each array.",
+        "For example, for the input GCG, return [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]",
+        "The character and its pair are paired up in an array, and all the arrays are grouped into one encapsulating array.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "var lookup = Object.create(null);\nlookup.A = 'T';\nlookup.T = 'A';\nlookup.C = 'G';\nlookup.G = 'C';\n\nfunction pairElement(str) {\n return str.split('').map(function(p) {return [p, lookup[p]];});\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>pairElement(\"ATCGA\")</code> should return <code>[[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]]</code>.'",
+          "testString": "assert.deepEqual(pairElement(\"ATCGA\"), '<code>pairElement(\"ATCGA\")</code> should return <code>[[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]]</code>.')"
+        },
+        {
+          "text": "<code>pairElement(\"TTGAG\")</code> should return <code>[[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]]</code>.'",
+          "testString": "assert.deepEqual(pairElement(\"TTGAG\"), '<code>pairElement(\"TTGAG\")</code> should return <code>[[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]]</code>.')"
+        },
+        {
+          "text": "<code>pairElement(\"CTCTA\")</code> should return <code>[[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]]</code>.'",
+          "testString": "assert.deepEqual(pairElement(\"CTCTA\"), '<code>pairElement(\"CTCTA\")</code> should return <code>[[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]]</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Array.prototype.push()",
+        "String.prototype.split()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Emparejando bases de ADN",
+          "description": [
+            "A la cadena de ADN que se te pasa le hace falta una hebra. Toma cada una de las letras, obtén su pareja correspondiente y devuelve los resultados en un segundo vector",
+            "<a href=\"http://es.wikipedia.org/wiki/Apareamiento_de_bases\" target=\"_blank\">Parejas de bases</a> son pares de AT y CG. Encuentra el elemento que hace falta para cada una de las letras que se te presentan.",
+            "Devuelve la letra que se te provee como el primer elemento en cada vector",
+            "Por ejemplo, si te pasáramos la cadena GCG, tu función debería devolver el vector: [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]",
+            "Cada letra que se te provee y su pareja deben estar contenidos en un vector, y cada uno de estos vectores debe estar contenidos en un vector.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Coupler les bases d'ADN",
+          "description": [
+            "Une base d'ADN a perdu sa paire. Assemble chaque paire de caractères et renvoie les résultats dans un second tableau.",
+            "Les <a href=\"https://fr.wikipedia.org/wiki/Paire_de_bases\" target=\"_blank\">paires de bases</a> sont des paires d'AT et CG. Associe l'élement manquant au caractère donné.",
+            "Renvoie le caractère donné comme premier élément de chaque tableau.",
+            "Par exemple, pour GCG, il faut renvoyer [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]",
+            "Chaque caractère et sa paire sont couplées dans un tableau, et tous les tableaux sont groupés dans un tableau.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function pairElement(str) {",
+            "  return str;",
+            "}",
+            "",
+            "pairElement(\"GCG\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "af7588ade1100bde429baf20",
+      "title": "Missing letters",
+      "description": [
+        "Find the missing letter in the passed letter range and return it.",
+        "If all letters are present in the range, return undefined.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function fearNotLetter (str) {\n  for (var i = str.charCodeAt(0); i <= str.charCodeAt(str.length - 1); i++) {\n    var letter = String.fromCharCode(i);\n    if (str.indexOf(letter) === -1) {\n      return letter;\n    }\n  }\n  \n  return undefined;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>fearNotLetter(\"abce\")</code> should return \"d\".'",
+          "testString": "assert.deepEqual(fearNotLetter('abce'), '<code>fearNotLetter(\"abce\")</code> should return \"d\".')"
+        },
+        {
+          "text": "<code>fearNotLetter(\"abcdefghjklmno\")</code> should return \"i\".'",
+          "testString": "assert.deepEqual(fearNotLetter('abcdefghjklmno'), '<code>fearNotLetter(\"abcdefghjklmno\")</code> should return \"i\".')"
+        },
+        {
+          "text": "<code>fearNotLetter(\"stvwx\")</code> should return \"u\".'",
+          "testString": "assert.deepEqual(fearNotLetter('stvwx'), '<code>fearNotLetter(\"stvwx\")</code> should return \"u\".')"
+        },
+        {
+          "text": "<code>fearNotLetter(\"bcdf\")</code> should return \"e\".'",
+          "testString": "assert.deepEqual(fearNotLetter('bcdf'), '<code>fearNotLetter(\"bcdf\")</code> should return \"e\".')"
+        },
+        {
+          "text": "<code>fearNotLetter(\"abcdefghijklmnopqrstuvwxyz\")</code> should return undefined.'",
+          "testString": "assert.isUndefined(fearNotLetter('abcdefghijklmnopqrstuvwxyz'), '<code>fearNotLetter(\"abcdefghijklmnopqrstuvwxyz\")</code> should return undefined.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "String.prototype.charCodeAt()",
+        "String.fromCharCode()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Letras perdidas",
+          "description": [
+            "Crea una función que devuelva la letra que falta en el rango de letras que se le pasa",
+            "Si todas las letras en el rango están presentes, la función debe devolver undefined.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Lettres perdues",
+          "description": [
+            "Crée une fonction qui renvoie la lettre manquante dans la série.",
+            "Si aucune lettre n'est manquante, renvoie undefined.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function fearNotLetter(str) {",
+            "  return str;",
+            "}",
+            "",
+            "fearNotLetter(\"abce\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a105e963526e7de52b219be9",
+      "title": "Sorted Union",
+      "description": [
+        "Write a function that takes two or more arrays and returns a new array of unique values in the order of the original provided arrays.",
+        "In other words, all values present from all arrays should be included in their original order, but with no duplicates in the final array.",
+        "The unique numbers should be sorted by their original order, but the final array should not be sorted in numerical order.",
+        "Check the assertion tests for examples.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function uniteUnique(arr) {\n  return [].slice.call(arguments).reduce(function(a, b) {\n    return [].concat(a, b.filter(function(e) {return a.indexOf(e) === -1;}));\n  }, []);\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1])</code> should return <code>[1, 3, 2, 5, 4]</code>.'",
+          "testString": "assert.deepEqual(uniteUnique([1, '<code>uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1])</code> should return <code>[1, 3, 2, 5, 4]</code>.')"
+        },
+        {
+          "text": "<code>uniteUnique([1, 3, 2], [1, [5]], [2, [4]])</code> should return <code>[1, 3, 2, [5], [4]]</code>.'",
+          "testString": "assert.deepEqual(uniteUnique([1, '<code>uniteUnique([1, 3, 2], [1, [5]], [2, [4]])</code> should return <code>[1, 3, 2, [5], [4]]</code>.')"
+        },
+        {
+          "text": "<code>uniteUnique([1, 2, 3], [5, 2, 1])</code> should return <code>[1, 2, 3, 5]</code>.'",
+          "testString": "assert.deepEqual(uniteUnique([1, '<code>uniteUnique([1, 2, 3], [5, 2, 1])</code> should return <code>[1, 2, 3, 5]</code>.')"
+        },
+        {
+          "text": "<code>uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8])</code> should return <code>[1, 2, 3, 5, 4, 6, 7, 8]</code>.'",
+          "testString": "assert.deepEqual(uniteUnique([1, '<code>uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8])</code> should return <code>[1, 2, 3, 5, 4, 6, 7, 8]</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Arguments object",
+        "Array.prototype.reduce()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Intersección ordenada",
+          "description": [
+            "Escribe una función que tome dos o más vectores y que devuelva un nuevo vector con los valores únicos en el orden de aparición de los vectores que se te pasaron",
+            "En otra palabras, todos los valores presentes en todos los vectores deben aparecer en el vector final en su orden original, pero sin duplicados.",
+            "Los valores únicos deben aparecer en el orden original, pero el vector final no necesariamente debe mostrar los elementos en orden numérico.",
+            "Puedes usar de referencia las pruebas de verificación si necesitas ejemplos.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Union arrangée",
+          "description": [
+            "Crée une fonction qui accepte deux tableaux ou plus et renvoie un nouvel array de valeurs uniques dans l'ordre des tableaux donnés.",
+            "En d'autres termes, toutes les valeurs des tableaux doivent être incluses dans l'ordre originel, sans doublon dans le tableau final.",
+            "Les valeurs uniques doivent être classées dans l'ordre originel, mais le tableau final ne doit pas être classé par ordre croissant.",
+            "Réfère toi aux test pour plus d'examples.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function uniteUnique(arr) {",
+            "  return arr;",
+            "}",
+            "",
+            "uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a6b0bb188d873cb2c8729495",
+      "title": "Convert HTML Entities",
+      "description": [
+        "Convert the characters <code>&</code>, <code><</code>, <code>></code>, <code>\"</code> (double quote), and <code>'</code> (apostrophe), in a string to their corresponding HTML entities.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "var MAP = { '&': '&amp;',\n            '<': '&lt;',\n            '>': '&gt;',\n            '\"': '&quot;',\n            \"'\": '&apos;'};\n\nfunction convertHTML(str) {\n  return str.replace(/[&<>\"']/g, function(c) {\n    return MAP[c];\n  });\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>convertHTML(\"Dolce & Gabbana\")</code> should return <code>Dolce &&#8203;amp; Gabbana</code>.'",
+          "testString": "assert.match(convertHTML(\"Dolce & Gabbana\"), '<code>convertHTML(\"Dolce & Gabbana\")</code> should return <code>Dolce &&#8203;amp; Gabbana</code>.')"
+        },
+        {
+          "text": "<code>convertHTML(\"Hamburgers < Pizza < Tacos\")</code> should return <code>Hamburgers &&#8203;lt; Pizza &&#8203;lt; Tacos</code>.'",
+          "testString": "assert.match(convertHTML(\"Hamburgers < Pizza < Tacos\"), '<code>convertHTML(\"Hamburgers < Pizza < Tacos\")</code> should return <code>Hamburgers &&#8203;lt; Pizza &&#8203;lt; Tacos</code>.')"
+        },
+        {
+          "text": "<code>convertHTML(\"Sixty > twelve\")</code> should return <code>Sixty &&#8203;gt; twelve</code>.'",
+          "testString": "assert.match(convertHTML(\"Sixty > twelve\"), '<code>convertHTML(\"Sixty > twelve\")</code> should return <code>Sixty &&#8203;gt; twelve</code>.')"
+        },
+        {
+          "text": "<code>convertHTML(&apos;Stuff in \"quotation marks\"&apos;)</code> should return <code>Stuff in &&#8203;quot;quotation marks&&#8203;quot;</code>.'",
+          "testString": "assert.match(convertHTML('Stuff in \"quotation marks\"'), '<code>convertHTML(&apos;Stuff in \"quotation marks\"&apos;)</code> should return <code>Stuff in &&#8203;quot;quotation marks&&#8203;quot;</code>.')"
+        },
+        {
+          "text": "<code>convertHTML(\"Schindler&apos;s List\")</code> should return <code>Schindler&&#8203;apos;s List</code>.'",
+          "testString": "assert.match(convertHTML(\"Schindler's List\"), '<code>convertHTML(\"Schindler&apos;s List\")</code> should return <code>Schindler&&#8203;apos;s List</code>.')"
+        },
+        {
+          "text": "<code>convertHTML(\"<>\")</code> should return <code>&&#8203;lt;&&#8203;gt;</code>.'",
+          "testString": "assert.match(convertHTML('<>'), '<code>convertHTML(\"<>\")</code> should return <code>&&#8203;lt;&&#8203;gt;</code>.')"
+        },
+        {
+          "text": "<code>convertHTML(\"abc\")</code> should return <code>abc</code>.'",
+          "testString": "assert.strictEqual(convertHTML('abc'), '<code>convertHTML(\"abc\")</code> should return <code>abc</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "RegExp",
+        "HTML Entities",
+        "String.prototype.replace()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Convierte entidades HTML",
+          "description": [
+            "Convierte los caracteres <code>&</code>, <code>&lt;<code>, <code>&gt;<code>, <code>\"<code>' (comilla), y <code>'<code> (apóstrofe), contenidos en la cadena de texto que se te pasa, en sus entidades HTML correspondientes",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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 les entités HTML",
+          "description": [
+            "Convertis les caractères <code>&</code>, <code>&lt;<code>, <code>&gt;<code>, <code>\"<code>' (guillemet), y <code>'<code> (apostrophe), contenus dans la chaîne de caractères en entités HTML.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function convertHTML(str) {",
+            "  // &colon;&rpar;",
+            "  return str;",
+            "}",
+            "",
+            "convertHTML(\"Dolce & Gabbana\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a5229172f011153519423690",
+      "title": "Sum All Odd Fibonacci Numbers",
+      "description": [
+        "Given a positive integer <code>num</code>, return the sum of all odd Fibonacci numbers that are less than or equal to <code>num</code>.",
+        "The first two numbers in the Fibonacci sequence are 1 and 1. Every additional number in the sequence is the sum of the two previous numbers. The first six numbers of the Fibonacci sequence are 1, 1, 2, 3, 5 and 8.",
+        "For example, <code>sumFibs(10)</code> should return <code>10</code> because all odd Fibonacci numbers less than or equal to <code>10</code> are 1, 1, 3, and 5.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function sumFibs(num) {\n  var a = 1; \n  var b = 1;\n  var s = 0;\n  while (a <= num) {\n    if (a % 2 !== 0) {   \n      s += a; \n    }\n    a = [b, b=b+a][0];\n  }\n  return s;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>sumFibs(1)</code> should return a number.'",
+          "testString": "assert(typeof sumFibs(1) === \"number\", '<code>sumFibs(1)</code> should return a number.')"
+        },
+        {
+          "text": "<code>sumFibs(1000)</code> should return 1785.'",
+          "testString": "assert(sumFibs(1000) === 1785, '<code>sumFibs(1000)</code> should return 1785.')"
+        },
+        {
+          "text": "<code>sumFibs(4000000)</code> should return 4613732.'",
+          "testString": "assert(sumFibs(4000000) === 4613732, '<code>sumFibs(4000000)</code> should return 4613732.')"
+        },
+        {
+          "text": "<code>sumFibs(4)</code> should return 5.'",
+          "testString": "assert(sumFibs(4) === 5, '<code>sumFibs(4)</code> should return 5.')"
+        },
+        {
+          "text": "<code>sumFibs(75024)</code> should return 60696.'",
+          "testString": "assert(sumFibs(75024) === 60696, '<code>sumFibs(75024)</code> should return 60696.')"
+        },
+        {
+          "text": "<code>sumFibs(75025)</code> should return 135721.'",
+          "testString": "assert(sumFibs(75025) === 135721, '<code>sumFibs(75025)</code> should return 135721.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Remainder"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Suma todos los números de Fibonacci que son impares",
+          "description": [
+            "Crea una función que devuelva la suma de todos los números impares en la secuencia de Fibonacci hasta el número que se le pasa como argumento, incluyéndolo en caso de ser un número de la secuencia.",
+            "Los primeros números de la secuencia son 1, 1, 2, 3, 5 y 8, y cada número siguiente es la suma de los dos números anteriores.",
+            "Por ejemplo, si se te pasa el número 4, la función deberá devolver 5, ya que los números impares menores que 4 son 1, 1 y 3.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Additionner tous les nombre de Fibonacci impairs",
+          "description": [
+            "Crée une fonction qui additionne tous les nombre de Fibonacci jusqu'au nombre donné (inclus si c'est un nombre de Fibonacci).",
+            "Les premiers chiffres de la séquence sont 1, 1, 2, 3, 5 y 8, et chaque nombre correspond à la somme des deux nombres précédents.",
+            "Par example, pour le chiffre 4, la fonction doit retourner 5, puisque les chiffres précédent 4 sont 1, 1 et 3.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function sumFibs(num) {",
+            "  return num;",
+            "}",
+            "",
+            "sumFibs(4);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a3bfc1673c0526e06d3ac698",
+      "title": "Sum All Primes",
+      "description": [
+        "Sum all the prime numbers up to and including the provided number.",
+        "A prime number is defined as a number greater than one and having only two divisors, one and itself. For example, 2 is a prime number because it's only divisible by one and two.",
+        "The provided number may not be a prime.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function eratosthenesArray(n) {\n    var primes = [];\n    if (n > 2) {\n        var half = n>>1;\n        var sieve = Array(half);\n        for (var i = 1, limit = Math.sqrt(n)>>1; i <= limit; i++) {\n            if (!sieve[i]) {\n                for (var step = 2*i+1, j = (step*step)>>1; j < half; j+=step) {\n                    sieve[j] = true;\n                }\n            }\n        }\n        primes.push(2);\n        for (var p = 1; p < half; p++) {\n            if (!sieve[p]) primes.push(2*p+1);\n        }\n    }\n    return primes;\n}\n\nfunction sumPrimes(num) {\n  return eratosthenesArray(num+1).reduce(function(a,b) {return a+b;}, 0);\n}\n\nsumPrimes(10);"
+      ],
+      "tests": [
+        {
+          "text": "<code>sumPrimes(10)</code> should return a number.'",
+          "testString": "assert.deepEqual(typeof sumPrimes(10), '<code>sumPrimes(10)</code> should return a number.')"
+        },
+        {
+          "text": "<code>sumPrimes(10)</code> should return 17.'",
+          "testString": "assert.deepEqual(sumPrimes(10), '<code>sumPrimes(10)</code> should return 17.')"
+        },
+        {
+          "text": "<code>sumPrimes(977)</code> should return 73156.'",
+          "testString": "assert.deepEqual(sumPrimes(977), '<code>sumPrimes(977)</code> should return 73156.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "For Loops",
+        "Array.prototype.push()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Suma todos los números primos",
+          "description": [
+            "Suma todos los números primos hasta, e incluyendo, el número que se te pasa",
+            "Números primos son todos aquellos que sólo son divisibles entre 1 y entre sí mismos. Por ejemplo, el número 2 es primo porque solo es divisible por 1 y por 2. Por el contrario, el número 1 no es primo, ya que sólo puede dividirse por sí mismo",
+            "El número que se le provee a la función no puede ser primo",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Additionner tous les nombres primaires",
+          "description": [
+            "Additionne tous les nombres primaires jusqu'au nombre donné (inclus).",
+            "Un nombre primaire est un nombre divisible que par 1 ou par lui-même (plus grand que 1). Par exemple, 2 est un nombre primaire puisqu'il n'est divisible que par 1 et 2. 1 n'est pas primaire puiqu'il n'est divisible que par lui-même.",
+            "Le nombre donné en argument n'est pas forcément un nombre primaire.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function sumPrimes(num) {",
+            "  return num;",
+            "}",
+            "",
+            "sumPrimes(10);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "ae9defd7acaf69703ab432ea",
+      "title": "Smallest Common Multiple",
+      "description": [
+        "Find the smallest common multiple of the provided parameters that can be evenly divided by both, as well as by all sequential numbers in the range between these parameters.",
+        "The range will be an array of two numbers that will not necessarily be in numerical order.",
+        "For example, if given 1 and 3, find the smallest common multiple of both 1 and 3 that is also evenly divisible by all numbers <em>between</em> 1 and 3. The answer here would be 6.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function gcd(a, b) {\n    while (b !== 0) {\n        a = [b, b = a % b][0];\n    }\n    return a;\n}\n\nfunction lcm(a, b) {\n    return (a * b) / gcd(a, b);\n}\n\nfunction smallestCommons(arr) {\n  arr.sort(function(a,b) {return a-b;});\n  var rng = [];\n  for (var i = arr[0]; i <= arr[1]; i++) {\n    rng.push(i);\n  }\n  return rng.reduce(lcm);\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>smallestCommons([1, 5])</code> should return a number.'",
+          "testString": "assert.deepEqual(typeof smallestCommons([1, '<code>smallestCommons([1, 5])</code> should return a number.')"
+        },
+        {
+          "text": "<code>smallestCommons([1, 5])</code> should return 60.'",
+          "testString": "assert.deepEqual(smallestCommons([1, '<code>smallestCommons([1, 5])</code> should return 60.')"
+        },
+        {
+          "text": "<code>smallestCommons([5, 1])</code> should return 60.'",
+          "testString": "assert.deepEqual(smallestCommons([5, '<code>smallestCommons([5, 1])</code> should return 60.')"
+        },
+        {
+          "text": "<code>smallestCommons([2, 10])</code> should return 2520.'",
+          "testString": "assert.deepEqual(smallestCommons([2, '<code>smallestCommons([2, 10])</code> should return 2520.')"
+        },
+        {
+          "text": "<code>smallestCommons([1, 13])</code> should return 360360.'",
+          "testString": "assert.deepEqual(smallestCommons([1, '<code>smallestCommons([1, 13])</code> should return 360360.')"
+        },
+        {
+          "text": "<code>smallestCommons([23, 18])</code> should return 6056820.'",
+          "testString": "assert.deepEqual(smallestCommons([23, '<code>smallestCommons([23, 18])</code> should return 6056820.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Smallest Common Multiple"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Mínimo común múltiplo",
+          "description": [
+            "En el ejercicio se te provee un vector con dos números. Crea una función que encuentre el número más pequeño que sea divisible entre ambos números, así como entre todos los números enteros entre ellos.",
+            "Tu función debe aceptar como argumento un vector con dos números, los cuales no necesariamente estarán en orden.",
+            "Por ejemplo, si se te pasan los números 1 y 3, deberás encontrar el mínimo común múltiplo de 1 y 3 que es divisible por todos los números <em>entre</em> 1 y 3.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Plus petit commun multiple",
+          "description": [
+            "Cherche le plus petit commun multiple qui soit divisible par les deux nombres donnés et par les nombres de la série entre ces deux nombres.",
+            "La série est un tableau de deux nombres qui ne seront pas nécessairement dans l'ordre croissant.",
+            "Par exemple, pour 1 et 3, il faut trouver le plus petit commun multiple de 1 et 3 mais aussi des nombres <em>entre</em> 1 et 3/",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function smallestCommons(arr) {",
+            "  return arr;",
+            "}",
+            "",
+            "",
+            "smallestCommons([1,5]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a5deed1811a43193f9f1c841",
+      "title": "Drop it",
+      "description": [
+        "Given the array <code>arr</code>, iterate through and remove each element starting from the first element (the 0 index) until the function <code>func</code> returns <code>true</code> when the iterated element is passed through it.",
+        "Then return the rest of the array once the condition is satisfied, otherwise, <code>arr</code> should be returned as an empty array.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function dropElements(arr, func) {\n  // Drop them elements.\n  while (arr.length && !func(arr[0])) {\n    arr.shift();\n  }\n  return arr;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>dropElements([1, 2, 3, 4], function(n) {return n >= 3;})</code> should return <code>[3, 4]</code>.'",
+          "testString": "assert.deepEqual(dropElements([1, '<code>dropElements([1, 2, 3, 4], function(n) {return n >= 3;})</code> should return <code>[3, 4]</code>.')"
+        },
+        {
+          "text": "<code>dropElements([0, 1, 0, 1], function(n) {return n === 1;})</code> should return <code>[1, 0, 1]</code>.'",
+          "testString": "assert.deepEqual(dropElements([0, '<code>dropElements([0, 1, 0, 1], function(n) {return n === 1;})</code> should return <code>[1, 0, 1]</code>.')"
+        },
+        {
+          "text": "<code>dropElements([1, 2, 3], function(n) {return n > 0;})</code> should return <code>[1, 2, 3]</code>.'",
+          "testString": "assert.deepEqual(dropElements([1, '<code>dropElements([1, 2, 3], function(n) {return n > 0;})</code> should return <code>[1, 2, 3]</code>.')"
+        },
+        {
+          "text": "<code>dropElements([1, 2, 3, 4], function(n) {return n > 5;})</code> should return <code>[]</code>.'",
+          "testString": "assert.deepEqual(dropElements([1, '<code>dropElements([1, 2, 3, 4], function(n) {return n > 5;})</code> should return <code>[]</code>.')"
+        },
+        {
+          "text": "<code>dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;})</code> should return <code>[7, 4]</code>.'",
+          "testString": "assert.deepEqual(dropElements([1, '<code>dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;})</code> should return <code>[7, 4]</code>.')"
+        },
+        {
+          "text": "<code>dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})</code> should return <code>[3, 9, 2]</code>.'",
+          "testString": "assert.deepEqual(dropElements([1, '<code>dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})</code> should return <code>[3, 9, 2]</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Arguments object",
+        "Array.prototype.shift()",
+        "Array.prototype.slice()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "¡Fuera de aquí!",
+          "description": [
+            "Toma los elementos contenidos en el vector que se te provee en el primer argumento de la función y elimínalos uno por uno, hasta que la función provista en el segundo argumento devuelva true.",
+            "Retorna el resto del vector, de lo contrario retorna un vector vacío.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Laisse tomber",
+          "description": [
+            "Écarte les éléments du tableau (premier argument), en commençant par la gauche, jusqu'à ce la fonction (second argument) renvoie true.",
+            "Renvoie le reste du tableau, ou dans le cas contraire un tableau vide",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function dropElements(arr, func) {",
+            "  // Drop them elements.",
+            "  return arr;",
+            "}",
+            "",
+            "dropElements([1, 2, 3], function(n) {return n < 3; });"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "ab306dbdcc907c7ddfc30830",
+      "title": "Steamroller",
+      "description": [
+        "Flatten a nested array. You must account for varying levels of nesting.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function steamrollArray(arr) {\n  if (!Array.isArray(arr)) {\n    return [arr];\n  }\n  var out = [];\n  arr.forEach(function(e) {\n    steamrollArray(e).forEach(function(v) {\n      out.push(v);\n    });\n  });\n  return out;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>steamrollArray([[[\"a\"]], [[\"b\"]]])</code> should return <code>[\"a\", \"b\"]</code>.'",
+          "testString": "assert.deepEqual(steamrollArray([[[\"a\"]], '<code>steamrollArray([[[\"a\"]], [[\"b\"]]])</code> should return <code>[\"a\", \"b\"]</code>.')"
+        },
+        {
+          "text": "<code>steamrollArray([1, [2], [3, [[4]]]])</code> should return <code>[1, 2, 3, 4]</code>.'",
+          "testString": "assert.deepEqual(steamrollArray([1, '<code>steamrollArray([1, [2], [3, [[4]]]])</code> should return <code>[1, 2, 3, 4]</code>.')"
+        },
+        {
+          "text": "<code>steamrollArray([1, [], [3, [[4]]]])</code> should return <code>[1, 3, 4]</code>.'",
+          "testString": "assert.deepEqual(steamrollArray([1, '<code>steamrollArray([1, [], [3, [[4]]]])</code> should return <code>[1, 3, 4]</code>.')"
+        },
+        {
+          "text": "<code>steamrollArray([1, {}, [3, [[4]]]])</code> should return <code>[1, {}, 3, 4]</code>.'",
+          "testString": "assert.deepEqual(steamrollArray([1, '<code>steamrollArray([1, {}, [3, [[4]]]])</code> should return <code>[1, {}, 3, 4]</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Array.isArray()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Aplanadora",
+          "description": [
+            "Aplana el vector anidado que se te provee. Tu función debe poder aplanar vectores de cualquier forma.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Rouleau compresseur",
+          "description": [
+            "Aplatis le tableau donné. Ta fonction doit pour gérer différentes formes de tableaux.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function steamrollArray(arr) {",
+            "  // I'm a steamroller, baby",
+            "  return arr;",
+            "}",
+            "",
+            "steamrollArray([1, [2], [3, [[4]]]]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a8d97bd4c764e91f9d2bda01",
+      "title": "Binary Agents",
+      "description": [
+        "Return an English translated sentence of the passed binary string.",
+        "The binary string will be space separated.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function binaryAgent(str) {\n  return str.split(' ').map(function(s) { return parseInt(s, 2); }).map(function(b) { return String.fromCharCode(b);}).join('');\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>binaryAgent(\"01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111\")</code> should return \"Aren&#39;t bonfires fun!?\"'",
+          "testString": "assert.deepEqual(binaryAgent('01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111'), '<code>binaryAgent(\"01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111\")</code> should return \"Aren&#39;t bonfires fun!?\"')"
+        },
+        {
+          "text": "<code>binaryAgent(\"01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001\")</code> should return \"I love FreeCodeCamp!\"'",
+          "testString": "assert.deepEqual(binaryAgent('01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001'), '<code>binaryAgent(\"01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001\")</code> should return \"I love FreeCodeCamp!\"')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "String.prototype.charCodeAt()",
+        "String.fromCharCode()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Mensaje secreto",
+          "description": [
+            "Haz que la función devuelva el mensaje en inglés escondido en el código binario de la cadena de texto que se le pasa.",
+            "La cadena de texto binaria estará separada por espacios.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Agent binaire",
+          "description": [
+            "Traduis la chaîne binaire donnée en anglais.",
+            "La chaîne binaire comporte des espaces.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function binaryAgent(str) {",
+            "  return str;",
+            "}",
+            "",
+            "binaryAgent(\"01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a10d2431ad0c6a099a4b8b52",
+      "title": "Everything Be True",
+      "description": [
+        "Check if the predicate (second argument) is <dfn>truthy</dfn> on all elements of a collection (first argument).",
+        "In other words, you are given an array collection of objects. The predicate <code>pre</code> will be an object property and you need to return <code>true</code> if its value is <code>truthy</code>. Otherwise, return <code>false</code>.",
+        "In JavaScript, <code>truthy</code> values are values that translate to <code>true</code> when evaluated in a Boolean context.",
+        "Remember, you can access object properties through either dot notation or <code>[]</code> notation.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function truthCheck(collection, pre) {\n  // Does everyone have one of these?\n  return collection.every(function(e) { return e[pre]; });\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>truthCheck([{\"user\": \"Tinky-Winky\", \"sex\": \"male\"}, {\"user\": \"Dipsy\", \"sex\": \"male\"}, {\"user\": \"Laa-Laa\", \"sex\": \"female\"}, {\"user\": \"Po\", \"sex\": \"female\"}], \"sex\")</code> should return true.'",
+          "testString": "assert.strictEqual(truthCheck([{\"user\": \"Tinky-Winky\", '<code>truthCheck([{\"user\": \"Tinky-Winky\", \"sex\": \"male\"}, {\"user\": \"Dipsy\", \"sex\": \"male\"}, {\"user\": \"Laa-Laa\", \"sex\": \"female\"}, {\"user\": \"Po\", \"sex\": \"female\"}], \"sex\")</code> should return true.')"
+        },
+        {
+          "text": "<code>truthCheck([{\"user\": \"Tinky-Winky\", \"sex\": \"male\"}, {\"user\": \"Dipsy\"}, {\"user\": \"Laa-Laa\", \"sex\": \"female\"}, {\"user\": \"Po\", \"sex\": \"female\"}], \"sex\")</code> should return false.'",
+          "testString": "assert.strictEqual(truthCheck([{\"user\": \"Tinky-Winky\", '<code>truthCheck([{\"user\": \"Tinky-Winky\", \"sex\": \"male\"}, {\"user\": \"Dipsy\"}, {\"user\": \"Laa-Laa\", \"sex\": \"female\"}, {\"user\": \"Po\", \"sex\": \"female\"}], \"sex\")</code> should return false.')"
+        },
+        {
+          "text": "<code>truthCheck([{\"user\": \"Tinky-Winky\", \"sex\": \"male\", \"age\": 0}, {\"user\": \"Dipsy\", \"sex\": \"male\", \"age\": 3}, {\"user\": \"Laa-Laa\", \"sex\": \"female\", \"age\": 5}, {\"user\": \"Po\", \"sex\": \"female\", \"age\": 4}], \"age\")</code> should return false.'",
+          "testString": "assert.strictEqual(truthCheck([{\"user\": \"Tinky-Winky\", '<code>truthCheck([{\"user\": \"Tinky-Winky\", \"sex\": \"male\", \"age\": 0}, {\"user\": \"Dipsy\", \"sex\": \"male\", \"age\": 3}, {\"user\": \"Laa-Laa\", \"sex\": \"female\", \"age\": 5}, {\"user\": \"Po\", \"sex\": \"female\", \"age\": 4}], \"age\")</code> should return false.')"
+        },
+        {
+          "text": "<code>truthCheck([{\"name\": \"Pete\", \"onBoat\": true}, {\"name\": \"Repeat\", \"onBoat\": true}, {\"name\": \"FastFoward\", \"onBoat\": null}], \"onBoat\")</code> should return false'",
+          "testString": "assert.strictEqual(truthCheck([{\"name\": \"Pete\", '<code>truthCheck([{\"name\": \"Pete\", \"onBoat\": true}, {\"name\": \"Repeat\", \"onBoat\": true}, {\"name\": \"FastFoward\", \"onBoat\": null}], \"onBoat\")</code> should return false')"
+        },
+        {
+          "text": "<code>truthCheck([{\"name\": \"Pete\", \"onBoat\": true}, {\"name\": \"Repeat\", \"onBoat\": true, \"alias\": \"Repete\"}, {\"name\": \"FastFoward\", \"onBoat\": true}], \"onBoat\")</code> should return true'",
+          "testString": "assert.strictEqual(truthCheck([{\"name\": \"Pete\", '<code>truthCheck([{\"name\": \"Pete\", \"onBoat\": true}, {\"name\": \"Repeat\", \"onBoat\": true, \"alias\": \"Repete\"}, {\"name\": \"FastFoward\", \"onBoat\": true}], \"onBoat\")</code> should return true')"
+        },
+        {
+          "text": "<code>truthCheck([{\"single\": \"yes\"}], \"single\")</code> should return true'",
+          "testString": "assert.strictEqual(truthCheck([{\"single\": \"yes\"}], '<code>truthCheck([{\"single\": \"yes\"}], \"single\")</code> should return true')"
+        },
+        {
+          "text": "<code>truthCheck([{\"single\": \"\"}, {\"single\": \"double\"}], \"single\")</code> should return false'",
+          "testString": "assert.strictEqual(truthCheck([{\"single\": \"\"}, '<code>truthCheck([{\"single\": \"\"}, {\"single\": \"double\"}], \"single\")</code> should return false')"
+        },
+        {
+          "text": "<code>truthCheck([{\"single\": \"double\"}, {\"single\": undefined}], \"single\")</code> should return false'",
+          "testString": "assert.strictEqual(truthCheck([{\"single\": \"double\"}, '<code>truthCheck([{\"single\": \"double\"}, {\"single\": undefined}], \"single\")</code> should return false')"
+        },
+        {
+          "text": "<code>truthCheck([{\"single\": \"double\"}, {\"single\": NaN}], \"single\")</code> should return false'",
+          "testString": "assert.strictEqual(truthCheck([{\"single\": \"double\"}, '<code>truthCheck([{\"single\": \"double\"}, {\"single\": NaN}], \"single\")</code> should return false')"
+        }
+      ],
+      "isRequired": true,
+      "type": "bonfire",
+      "MDNlinks": [
+        "Truthy",
+        "Falsy"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Que todo sea verdadero",
+          "description": [
+            "Verifica si la función en el segundo argumento devuelve true para todos los elementos de la colección en el primer argumento.",
+            "Recuerda que puedes accesar a las propiedades de un objeto, ya sea a través de la notación por punto o de la notación por corchete usando [].",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Tout doit être vrai",
+          "description": [
+            "Vérifie que la fonction donnée (second argument) est vraie sur tous les éléments de la collection (premier argument).",
+            "Tu peux utiliser un point ou des [] pour accéder aux propritétés de l'objet.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function truthCheck(collection, pre) {",
+            "  // Is everyone being true?",
+            "  return pre;",
+            "}",
+            "",
+            "truthCheck([{\"user\": \"Tinky-Winky\", \"sex\": \"male\"}, {\"user\": \"Dipsy\", \"sex\": \"male\"}, {\"user\": \"Laa-Laa\", \"sex\": \"female\"}, {\"user\": \"Po\", \"sex\": \"female\"}], \"sex\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "a97fd23d9b809dac9921074f",
+      "title": "Arguments Optional",
+      "description": [
+        "Create a function that sums two arguments together. If only one argument is provided, then return a function that expects one argument and returns the sum.",
+        "For example, <code>addTogether(2, 3)</code> should return <code>5</code>, and <code>addTogether(2)</code> should return a function.",
+        "Calling this returned function with a single argument will then return the sum:",
+        "<code>var sumTwoAnd = addTogether(2);</code>",
+        "<code>sumTwoAnd(3)</code> returns <code>5</code>.",
+        "If either argument isn't a valid number, return undefined.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "function addTogether() {\n  var a = arguments[0];\n  if (toString.call(a) !== '[object Number]') return;  \n  if (arguments.length === 1) {\n    return function(b) {\n      if (toString.call(b) !== '[object Number]') return;\n      return a + b;\n    };\n  }\n  var b = arguments[1];\n  if (toString.call(b) !== '[object Number]') return;  \n  return a + arguments[1];\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>addTogether(2, 3)</code> should return 5.'",
+          "testString": "assert.deepEqual(addTogether(2, '<code>addTogether(2, 3)</code> should return 5.')"
+        },
+        {
+          "text": "<code>addTogether(2)(3)</code> should return 5.'",
+          "testString": "assert.deepEqual(addTogether(2)(3), '<code>addTogether(2)(3)</code> should return 5.')"
+        },
+        {
+          "text": "<code>addTogether(\"http://bit.ly/IqT6zt\")</code> should return undefined.'",
+          "testString": "assert.isUndefined(addTogether(\"http://bit.ly/IqT6zt\"), '<code>addTogether(\"http://bit.ly/IqT6zt\")</code> should return undefined.')"
+        },
+        {
+          "text": "<code>addTogether(2, \"3\")</code> should return undefined.'",
+          "testString": "assert.isUndefined(addTogether(2, '<code>addTogether(2, \"3\")</code> should return undefined.')"
+        },
+        {
+          "text": "<code>addTogether(2)([3])</code> should return undefined.'",
+          "testString": "assert.isUndefined(addTogether(2)([3]), '<code>addTogether(2)([3])</code> should return undefined.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Closures",
+        "Arguments object"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Argumentos opcionales",
+          "description": [
+            "Crea una función que sume dos argumentos. Si sólo se le pasa un argumento a la función, haz que devuelva otra función que acepte un argumento y que devuelva la suma correspondiente.",
+            "Por ejemplo, <code>add(2, 3)</code> debe devolver <code>5</code>, y <code>add(2)</code> debe devolver una función.",
+            "Al llamar esta función con un único argumento devolverá la suma:",
+            "<code>var sumTwoAnd = add(2);</code>",
+            "<code>sumTwoAnd(3)</code> devuelve <code>5</code>.",
+            "Si alguno de los argumentos no es un número válido, haz que devuelva undefined.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Arguments optionnels",
+          "description": [
+            "Crée une fonction qui additionne deux arguments. Si un seul argument est donné, renvoie une fonction qui attend un argument et renvoie la somme.",
+            "Par exemple, <code>add(2, 3)</code>, doit renvoyer <code>5</code>, et <code>add(2)</code> doit renvoyer une fonction.",
+            "Appeler cette fonction avec un seul argument renvoie la somme:",
+            "<code>var sumTwoAnd = add(2);</code>",
+            "<code>sumTwoAnd(3)</code> renvoie <code>5</code>.",
+            "Si aucun argument n'est un nombre, renvoie undefined.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/arguments-optional",
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function addTogether() {",
+            "  return false;",
+            "}",
+            "",
+            "addTogether(2,3);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/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."
+      ],
+      "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": [
+        {
+          "text": "<code>Object.keys(bob).length</code> should return 6.'",
+          "testString": "assert.deepEqual(Object.keys(bob).length, '<code>Object.keys(bob).length</code> should return 6.')"
+        },
+        {
+          "text": "<code>bob instanceof Person</code> should return true.'",
+          "testString": "assert.deepEqual(bob instanceof Person, '<code>bob instanceof Person</code> should return true.')"
+        },
+        {
+          "text": "<code>bob.firstName</code> should return undefined.'",
+          "testString": "assert.deepEqual(bob.firstName, '<code>bob.firstName</code> should return undefined.')"
+        },
+        {
+          "text": "<code>bob.lastName</code> should return undefined.'",
+          "testString": "assert.deepEqual(bob.lastName, '<code>bob.lastName</code> should return undefined.')"
+        },
+        {
+          "text": "<code>bob.getFirstName()</code> should return \"Bob\".'",
+          "testString": "assert.deepEqual(bob.getFirstName(), '<code>bob.getFirstName()</code> should return \"Bob\".')"
+        },
+        {
+          "text": "<code>bob.getLastName()</code> should return \"Ross\".'",
+          "testString": "assert.deepEqual(bob.getLastName(), '<code>bob.getLastName()</code> should return \"Ross\".')"
+        },
+        {
+          "text": "<code>bob.getFullName()</code> should return \"Bob Ross\".'",
+          "testString": "assert.deepEqual(bob.getFullName(), '<code>bob.getFullName()</code> should return \"Bob Ross\".')"
+        },
+        {
+          "text": "<code>bob.getFullName()</code> should return \"Haskell Ross\" after <code>bob.setFirstName(\"Haskell\")</code>.'",
+          "testString": "assert.strictEqual((function () { bob.setFirstName(\"Haskell\"); return bob.getFullName(); })(), '<code>bob.getFullName()</code> should return \"Haskell Ross\" after <code>bob.setFirstName(\"Haskell\")</code>.')"
+        },
+        {
+          "text": "<code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setLastName(\"Curry\")</code>.'",
+          "testString": "assert.strictEqual((function () { var _bob=new Person('Haskell Ross'); _bob.setLastName(\"Curry\"); return _bob.getFullName(); })(), '<code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setLastName(\"Curry\")</code>.')"
+        },
+        {
+          "text": "<code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.'",
+          "testString": "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFullName(); })(), '<code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.')"
+        },
+        {
+          "text": "<code>bob.getFirstName()</code> should return \"Haskell\" after <code>bob.setFullName(\"Haskell Curry\")</code>.'",
+          "testString": "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFirstName(); })(), '<code>bob.getFirstName()</code> should return \"Haskell\" after <code>bob.setFullName(\"Haskell Curry\")</code>.')"
+        },
+        {
+          "text": "<code>bob.getLastName()</code> should return \"Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.'",
+          "testString": "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getLastName(); })(), '<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.org/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.org/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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "var Person = function(firstAndLast) {",
+            "  // Complete the method below and implement the others similarly",
+            "  this.getFullName = function() {",
+            "    return \"\";",
+            "  };",
+            "  return firstAndLast;",
+            "};",
+            "",
+            "var bob = new Person('Bob Ross');",
+            "bob.getFullName();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "af4afb223120f7348cdfc9fd",
+      "title": "Map the Debris",
+      "description": [
+        "Return a new array that transforms the elements' average altitude into their orbital periods (in seconds).",
+        "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.org/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."
+      ],
+      "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": [
+        {
+          "text": "<code>orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}])</code> should return <code>[{name: \"sputnik\", orbitalPeriod: 86400}]</code>.'",
+          "testString": "assert.deepEqual(orbitalPeriod([{name : \"sputnik\", '<code>orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}])</code> should return <code>[{name: \"sputnik\", orbitalPeriod: 86400}]</code>.')"
+        },
+        {
+          "text": "<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>.'",
+          "testString": "assert.deepEqual(orbitalPeriod([{name: \"iss\", '<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.org/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.org/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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function orbitalPeriod(arr) {",
+            "  var GM = 398600.4418;",
+            "  var earthRadius = 6367.4447;",
+            "  return arr;",
+            "}",
+            "",
+            "orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.json
new file mode 100644
index 0000000000..498382cdc5
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.json
@@ -0,0 +1,662 @@
+{
+  "name": "JavaScript Algorithms and Data Structures Projects",
+  "order": 10,
+  "time": "50 hours",
+  "helpRoom": "HelpJavaScript",
+  "challenges": [
+    {
+      "id": "aaa48de84e1ecc7c742e1124",
+      "title": "Palindrome Checker",
+      "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.org/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "tests": [
+        {
+          "text": "<code>palindrome(\"eye\")</code> should return a boolean.'",
+          "testString": "assert(typeof palindrome(\"eye\") === \"boolean\", '<code>palindrome(\"eye\")</code> should return a boolean.')"
+        },
+        {
+          "text": "<code>palindrome(\"eye\")</code> should return true.'",
+          "testString": "assert(palindrome(\"eye\") === true, '<code>palindrome(\"eye\")</code> should return true.')"
+        },
+        {
+          "text": "<code>palindrome(\"_eye\")</code> should return true.'",
+          "testString": "assert(palindrome(\"_eye\") === true, '<code>palindrome(\"_eye\")</code> should return true.')"
+        },
+        {
+          "text": "<code>palindrome(\"race car\")</code> should return true.'",
+          "testString": "assert(palindrome(\"race car\") === true, '<code>palindrome(\"race car\")</code> should return true.')"
+        },
+        {
+          "text": "<code>palindrome(\"not a palindrome\")</code> should return false.'",
+          "testString": "assert(palindrome(\"not a palindrome\") === false, '<code>palindrome(\"not a palindrome\")</code> should return false.')"
+        },
+        {
+          "text": "<code>palindrome(\"A man, a plan, a canal. Panama\")</code> should return true.'",
+          "testString": "assert(palindrome(\"A man, a plan, a canal. Panama\") === true, '<code>palindrome(\"A man, a plan, a canal. Panama\")</code> should return true.')"
+        },
+        {
+          "text": "<code>palindrome(\"never odd or even\")</code> should return true.'",
+          "testString": "assert(palindrome(\"never odd or even\") === true, '<code>palindrome(\"never odd or even\")</code> should return true.')"
+        },
+        {
+          "text": "<code>palindrome(\"nope\")</code> should return false.'",
+          "testString": "assert(palindrome(\"nope\") === false, '<code>palindrome(\"nope\")</code> should return false.')"
+        },
+        {
+          "text": "<code>palindrome(\"almostomla\")</code> should return false.'",
+          "testString": "assert(palindrome(\"almostomla\") === false, '<code>palindrome(\"almostomla\")</code> should return false.')"
+        },
+        {
+          "text": "<code>palindrome(\"My age is 0, 0 si ega ym.\")</code> should return true.'",
+          "testString": "assert(palindrome(\"My age is 0, 0 si ega ym.\") === true, '<code>palindrome(\"My age is 0, 0 si ega ym.\")</code> should return true.')"
+        },
+        {
+          "text": "<code>palindrome(\"1 eye for of 1 eye.\")</code> should return false.'",
+          "testString": "assert(palindrome(\"1 eye for of 1 eye.\") === false, '<code>palindrome(\"1 eye for of 1 eye.\")</code> should return false.')"
+        },
+        {
+          "text": "<code>palindrome(\"0_0 (: /-\\ :) 0-0\")</code> should return true.'",
+          "testString": "assert(palindrome(\"0_0 (: /-\\ :) 0-0\") === true, '<code>palindrome(\"0_0 (: /-\\ :) 0-0\")</code> should return true.')"
+        },
+        {
+          "text": "<code>palindrome(\"five|\\_/|four\")</code> should return false.'",
+          "testString": "assert(palindrome(\"five|\\_/|four\") === false, '<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.org/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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function palindrome(str) {",
+            "  // Good luck!",
+            "  return true;",
+            "}",
+            "",
+            "",
+            "",
+            "palindrome(\"eye\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/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."
+      ],
+      "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": [
+        {
+          "text": "<code>convertToRoman(2)</code> should return \"II\".'",
+          "testString": "assert.deepEqual(convertToRoman(2), '<code>convertToRoman(2)</code> should return \"II\".')"
+        },
+        {
+          "text": "<code>convertToRoman(3)</code> should return \"III\".'",
+          "testString": "assert.deepEqual(convertToRoman(3), '<code>convertToRoman(3)</code> should return \"III\".')"
+        },
+        {
+          "text": "<code>convertToRoman(4)</code> should return \"IV\".'",
+          "testString": "assert.deepEqual(convertToRoman(4), '<code>convertToRoman(4)</code> should return \"IV\".')"
+        },
+        {
+          "text": "<code>convertToRoman(5)</code> should return \"V\".'",
+          "testString": "assert.deepEqual(convertToRoman(5), '<code>convertToRoman(5)</code> should return \"V\".')"
+        },
+        {
+          "text": "<code>convertToRoman(9)</code> should return \"IX\".'",
+          "testString": "assert.deepEqual(convertToRoman(9), '<code>convertToRoman(9)</code> should return \"IX\".')"
+        },
+        {
+          "text": "<code>convertToRoman(12)</code> should return \"XII\".'",
+          "testString": "assert.deepEqual(convertToRoman(12), '<code>convertToRoman(12)</code> should return \"XII\".')"
+        },
+        {
+          "text": "<code>convertToRoman(16)</code> should return \"XVI\".'",
+          "testString": "assert.deepEqual(convertToRoman(16), '<code>convertToRoman(16)</code> should return \"XVI\".')"
+        },
+        {
+          "text": "<code>convertToRoman(29)</code> should return \"XXIX\".'",
+          "testString": "assert.deepEqual(convertToRoman(29), '<code>convertToRoman(29)</code> should return \"XXIX\".')"
+        },
+        {
+          "text": "<code>convertToRoman(44)</code> should return \"XLIV\".'",
+          "testString": "assert.deepEqual(convertToRoman(44), '<code>convertToRoman(44)</code> should return \"XLIV\".')"
+        },
+        {
+          "text": "<code>convertToRoman(45)</code> should return \"XLV\"'",
+          "testString": "assert.deepEqual(convertToRoman(45), '<code>convertToRoman(45)</code> should return \"XLV\"')"
+        },
+        {
+          "text": "<code>convertToRoman(68)</code> should return \"LXVIII\"'",
+          "testString": "assert.deepEqual(convertToRoman(68), '<code>convertToRoman(68)</code> should return \"LXVIII\"')"
+        },
+        {
+          "text": "<code>convertToRoman(83)</code> should return \"LXXXIII\"'",
+          "testString": "assert.deepEqual(convertToRoman(83), '<code>convertToRoman(83)</code> should return \"LXXXIII\"')"
+        },
+        {
+          "text": "<code>convertToRoman(97)</code> should return \"XCVII\"'",
+          "testString": "assert.deepEqual(convertToRoman(97), '<code>convertToRoman(97)</code> should return \"XCVII\"')"
+        },
+        {
+          "text": "<code>convertToRoman(99)</code> should return \"XCIX\"'",
+          "testString": "assert.deepEqual(convertToRoman(99), '<code>convertToRoman(99)</code> should return \"XCIX\"')"
+        },
+        {
+          "text": "<code>convertToRoman(400)</code> should return \"CD\"'",
+          "testString": "assert.deepEqual(convertToRoman(400), '<code>convertToRoman(400)</code> should return \"CD\"')"
+        },
+        {
+          "text": "<code>convertToRoman(500)</code> should return \"D\"'",
+          "testString": "assert.deepEqual(convertToRoman(500), '<code>convertToRoman(500)</code> should return \"D\"')"
+        },
+        {
+          "text": "<code>convertToRoman(501)</code> should return \"DI\"'",
+          "testString": "assert.deepEqual(convertToRoman(501), '<code>convertToRoman(501)</code> should return \"DI\"')"
+        },
+        {
+          "text": "<code>convertToRoman(649)</code> should return \"DCXLIX\"'",
+          "testString": "assert.deepEqual(convertToRoman(649), '<code>convertToRoman(649)</code> should return \"DCXLIX\"')"
+        },
+        {
+          "text": "<code>convertToRoman(798)</code> should return \"DCCXCVIII\"'",
+          "testString": "assert.deepEqual(convertToRoman(798), '<code>convertToRoman(798)</code> should return \"DCCXCVIII\"')"
+        },
+        {
+          "text": "<code>convertToRoman(891)</code> should return \"DCCCXCI\"'",
+          "testString": "assert.deepEqual(convertToRoman(891), '<code>convertToRoman(891)</code> should return \"DCCCXCI\"')"
+        },
+        {
+          "text": "<code>convertToRoman(1000)</code> should return \"M\"'",
+          "testString": "assert.deepEqual(convertToRoman(1000), '<code>convertToRoman(1000)</code> should return \"M\"')"
+        },
+        {
+          "text": "<code>convertToRoman(1004)</code> should return \"MIV\"'",
+          "testString": "assert.deepEqual(convertToRoman(1004), '<code>convertToRoman(1004)</code> should return \"MIV\"')"
+        },
+        {
+          "text": "<code>convertToRoman(1006)</code> should return \"MVI\"'",
+          "testString": "assert.deepEqual(convertToRoman(1006), '<code>convertToRoman(1006)</code> should return \"MVI\"')"
+        },
+        {
+          "text": "<code>convertToRoman(1023)</code> should return \"MXXIII\"'",
+          "testString": "assert.deepEqual(convertToRoman(1023), '<code>convertToRoman(1023)</code> should return \"MXXIII\"')"
+        },
+        {
+          "text": "<code>convertToRoman(2014)</code> should return \"MMXIV\"'",
+          "testString": "assert.deepEqual(convertToRoman(2014), '<code>convertToRoman(2014)</code> should return \"MMXIV\"')"
+        },
+        {
+          "text": "<code>convertToRoman(3999)</code> should return \"MMMCMXCIX\"'",
+          "testString": "assert.deepEqual(convertToRoman(3999), '<code>convertToRoman(3999)</code> should return \"MMMCMXCIX\"')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Roman Numerals",
+        "Array.prototype.splice()",
+        "Array.prototype.indexOf()",
+        "Array.prototype.join()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Convertior de números romanos",
+          "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.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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",
+          "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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function convertToRoman(num) {",
+            " return num;",
+            "}",
+            "",
+            "convertToRoman(36);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.org/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."
+      ],
+      "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": [
+        {
+          "text": "<code>rot13(\"SERR PBQR PNZC\")</code> should decode to <code>FREE CODE CAMP</code>'",
+          "testString": "assert(rot13(\"SERR PBQR PNZC\") === \"FREE CODE CAMP\", '<code>rot13(\"SERR PBQR PNZC\")</code> should decode to <code>FREE CODE CAMP</code>')"
+        },
+        {
+          "text": "<code>rot13(\"SERR CVMMN!\")</code> should decode to <code>FREE PIZZA!</code>'",
+          "testString": "assert(rot13(\"SERR CVMMN!\") === \"FREE PIZZA!\", '<code>rot13(\"SERR CVMMN!\")</code> should decode to <code>FREE PIZZA!</code>')"
+        },
+        {
+          "text": "<code>rot13(\"SERR YBIR?\")</code> should decode to <code>FREE LOVE?</code>'",
+          "testString": "assert(rot13(\"SERR YBIR?\") === \"FREE LOVE?\", '<code>rot13(\"SERR YBIR?\")</code> should decode to <code>FREE LOVE?</code>')"
+        },
+        {
+          "text": "<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>'",
+          "testString": "assert(rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\") === \"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.\", '<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.org/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.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function rot13(str) { // LBH QVQ VG!",
+            "  ",
+            "  return str;",
+            "}",
+            "",
+            "// Change the inputs below to test",
+            "rot13(\"SERR PBQR PNZC\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "aff0395860f5d3034dc0bfc9",
+      "title": "Telephone Number Validator",
+      "description": [
+        "Return <code>true</code> if the passed string looks like a valid US phone number.",
+        "The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants):",
+        "<blockquote>555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555</blockquote>",
+        "For this challenge you will be presented with a string such as <code>800-692-7753</code> or <code>8oo-six427676;laskdjf</code>. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is <code>1</code>. Return <code>true</code> if the string is a valid US phone number; otherwise return <code>false</code>.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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."
+      ],
+      "solutions": [
+        "var re = /^([+]?1[\\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\\s.-]?){1}([0-9]{4}){1}$/;\n\nfunction telephoneCheck(str) {\n  return re.test(str);\n}\n\ntelephoneCheck(\"555-555-5555\");"
+      ],
+      "tests": [
+        {
+          "text": "<code>telephoneCheck(\"555-555-5555\")</code> should return a boolean.'",
+          "testString": "assert(typeof telephoneCheck(\"555-555-5555\") === \"boolean\", '<code>telephoneCheck(\"555-555-5555\")</code> should return a boolean.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"1 555-555-5555\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"1 555-555-5555\") === true, '<code>telephoneCheck(\"1 555-555-5555\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"1 (555) 555-5555\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"1 (555) 555-5555\") === true, '<code>telephoneCheck(\"1 (555) 555-5555\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"5555555555\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"5555555555\") === true, '<code>telephoneCheck(\"5555555555\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"555-555-5555\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"555-555-5555\") === true, '<code>telephoneCheck(\"555-555-5555\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"(555)555-5555\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"(555)555-5555\") === true, '<code>telephoneCheck(\"(555)555-5555\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"1(555)555-5555\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"1(555)555-5555\") === true, '<code>telephoneCheck(\"1(555)555-5555\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"555-5555\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"555-5555\") === false, '<code>telephoneCheck(\"555-5555\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"5555555\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"5555555\") === false, '<code>telephoneCheck(\"5555555\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"1 555)555-5555\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"1 555)555-5555\") === false, '<code>telephoneCheck(\"1 555)555-5555\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"1 555 555 5555\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"1 555 555 5555\") === true, '<code>telephoneCheck(\"1 555 555 5555\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"1 456 789 4444\")</code> should return true.'",
+          "testString": "assert(telephoneCheck(\"1 456 789 4444\") === true, '<code>telephoneCheck(\"1 456 789 4444\")</code> should return true.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"123**&!!asdf#\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"123**&!!asdf#\") === false, '<code>telephoneCheck(\"123**&!!asdf#\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"55555555\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"55555555\") === false, '<code>telephoneCheck(\"55555555\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"(6054756961)\")</code> should return false'",
+          "testString": "assert(telephoneCheck(\"(6054756961)\") === false, '<code>telephoneCheck(\"(6054756961)\")</code> should return false')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"2 (757) 622-7382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"2 (757) 622-7382\") === false, '<code>telephoneCheck(\"2 (757) 622-7382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"0 (757) 622-7382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"0 (757) 622-7382\") === false, '<code>telephoneCheck(\"0 (757) 622-7382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"-1 (757) 622-7382\")</code> should return false'",
+          "testString": "assert(telephoneCheck(\"-1 (757) 622-7382\") === false, '<code>telephoneCheck(\"-1 (757) 622-7382\")</code> should return false')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"2 757 622-7382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"2 757 622-7382\") === false, '<code>telephoneCheck(\"2 757 622-7382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"10 (757) 622-7382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"10 (757) 622-7382\") === false, '<code>telephoneCheck(\"10 (757) 622-7382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"27576227382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"27576227382\") === false, '<code>telephoneCheck(\"27576227382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"(275)76227382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"(275)76227382\") === false, '<code>telephoneCheck(\"(275)76227382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"2(757)6227382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"2(757)6227382\") === false, '<code>telephoneCheck(\"2(757)6227382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"2(757)622-7382\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"2(757)622-7382\") === false, '<code>telephoneCheck(\"2(757)622-7382\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"555)-555-5555\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"555)-555-5555\") === false, '<code>telephoneCheck(\"555)-555-5555\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"(555-555-5555\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"(555-555-5555\") === false, '<code>telephoneCheck(\"(555-555-5555\")</code> should return false.')"
+        },
+        {
+          "text": "<code>telephoneCheck(\"(555)5(55?)-5555\")</code> should return false.'",
+          "testString": "assert(telephoneCheck(\"(555)5(55?)-5555\") === false, '<code>telephoneCheck(\"(555)5(55?)-5555\")</code> should return false.')"
+        }
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "RegExp"
+      ],
+      "challengeType": 5,
+      "isRequired": true,
+      "translations": {
+        "es": {
+          "title": "Valida Números Telefónicos de los EEUU",
+          "description": [
+            "Haz que la función devuelva true (verdadero) si el texto introducido parece un número válido en los EEUU.",
+            "El usuario debe llenar el campo del formulario de la forma que desee siempre y cuando tenga el formato de un número válido en los EEUU. Los números mostrados a continuación tienen formatos válidos en los EEUU:",
+            "<blockquote>555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555</blockquote>",
+            "Para esta prueba se te presentará una cadena de texto como por ejemplo: <code>800-692-7753</code> o <code>8oo-six427676;laskdjf</code>. Tu trabajo consiste en validar o rechazar el número telefónico tomando como base cualquier combinación de los formatos anteriormente presentados. El código de área es requrido. Si el código de país es provisto, debes confirmar que este es <code>1</code>. La función debe devolver true si la cadena de texto es un número telefónico válido en los EEUU; de lo contrario, debe devolver false.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Verifica i numeri telefonici degli Stati Uniti",
+          "description": [
+            "Ritorna <code>true</code> se la stringa passata come argomento è un numero valido negli Stati Uniti.",
+            "L'utente può digitare qualunque stringa nel campo di inserimento, purchè sia un numero di telefono valido negli Stati Uniti. Qui sotto alcuni esempi di numeri di telefono validi negli Stati Uniti (fai riferimento ai test per le altre varianti):",
+            "<blockquote>555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555</blockquote>",
+            "In questo problema ti saranno presentate delle stringe come <code>800-692-7753</code> o <code>8oo-six427676;laskdjf</code>. Il tuo obiettivo è di validare o rigettare il numero di telefono basato su una qualunque combinazione dei formati specificati sopra. Il prefisso di zona è obbligatorio. Se il prefisso nazionale è presente, devi confermare che corrisponda a <code>1</code>. Ritorna <code>true</code> se la stringa è un numero di telefono valido negli Stati Uniti; altrimenti ritorna <code>false</code>.",
+            "Ricorda di usare <a href='http://forum.freecodecamp.org/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": "Valida números telefônicos dos EUA",
+          "description": [
+            "Retorna <code>true</code> se a string passada é um número telefônico válido nos EUA.",
+            "O usuário pode preencher o campo de qualquer maneira com tanto que seja um número válido nos EUA. Os seguintes exemplos são formatos válidos para números de telefone nos EUA (baseie-se nos testes abaixo para outras variações):",
+            "<blockquote>555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555</blockquote>",
+            "Para esse desafio será dado a você uma string como <code>800-692-7753</code> ou <code>8oo-six427676;laskdjf</code>. Seu trabalho é validar ou rejeitar o número de telefone dos EUA baseado nos exmplos de formatos fornecidos acima. O código de área é obrigatório. Se o código do país for fornecido, você deve confirmar que o código do país é <code>1</code>. Retorne <code>true</code> se a string é um número válido nos EUA; caso contrário retorne <code>false</code>.",
+            "Lembre-se de usar <a href='http://forum.freecodecamp.org/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."
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function telephoneCheck(str) {",
+            "  // Good luck!",
+            "  return true;",
+            "}",
+            "",
+            "telephoneCheck(\"555-555-5555\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "aa2e6f85cab2ab736c9a9b24",
+      "title": "Cash Register",
+      "description": [
+        "Design a cash register drawer function <code>checkCashRegister()</code> that accepts purchase price as the first argument (<code>price</code>), payment as the second argument (<code>cash</code>), and cash-in-drawer (<code>cid</code>) as the third argument.",
+        "<code>cid</code> is a 2D array listing available currency.",
+        "The <code>checkCashRegister()</code> function should always return an object with a <code>status</code> key and a <code>change</code> key.",
+        "Return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code> if cash-in-drawer is less than the change due, or if you cannot return the exact change.",
+        "Return <code>{status: \"CLOSED\", change: [...]}</code> with cash-in-drawer as the value for the key <code>change</code> if it is equal to the change due.",
+        "Otherwise, return <code>{status: \"OPEN\", change: [...]}</code>, with the change due in coins and bills, sorted in highest to lowest order, as the value of the <code>change</code> key.",
+        "Remember to use <a href='http://forum.freecodecamp.org/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.",
+        "<table class='table table-striped'><tr><th>Currency Unit</th><th>Amount</th></tr><tr><td>Penny</td><td>$0.01 (PENNY)</td></tr><tr><td>Nickel</td><td>$0.05 (NICKEL)</td></tr><tr><td>Dime</td><td>$0.1 (DIME)</td></tr><tr><td>Quarter</td><td>$0.25 (QUARTER)</td></tr><tr><td>Dollar</td><td>$1 (DOLLAR)</td></tr><tr><td>Five Dollars</td><td>$5 (FIVE)</td></tr><tr><td>Ten Dollars</td><td>$10 (TEN)</td></tr><tr><td>Twenty Dollars</td><td>$20 (TWENTY)</td></tr><tr><td>One-hundred Dollars</td><td>$100 (ONE HUNDRED)</td></tr></table>"
+      ],
+      "solutions": [
+        "var denom = [\n\t{ name: 'ONE HUNDRED', val: 100},\n\t{ name: 'TWENTY', val: 20},\n\t{ name: 'TEN', val: 10},\n\t{ name: 'FIVE', val: 5},\n\t{ name: 'ONE', val: 1},\n\t{ name: 'QUARTER', val: 0.25},\n\t{ name: 'DIME', val: 0.1},\n\t{ name: 'NICKEL', val: 0.05},\n\t{ name: 'PENNY', val: 0.01}\n];\n\nfunction checkCashRegister(price, cash, cid) {\n var output = {status: null, change: []};\n var change = cash - price;\n var register = cid.reduce(function(acc, curr) {\n acc.total += curr[1];\n acc[curr[0]] = curr[1];\n return acc;\n }, {total: 0});\n if(register.total === change) {\n output.status = 'CLOSED';\n output.change = cid;\n return output;\n }\n if(register.total < change) {\n output.status = 'INSUFFICIENT_FUNDS';\n return output;\n }\n var change_arr = denom.reduce(function(acc, curr) {\n var value = 0;\n while(register[curr.name] > 0 && change >= curr.val) {\n change -= curr.val;\n register[curr.name] -= curr.val;\n value += curr.val;\n change = Math.round(change * 100) / 100;\n }\n if(value > 0) {\n acc.push([ curr.name, value ]);\n }\n return acc;\n }, []);\n if(change_arr.length < 1 || change > 0) {\n output.status = 'INSUFFICIENT_FUNDS';\n return output;\n }\n output.status = 'OPEN';\n output.change = change_arr;\n return output;\n}"
+      ],
+      "tests": [
+        {
+          "text": "<code>checkCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return an object.'",
+          "testString": "assert.deepEqual(Object.prototype.toString.call(checkCashRegister(19.5, '<code>checkCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return an object.')"
+        },
+        {
+          "text": "<code>checkCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return <code>{status: \"OPEN\", change: [[\"QUARTER\", 0.5]]}</code>.'",
+          "testString": "assert.deepEqual(checkCashRegister(19.5, '<code>checkCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return <code>{status: \"OPEN\", change: [[\"QUARTER\", 0.5]]}</code>.')"
+        },
+        {
+          "text": "<code>checkCashRegister(3.26, 100, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return <code>{status: \"OPEN\", change: [[\"TWENTY\", 60], [\"TEN\", 20], [\"FIVE\", 15], [\"ONE\", 1], [\"QUARTER\", 0.5], [\"DIME\", 0.2], [\"PENNY\", 0.04]]}</code>.'",
+          "testString": "assert.deepEqual(checkCashRegister(3.26, '<code>checkCashRegister(3.26, 100, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return <code>{status: \"OPEN\", change: [[\"TWENTY\", 60], [\"TEN\", 20], [\"FIVE\", 15], [\"ONE\", 1], [\"QUARTER\", 0.5], [\"DIME\", 0.2], [\"PENNY\", 0.04]]}</code>.')"
+        },
+        {
+          "text": "<code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.01], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code>.'",
+          "testString": "assert.deepEqual(checkCashRegister(19.5, '<code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.01], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code>.')"
+        },
+        {
+          "text": "<code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.01], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 1], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code>.'",
+          "testString": "assert.deepEqual(checkCashRegister(19.5, '<code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.01], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 1], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code>.')"
+        },
+        {
+          "text": "<code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.5], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"CLOSED\", change: [[\"PENNY\", 0.5], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]]}</code>.'",
+          "testString": "assert.deepEqual(checkCashRegister(19.5, '<code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.5], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"CLOSED\", change: [[\"PENNY\", 0.5], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]]}</code>.')"
+        }
+      ],
+      "type": "bonfire",
+      "isRequired": true,
+      "MDNlinks": [
+        "Global Object",
+        "Floating Point Guide"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Cambio Exacto",
+          "description": [
+            "Crea una función que simule una caja registradora que acepte el precio de compra como el primer argumento, la cantidad recibida como el segundo argumento, y la cantidad de dinero disponible en la registradora (cid) como tercer argumento",
+            "cid es un arreglo bidimensional que lista la cantidad de dinero disponible",
+            "La función debe devolver la cadena de texto \"Insufficient Funds\" si el cid es menor al cambio requerido. También debe devolver \"Closed\" si el cid es igual al cambio",
+            "De no ser el caso, devuelve el cambio en monedas y billetes, ordenados de mayor a menor denominación.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.org/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": "Cambio Esatto",
+          "description": [
+            "Scrivi una funzione che simuli un registro di cassa chiamata <code>checkCashRegister()</code> che accetti il prezzo degli articoli come primo argomento (<code>price</code>), la somma pagata (<code>cash</code>), e la somma disponibile nel registratore di cassa (<code>cid</code>) come terzo argomento.",
+            "<code>cid</code> è un array a due dimensioni che contiene la quantità di monete e banconote disponibili.",
+            "Ritorna la stringa <code>\"Insufficient Funds\"</code> se la quantità di denaro disponibile nel registratore di cassa non è abbastanza per restituire il resto. Ritorna la stringa <code>\"Closed\"</code> se il denaro disponibile è esattamente uguale al resto.",
+            "Altrimenti, ritorna il resto in monete e banconote, ordinate da quelle con valore maggiore a quelle con valore minore.",
+            "Ricorda di usare <a href='http://forum.freecodecamp.org/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": "Troco Exato",
+          "description": [
+            "Crie uma função que simula uma caixa registradora chamada <code>checkCashRegister()</code> e aceita o valor da compra como primeiro argumento (<code>price</code>), pagamento como segundo argumento (<code>cash</code>), e o dinheiro na caixa registradora (<code>cid</code>) como terceiro argumento.",
+            "<code>cid</code> é uma matriz bidimensional que lista o dinheiro disponível.",
+            "Retorne a string <code>\"Insufficient Funds\"</code> se o dinheiro na caixa registradora é menor do que o troco ou se não é possível retornar o troco exato. Retorne a string <code>\"Closed\"</code> se o dinheiro na caixa é igual ao troco.",
+            "Case cotrário, retorne o troco em moedas e notas, ordenado do maior para menor.",
+            "Lembre-se de usar <a href='http://forum.freecodecamp.org/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.",
+            "<table class='table table-striped'><tr><th>Currency Unit</th><th>Amount</th></tr><tr><td>Penny</td><td>$0.01 (PENNY)</td></tr><tr><td>Nickel</td><td>$0.05 (NICKEL)</td></tr><tr><td>Dime</td><td>$0.1 (DIME)</td></tr><tr><td>Quarter</td><td>$0.25 (QUARTER)</td></tr><tr><td>Dollar</td><td>$1 (DOLLAR)</td></tr><tr><td>Five Dollars</td><td>$5 (FIVE)</td></tr><tr><td>Ten Dollars</td><td>$10 (TEN)</td></tr><tr><td>Twenty Dollars</td><td>$20 (TWENTY)</td></tr><tr><td>One-hundred Dollars</td><td>$100 (ONE HUNDRED)</td></tr></table>"
+          ]
+        }
+      },
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function checkCashRegister(price, cash, cid) {",
+            "  var change;",
+            "  // Here is your change, ma'am.",
+            "  return change;",
+            "}",
+            "",
+            "// Example cash-in-drawer array:",
+            "// [[\"PENNY\", 1.01],",
+            "// [\"NICKEL\", 2.05],",
+            "// [\"DIME\", 3.1],",
+            "// [\"QUARTER\", 4.25],",
+            "// [\"ONE\", 90],",
+            "// [\"FIVE\", 55],",
+            "// [\"TEN\", 20],",
+            "// [\"TWENTY\", 60],",
+            "// [\"ONE HUNDRED\", 100]]",
+            "",
+            "checkCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]]);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
new file mode 100644
index 0000000000..a1e48eb997
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
@@ -0,0 +1,1482 @@
+{
+  "name": "Object Oriented Programming",
+  "order": 7,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>dog</code> should be an <code>object</code>.'",
+          "testString": "assert(typeof(dog) === 'object', '<code>dog</code> should be an <code>object</code>.')"
+        },
+        {
+          "text": "<code>dog</code> should have a <code>name</code> property set to a <code>string</code>.'",
+          "testString": "assert(typeof(dog.name) === 'string', '<code>dog</code> should have a <code>name</code> property set to a <code>string</code>.')"
+        },
+        {
+          "text": "<code>dog</code> should have a <code>numLegs</code> property set to a <code>number</code>.'",
+          "testString": "assert(typeof(dog.numLegs) === 'number', '<code>dog</code> should have a <code>numLegs</code> property set to a <code>number</code>.')"
+        }
+      ],
+      "solutions": [
+        "let dog = {\n  name: '',\n  numLegs: 4\n};"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let dog = {",
+            "  ",
+            "};"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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\".",
+        "<hr>",
+        "Print both <code>properties</code> of the <code>dog</code> object below to your console."
+      ],
+      "tests": [
+        {
+          "text": "Your should use <code>console.log</code> to print the value for the <code>name</code> property of the <code>dog</code> object.'",
+          "testString": "assert(/console.log\\(.*dog\\.name.*\\)/g.test(code), 'Your should use <code>console.log</code> to print the value for the <code>name</code> property of the <code>dog</code> object.')"
+        },
+        {
+          "text": "Your should use <code>console.log</code> to print the value for the <code>numLegs</code> property of the <code>dog</code> object.'",
+          "testString": "assert(/console.log\\(.*dog\\.numLegs.*\\)/g.test(code), 'Your should use <code>console.log</code> to print the value for the <code>numLegs</code> property of the <code>dog</code> object.')"
+        }
+      ],
+      "solutions": [
+        "let dog = {\n  name: \"Spot\",\n  numLegs: 4\n};\nconsole.log(dog.name);\nconsole.log(dog.numLegs);"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let dog = {",
+            "  name: \"Spot\",",
+            "  numLegs: 4",
+            "};",
+            "// Add your code below this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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.\""
+      ],
+      "tests": [
+        {
+          "text": "<code>dog.sayLegs()</code> should be a function.'",
+          "testString": "assert(typeof(dog.sayLegs) === 'function', '<code>dog.sayLegs()</code> should be a function.')"
+        },
+        {
+          "text": "<code>dog.sayLegs()</code> should return the given string - note that punctuation and spacing matter.'",
+          "testString": "assert(dog.sayLegs() === 'This dog has 4 legs.', '<code>dog.sayLegs()</code> should return the given string - note that punctuation and spacing matter.')"
+        }
+      ],
+      "solutions": [
+        "let dog = {\n  name: \"Spot\",\n  numLegs: 4,\n  sayLegs () {\n    return 'This dog has ' + this.numLegs + ' legs.';\n  }\n};\n\ndog.sayLegs();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let dog = {",
+            "  name: \"Spot\",",
+            "  numLegs: 4,",
+            "  ",
+            "};",
+            "",
+            "dog.sayLegs();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dad367417b2b2512b76",
+      "title": "Make Code More Reusable with the this Keyword",
+      "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.",
+        "<hr>",
+        "Modify the <code>dog.sayLegs</code> method to remove any references to <code>dog</code>. Use the <code>duck</code> example for guidance."
+      ],
+      "tests": [
+        {
+          "text": "<code>dog.sayLegs()</code> should return the given string.'",
+          "testString": "assert(dog.sayLegs() === 'This dog has 4 legs.', '<code>dog.sayLegs()</code> should return the given string.')"
+        },
+        {
+          "text": "Your code should use the <code>this</code> keyword to access the <code>numLegs</code> property of <code>dog</code>.'",
+          "testString": "assert(code.match(/this\\.numLegs/g), 'Your code should use the <code>this</code> keyword to access the <code>numLegs</code> property of <code>dog</code>.')"
+        }
+      ],
+      "solutions": [
+        "let dog = {\n  name: \"Spot\",\n  numLegs: 4,\n  sayLegs () {\n    return 'This dog has ' + this.numLegs + ' legs.';\n  }\n};\n\ndog.sayLegs();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "",
+            "let dog = {",
+            "  name: \"Spot\",",
+            "  numLegs: 4,",
+            "  sayLegs: function() {return \"This dog has \" + dog.numLegs + \" legs.\";}",
+            "};",
+            "",
+            "dog.sayLegs();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>Dog</code> should have a <code>name</code> property set to a string.'",
+          "testString": "assert(typeof (new Dog()).name === 'string', '<code>Dog</code> should have a <code>name</code> property set to a string.')"
+        },
+        {
+          "text": "<code>Dog</code> should have a <code>color</code> property set to a string.'",
+          "testString": "assert(typeof (new Dog()).color === 'string', '<code>Dog</code> should have a <code>color</code> property set to a string.')"
+        },
+        {
+          "text": "<code>Dog</code> should have a <code>numLegs</code> property set to a number.'",
+          "testString": "assert(typeof (new Dog()).numLegs === 'number', '<code>Dog</code> should have a <code>numLegs</code> property set to a number.')"
+        }
+      ],
+      "solutions": [
+        "function Dog (name, color, numLegs) {\n  this.name = 'name';\n  this.color = 'color';\n  this.numLegs = 4;\n}"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "<code>hound</code> should be created using the <code>Dog</code> constructor.'",
+          "testString": "assert(hound instanceof Dog, '<code>hound</code> should be created using the <code>Dog</code> constructor.')"
+        },
+        {
+          "text": "Your code should use the <code>new</code> operator to create an <code>instance</code> of <code>Dog</code>.'",
+          "testString": "assert(code.match(/new/g), 'Your code should use the <code>new</code> operator to create an <code>instance</code> of <code>Dog</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Dog() {\n  this.name = \"Rupert\";\n  this.color = \"brown\";\n  this.numLegs = 4;\n}\nconst hound = new Dog();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Dog() {",
+            "  this.name = \"Rupert\";",
+            "  this.color = \"brown\";",
+            "  this.numLegs = 4;",
+            "}",
+            "// Add your code below this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>Dog</code> should receive an argument for <code>name</code>.'",
+          "testString": "assert((new Dog('Clifford')).name === 'Clifford', '<code>Dog</code> should receive an argument for <code>name</code>.')"
+        },
+        {
+          "text": "<code>Dog</code> should receive an argument for <code>color</code>.'",
+          "testString": "assert((new Dog('Clifford', '<code>Dog</code> should receive an argument for <code>color</code>.')"
+        },
+        {
+          "text": "<code>Dog</code> should have property <code>numLegs</code> set to 4.'",
+          "testString": "assert((new Dog('Clifford')).numLegs === 4, '<code>Dog</code> should have property <code>numLegs</code> set to 4.')"
+        },
+        {
+          "text": "<code>terrier</code> should be created using the <code>Dog</code> constructor.'",
+          "testString": "assert(terrier instanceof Dog, '<code>terrier</code> should be created using the <code>Dog</code> constructor.')"
+        }
+      ],
+      "solutions": [
+        "function Dog (name, color) {\n  this.numLegs = 4;\n  this.name = name;\n  this.color = color;\n}\n\nconst terrier = new Dog();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Dog() {",
+            "  ",
+            "}",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "<code>myHouse</code> should have a <code>numBedrooms</code> attribute set to a number.'",
+          "testString": "assert(typeof myHouse.numBedrooms === 'number', '<code>myHouse</code> should have a <code>numBedrooms</code> attribute set to a number.')"
+        },
+        {
+          "text": "Be sure to verify that <code>myHouse</code> is an instance of <code>House</code> using the <code>instanceof</code> operator.'",
+          "testString": "assert(/myHouse\\s*instanceof\\s*House/.test(code), 'Be sure to verify that <code>myHouse</code> is an instance of <code>House</code> using the <code>instanceof</code> operator.')"
+        }
+      ],
+      "solutions": [
+        "function House(numBedrooms) {\n  this.numBedrooms = numBedrooms;\n}\nconst myHouse = new House(4);\nconsole.log(myHouse instanceof House);"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "/* jshint expr: true */",
+            "",
+            "function House(numBedrooms) {",
+            "  this.numBedrooms = numBedrooms;",
+            "}",
+            "",
+            "// Add your code below this line",
+            "",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Add the <code>own</code> properties of <code>canary</code> to the array <code>ownProps</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>ownProps</code> should include the values <code>\"numLegs\"</code> and <code>\"name\"</code>.'",
+          "testString": "assert(ownProps.indexOf('name') !== -1 && ownProps.indexOf('numLegs') !== -1, '<code>ownProps</code> should include the values <code>\"numLegs\"</code> and <code>\"name\"</code>.')"
+        },
+        {
+          "text": "Solve this challenge without using the built in method <code>Object.keys()</code>.'",
+          "testString": "assert(!/\\Object.keys/.test(code), 'Solve this challenge without using the built in method <code>Object.keys()</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Bird(name) {\n  this.name = name;\n  this.numLegs = 2;\n}\n\nlet canary = new Bird(\"Tweety\");\nfunction getOwnProps (obj) {\n  const props = [];\n  \n  for (let prop in obj) {\n    if (obj.hasOwnProperty(prop)) {\n      props.push(prop);\n    }\n  }\n  \n  return props;\n}\n\nconst ownProps = getOwnProps(canary);"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Bird(name) {",
+            "  this.name = name;",
+            "  this.numLegs = 2;",
+            "}",
+            "",
+            "let canary = new Bird(\"Tweety\");",
+            "let ownProps = [];",
+            "// Add your code below this line",
+            "",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Add a <code>numLegs</code> property to the <code>prototype</code> of <code>Dog</code>"
+      ],
+      "tests": [
+        {
+          "text": "<code>beagle</code> should have a <code>numLegs</code> property.'",
+          "testString": "assert(beagle.numLegs !== undefined, '<code>beagle</code> should have a <code>numLegs</code> property.')"
+        },
+        {
+          "text": "<code>beagle.numLegs</code> should be a number.'",
+          "testString": "assert(typeof(beagle.numLegs) === 'number' , '<code>beagle.numLegs</code> should be a number.')"
+        },
+        {
+          "text": "<code>numLegs</code> should be a <code>prototype</code> property not an <code>own</code> property.'",
+          "testString": "assert(beagle.hasOwnProperty('numLegs') === false, '<code>numLegs</code> should be a <code>prototype</code> property not an <code>own</code> property.')"
+        }
+      ],
+      "solutions": [
+        "function Dog (name) {\n  this.name = name;\n}\nDog.prototype.numLegs = 4;\nlet beagle = new Dog(\"Snoopy\");"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Dog(name) {",
+            "  this.name = name;",
+            "}",
+            "",
+            "",
+            "",
+            "// Add your code above this line",
+            "let beagle = new Dog(\"Snoopy\");"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "The <code>ownProps</code> array should include <code>\"name\"</code>.'",
+          "testString": "assert(ownProps.indexOf('name') !== -1, 'The <code>ownProps</code> array should include <code>\"name\"</code>.')"
+        },
+        {
+          "text": "The <code>prototypeProps</code> array should include <code>\"numLegs\"</code>.'",
+          "testString": "assert(prototypeProps.indexOf('numLegs') !== -1, 'The <code>prototypeProps</code> array should include <code>\"numLegs\"</code>.')"
+        },
+        {
+          "text": "Solve this challenge without using the built in method <code>Object.keys()</code>.'",
+          "testString": "assert(!/\\Object.keys/.test(code), 'Solve this challenge without using the built in method <code>Object.keys()</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Dog(name) {\n  this.name = name;\n}\n\nDog.prototype.numLegs = 4;\n\nlet beagle = new Dog(\"Snoopy\");\n\nlet ownProps = [];\nlet prototypeProps = [];\nfor (let prop in beagle) {\n  if (beagle.hasOwnProperty(prop)) {\n    ownProps.push(prop);\n  } else {\n    prototypeProps.push(prop);\n  }\n}"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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 ",
+            "",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 a reference to 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.",
+        "<hr>",
+        "Write a <code>joinDogFraternity</code> function that takes a <code>candidate</code> parameter and, using the <code>constructor</code> property, return <code>true</code> if the candidate is a <code>Dog</code>, otherwise return <code>false</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>joinDogFraternity</code> should be defined as a function.'",
+          "testString": "assert(typeof(joinDogFraternity) === 'function', '<code>joinDogFraternity</code> should be defined as a function.')"
+        },
+        {
+          "text": "<code>joinDogFraternity</code> should return true if<code>candidate</code> is an instance of <code>Dog</code>.'",
+          "testString": "assert(joinDogFraternity(new Dog(\"\")) === true, '<code>joinDogFraternity</code> should return true if<code>candidate</code> is an instance of <code>Dog</code>.')"
+        },
+        {
+          "text": "<code>joinDogFraternity</code> should use the <code>constructor</code> property.'",
+          "testString": "assert(/\\.constructor/.test(code) && !/instanceof/.test(code), '<code>joinDogFraternity</code> should use the <code>constructor</code> property.')"
+        }
+      ],
+      "solutions": [
+        "function Dog(name) {\n  this.name = name;\n}\nfunction joinDogFraternity(candidate) {\n  return candidate.constructor === Dog;\n}"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Dog(name) {",
+            "  this.name = name;",
+            "}",
+            "",
+            "// Add your code below this line",
+            "function joinDogFraternity(candidate) {",
+            "  ",
+            "}",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Add the property <code>numLegs</code> and the two methods <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."
+      ],
+      "tests": [
+        {
+          "text": "<code>Dog.prototype</code> should be set to a new object.'",
+          "testString": "assert((/Dog\\.prototype\\s*?=\\s*?{/).test(code), '<code>Dog.prototype</code> should be set to a new object.')"
+        },
+        {
+          "text": "<code>Dog.prototype</code> should have the property <code>numLegs</code>.'",
+          "testString": "assert(Dog.prototype.numLegs !== undefined, '<code>Dog.prototype</code> should have the property <code>numLegs</code>.')"
+        },
+        {
+          "text": "<code>Dog.prototype</code> should have the method <code>eat()</code>.",
+          "testString": "assert(typeof Dog.prototype.eat === 'function', '<code>Dog.prototype</code> should have the method <code>eat()</code>.'); "
+        },
+        {
+          "text": "<code>Dog.prototype</code> should have the method <code>describe()</code>.",
+          "testString": "assert(typeof Dog.prototype.describe === 'function', '<code>Dog.prototype</code> should have the method <code>describe()</code>.'); "
+        }
+      ],
+      "solutions": [
+        "function Dog(name) {\n  this.name = name; \n}\nDog.prototype = {\nnumLegs: 4,\n  eat () {\n    console.log('nom nom nom');\n  },\n  describe () {\n    console.log('My name is ' + this.name);\n  }\n};"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Dog(name) {",
+            "  this.name = name; ",
+            "}",
+            "",
+            "Dog.prototype = {",
+            "  // Add your code below this line",
+            "  ",
+            "};"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 <code>constructor</code> 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 <code>constructor</code> 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>",
+        "<hr>",
+        "Define the <code>constructor</code> property on the <code>Dog</code> <code>prototype</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>Dog.prototype</code> should set the <code>constructor</code> property.'",
+          "testString": "assert(Dog.prototype.constructor === Dog, '<code>Dog.prototype</code> should set the <code>constructor</code> property.')"
+        }
+      ],
+      "solutions": [
+        "function Dog(name) {\n  this.name = name; \n}\nDog.prototype = {\n  constructor: Dog,\n  numLegs: 2, \n  eat: function() {\n    console.log(\"nom nom nom\"); \n  }, \n  describe: function() {\n    console.log(\"My name is \" + this.name); \n  }\n};"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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); ",
+            "  }",
+            "};"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Use <code>isPrototypeOf</code> to check the <code>prototype</code> of <code>beagle</code>."
+      ],
+      "tests": [
+        {
+          "text": "Show that <code>Dog.prototype</code> is the <code>prototype</code> of <code>beagle</code>'",
+          "testString": "assert(/Dog\\.prototype\\.isPrototypeOf\\(beagle\\)/.test(code), 'Show that <code>Dog.prototype</code> is the <code>prototype</code> of <code>beagle</code>')"
+        }
+      ],
+      "solutions": [
+        "function Dog(name) {\n  this.name = name;\n}\nlet beagle = new Dog(\"Snoopy\");\nDog.prototype.isPrototypeOf(beagle);"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Dog(name) {",
+            "  this.name = name;",
+            "}",
+            "",
+            "let beagle = new Dog(\"Snoopy\");",
+            "",
+            "// Add your code below this line",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Modify the code to show the correct prototype chain."
+      ],
+      "tests": [
+        {
+          "text": "Your code should show that <code>Object.prototype</code> is the prototype of <code>Dog.prototype</code>\"",
+          "testString": "assert(/Object\\.prototype\\.isPrototypeOf/.test(code), 'Your code should show that <code>Object.prototype</code> is the prototype of <code>Dog.prototype</code>\")"
+        }
+      ],
+      "solutions": [
+        "function Dog(name) {\n  this.name = name;\n}\nlet beagle = new Dog(\"Snoopy\");\nDog.prototype.isPrototypeOf(beagle);\nObject.prototype.isPrototypeOf(Dog.prototype);"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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);",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "<code>Animal.prototype</code> should have the <code>eat</code> property.'",
+          "testString": "assert(Animal.prototype.hasOwnProperty('eat'), '<code>Animal.prototype</code> should have the <code>eat</code> property.')"
+        },
+        {
+          "text": "<code>Bear.prototype</code> should not have the <code>eat</code> property.'",
+          "testString": "assert(!(Bear.prototype.hasOwnProperty('eat')), '<code>Bear.prototype</code> should not have the <code>eat</code> property.')"
+        },
+        {
+          "text": "<code>Cat.prototype</code> should not have the <code>eat</code> property.'",
+          "testString": "assert(!(Cat.prototype.hasOwnProperty('eat')), '<code>Cat.prototype</code> should not have the <code>eat</code> property.')"
+        }
+      ],
+      "solutions": [
+        "function Cat(name) {\n  this.name = name; \n}\n\nCat.prototype = {\n  constructor: Cat\n};\n\nfunction Bear(name) {\n  this.name = name; \n}\n\nBear.prototype = {\n  constructor: Bear\n};\n\nfunction Animal() { }\n\nAnimal.prototype = {\n  constructor: Animal,\n  eat: function() {\n    console.log(\"nom nom nom\");\n  }\n};"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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,",
+            "  ",
+            "};"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Use <code>Object.create</code> to make two instances of <code>Animal</code> named <code>duck</code> and <code>beagle</code>."
+      ],
+      "tests": [
+        {
+          "text": "The <code>duck</code> variable should be defined.'",
+          "testString": "assert(typeof duck !== \"undefined\", 'The <code>duck</code> variable should be defined.')"
+        },
+        {
+          "text": "The <code>beagle</code> variable should be defined.'",
+          "testString": "assert(typeof beagle !== \"undefined\", 'The <code>beagle</code> variable should be defined.')"
+        },
+        {
+          "text": "<code>duck</code> should have a <code>prototype</code> of <code>Animal</code>.'",
+          "testString": "assert(duck instanceof Animal, '<code>duck</code> should have a <code>prototype</code> of <code>Animal</code>.')"
+        },
+        {
+          "text": "<code>beagle</code> should have a <code>prototype</code> of <code>Animal</code>.'",
+          "testString": "assert(beagle instanceof Animal, '<code>beagle</code> should have a <code>prototype</code> of <code>Animal</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Animal() { }\n\nAnimal.prototype = {\n  constructor: Animal, \n  eat: function() {\n    console.log(\"nom nom nom\");\n  }\n};\nlet duck = Object.create(Animal.prototype);\nlet beagle = Object.create(Animal.prototype);\n\nduck.eat();\nbeagle.eat();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Animal() { }",
+            "",
+            "Animal.prototype = {",
+            "  constructor: Animal, ",
+            "  eat: function() {",
+            "    console.log(\"nom nom nom\");",
+            "  }",
+            "};",
+            "",
+            "// Add your code below this line",
+            "",
+            "let duck; // Change this line",
+            "let beagle; // Change this line",
+            "",
+            "duck.eat(); // Should print \"nom nom nom\"",
+            "beagle.eat(); // Should print \"nom nom nom\" "
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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)&mdash;in this case, <code>Bird</code>&mdash;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</code>'s properties, including the <code>eat</code> method.",
+        "<hr>",
+        "Modify the code so that instances of <code>Dog</code> inherit from <code>Animal</code>."
+      ],
+      "tests": [
+        {
+          "text": "<code>Dog.prototype</code> should be an instance of <code>Animal</code>.'",
+          "testString": "assert(Animal.prototype.isPrototypeOf(Dog.prototype), '<code>Dog.prototype</code> should be an instance of <code>Animal</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Animal() { }\n\nAnimal.prototype = {\n  constructor: Animal,\n  eat: function() {\n    console.log(\"nom nom nom\");\n  }\n};\n\nfunction Dog() { }\nDog.prototype = Object.create(Animal.prototype);\n\nlet beagle = new Dog();\nbeagle.eat();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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\""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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</code>'s 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>",
+        "<hr>",
+        "Fix the code so <code>duck.constructor</code> and <code>beagle.constructor</code> return their respective constructors."
+      ],
+      "tests": [
+        {
+          "text": "<code>Bird.prototype</code> should be an instance of <code>Animal</code>.'",
+          "testString": "assert(Animal.prototype.isPrototypeOf(Bird.prototype), '<code>Bird.prototype</code> should be an instance of <code>Animal</code>.')"
+        },
+        {
+          "text": "<code>duck.constructor</code> should return <code>Bird</code>.'",
+          "testString": "assert(duck.constructor === Bird, '<code>duck.constructor</code> should return <code>Bird</code>.')"
+        },
+        {
+          "text": "<code>Dog.prototype</code> should be an instance of <code>Animal</code>.'",
+          "testString": "assert(Animal.prototype.isPrototypeOf(Dog.prototype), '<code>Dog.prototype</code> should be an instance of <code>Animal</code>.')"
+        },
+        {
+          "text": "<code>beagle.constructor</code> should return <code>Dog</code>.'",
+          "testString": "assert(beagle.constructor === Dog, '<code>beagle.constructor</code> should return <code>Dog</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Animal() { }\nfunction Bird() { }\nfunction Dog() { }\nBird.prototype = Object.create(Animal.prototype);\nDog.prototype = Object.create(Animal.prototype);\nDog.prototype.constructor = Dog;\nBird.prototype.constructor = Bird;\nlet duck = new Bird();\nlet beagle = new Dog();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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();"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>Animal</code> should not respond to the <code>bark()</code> method.'",
+          "testString": "assert(typeof Animal.prototype.bark == \"undefined\", '<code>Animal</code> should not respond to the <code>bark()</code> method.')"
+        },
+        {
+          "text": "<code>Dog</code> should inherit the <code>eat()</code> method from <code>Animal</code>.'",
+          "testString": "assert(typeof Dog.prototype.eat == \"function\", '<code>Dog</code> should inherit the <code>eat()</code> method from <code>Animal</code>.')"
+        },
+        {
+          "text": "<code>Dog</code> should have the <code>bark()</code> method as an <code>own</code> property.'",
+          "testString": "assert(Dog.prototype.hasOwnProperty('bark'), '<code>Dog</code> should have the <code>bark()</code> method as an <code>own</code> property.')"
+        },
+        {
+          "text": "<code>beagle</code> should be an <code>instanceof</code> <code>Animal</code>.'",
+          "testString": "assert(beagle instanceof Animal, '<code>beagle</code> should be an <code>instanceof</code> <code>Animal</code>.')"
+        },
+        {
+          "text": "The constructor for <code>beagle</code> should be set to <code>Dog</code>.'",
+          "testString": "assert(beagle.constructor === Dog, 'The constructor for <code>beagle</code> should be set to <code>Dog</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Animal() { }\nAnimal.prototype.eat = function() { console.log(\"nom nom nom\"); };\n\nfunction Dog() { }\nDog.prototype = Object.create(Animal.prototype);\nDog.prototype.constructor = Dog;\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\nlet beagle = new Dog();\n\nbeagle.eat();\nbeagle.bark();"
+      ],
+      "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",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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!\""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Override the <code>fly()</code> method for <code>Penguin</code> so that it returns \"Alas, this is a flightless bird.\""
+      ],
+      "tests": [
+        {
+          "text": "<code>penguin.fly()</code> should return the string \"Alas, this is a flightless bird.\"'",
+          "testString": "assert(penguin.fly() === \"Alas, '<code>penguin.fly()</code> should return the string \"Alas, this is a flightless bird.\"')"
+        },
+        {
+          "text": "The <code>bird.fly()</code> method should return \"I am flying!\"'",
+          "testString": "assert((new Bird()).fly() === \"I am flying!\", 'The <code>bird.fly()</code> method should return \"I am flying!\"')"
+        }
+      ],
+      "solutions": [
+        "function Bird() { }\n\nBird.prototype.fly = function() { return \"I am flying!\"; };\n\nfunction Penguin() { }\nPenguin.prototype = Object.create(Bird.prototype);\nPenguin.prototype.constructor = Penguin;\nPenguin.prototype.fly = () => 'Alas, this is a flightless bird.';\nlet penguin = new Penguin();\nconsole.log(penguin.fly());"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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());"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your code should declare a <code>glideMixin</code> variable that is a function.'",
+          "testString": "assert(typeof glideMixin === \"function\", 'Your code should declare a <code>glideMixin</code> variable that is a function.')"
+        },
+        {
+          "text": "Your code should use the <code>glideMixin</code> on the <code>bird</code> object to give it the <code>glide</code> method.'",
+          "testString": "assert(typeof bird.glide === \"function\", 'Your code should use the <code>glideMixin</code> on the <code>bird</code> object to give it the <code>glide</code> method.')"
+        },
+        {
+          "text": "Your code should use the <code>glideMixin</code> on the <code>boat</code> object to give it the <code>glide</code> method.'",
+          "testString": "assert(typeof boat.glide === \"function\", 'Your code should use the <code>glideMixin</code> on the <code>boat</code> object to give it the <code>glide</code> method.')"
+        }
+      ],
+      "solutions": [
+        "let bird = {\n  name: \"Donald\",\n  numLegs: 2\n};\n\nlet boat = {\n  name: \"Warrior\",\n  type: \"race-boat\"\n};\nfunction glideMixin (obj) {\n  obj.glide = () => 'Gliding!';\n}\n\nglideMixin(bird);\nglideMixin(boat);"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let bird = {",
+            "  name: \"Donald\",",
+            "  numLegs: 2",
+            "};",
+            "",
+            "let boat = {",
+            "  name: \"Warrior\",",
+            "  type: \"race-boat\"",
+            "};",
+            "",
+            "// Add your code below this line",
+            "",
+            "",
+            "",
+            "",
+            "",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>'s 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>.",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "The <code>weight</code> property should be a private variable.'",
+          "testString": "assert(!code.match(/this\\.weight/g), 'The <code>weight</code> property should be a private variable.')"
+        },
+        {
+          "text": "Your code should create a method in <code>Bird</code> called <code>getWeight</code> that returns the <code>weight</code>.'",
+          "testString": "assert((new Bird()).getWeight() === 15, 'Your code should create a method in <code>Bird</code> called <code>getWeight</code> that returns the <code>weight</code>.')"
+        }
+      ],
+      "solutions": [
+        "function Bird() {\n  let weight = 15;\n  \n  this.getWeight = () => weight;\n}"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function Bird() {",
+            "  this.weight = 15;",
+            "  ",
+            "  ",
+            "}",
+            ""
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>.",
+        "<hr>",
+        "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>)."
+      ],
+      "tests": [
+        {
+          "text": "The function should be anonymous.'",
+          "testString": "assert(/\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?{/.test(code), 'The function should be anonymous.')"
+        },
+        {
+          "text": "Your function should have parentheses at the end of the expression to call it immediately.'",
+          "testString": "assert(/}\\s*?\\)\\s*?\\(\\s*?\\)/.test(code), 'Your function should have parentheses at the end of the expression to call it immediately.')"
+        }
+      ],
+      "solutions": [
+        "(function () {\n  console.log(\"A cozy nest is ready\");\n})();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "function makeNest() {",
+            "  console.log(\"A cozy nest is ready\");",
+            "}",
+            "",
+            "makeNest(); "
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 an example using it:",
+        "<blockquote>motionModule.glideMixin(duck);<br>duck.glide();</blockquote>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>funModule</code> should be defined and return an object.'",
+          "testString": "assert(typeof funModule === \"object\", '<code>funModule</code> should be defined and return an object.')"
+        },
+        {
+          "text": "<code>funModule.isCuteMixin</code> should access a function.'",
+          "testString": "assert(typeof funModule.isCuteMixin === \"function\", '<code>funModule.isCuteMixin</code> should access a function.')"
+        },
+        {
+          "text": "<code>funModule.singMixin</code> should access a function.'",
+          "testString": "assert(typeof funModule.singMixin === \"function\", '<code>funModule.singMixin</code> should access a function.')"
+        }
+      ],
+      "solutions": [
+        "const funModule = (function () {\n  return {\n    isCuteMixin: obj => {\n      obj.isCute = () => true;\n    },\n    singMixin: obj => {\n      obj.sing = () => console.log(\"Singing to an awesome tune\");\n    }\n  };\n})();"
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let isCuteMixin = function(obj) {",
+            "  obj.isCute = function() {",
+            "    return true;",
+            "  };",
+            "};",
+            "let singMixin = function(obj) {",
+            "  obj.sing = function() {",
+            "    console.log(\"Singing to an awesome tune\");",
+            "  };",
+            "};"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/object-oriented-programming.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json
new file mode 100644
index 0000000000..545f1ff3d8
--- /dev/null
+++ b/packages/learn/seed/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json
@@ -0,0 +1,1756 @@
+{
+  "name": "Regular Expressions",
+  "order": 3,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "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>",
+        "<hr>",
+        "Apply the regex <code>myRegex</code> on the string <code>myString</code> using the <code>.test()</code> method."
+      ],
+      "tests": [
+        {
+          "text": "You should use <code>.test()</code> to test the regex.'",
+          "testString": "assert(code.match(/myRegex.test\\(\\s*myString\\s*\\)/), 'You should use <code>.test()</code> to test the regex.')"
+        },
+        {
+          "text": "Your result should return <code>true</code>.'",
+          "testString": "assert(result === true, 'Your result should return <code>true</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let myString = \"Hello, World!\";",
+            "let myRegex = /Hello/;",
+            "let result = myRegex; // Change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db3367417b2b2512b8f",
+      "title": "Match Literal Strings",
+      "description": [
+        "In the last challenge, you searched for the word <code>\"Hello\"</code> using the regular expression <code>/Hello/</code>. That regex searched for a literal match of the string <code>\"Hello\"</code>. Here's another example searching for a literal match of the string <code>\"Kevin\"</code>:",
+        "<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>\"Kevin\"</code> will not match. For example, the regex <code>/Kevin/</code> will not match <code>\"kevin\"</code> or <code>\"KEVIN\"</code>.",
+        "<blockquote>let wrongRegex = /kevin/;<br>wrongRegex.test(testStr);<br>// Returns false</blockquote>",
+        "A future challenge will show how to match those other forms as well.",
+        "<hr>",
+        "Complete the regex <code>waldoRegex</code> to find <code>\"Waldo\"</code> in the string <code>waldoIsHiding</code> with a literal match."
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>waldoRegex</code> should find <code>\"Waldo\"</code>'",
+          "testString": "assert(waldoRegex.test(waldoIsHiding), 'Your regex <code>waldoRegex</code> should find <code>\"Waldo\"</code>')"
+        },
+        {
+          "text": "Your regex <code>waldoRegex</code> should not search for anything else.'",
+          "testString": "assert(!waldoRegex.test('Somewhere is hiding in this text.'), 'Your regex <code>waldoRegex</code> should not search for anything else.')"
+        },
+        {
+          "text": "You should perform a literal string match with your regex.'",
+          "testString": "assert(!/\\/.*\\/i/.test(code), 'You should perform a literal string match with your regex.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let waldoIsHiding = \"Somewhere Waldo is hiding in this text.\";",
+            "let waldoRegex = /search/; // Change this line",
+            "let result = waldoRegex.test(waldoIsHiding);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>.",
+        "<hr>",
+        "Complete the regex <code>petRegex</code> to match the pets <code>\"dog\"</code>, <code>\"cat\"</code>, <code>\"bird\"</code>, or <code>\"fish\"</code>."
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"John has a pet dog.\"</code>'",
+          "testString": "assert(petRegex.test('John has a pet dog.'), 'Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"John has a pet dog.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Emma has a pet rock.\"</code>'",
+          "testString": "assert(!petRegex.test('Emma has a pet rock.'), 'Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Emma has a pet rock.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Emma has a pet bird.\"</code>'",
+          "testString": "assert(petRegex.test('Emma has a pet bird.'), 'Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Emma has a pet bird.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Liz has a pet cat.\"</code>'",
+          "testString": "assert(petRegex.test('Liz has a pet cat.'), 'Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Liz has a pet cat.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Kara has a pet dolphin.\"</code>'",
+          "testString": "assert(!petRegex.test('Kara has a pet dolphin.'), 'Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Kara has a pet dolphin.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Alice has a pet fish.\"</code>'",
+          "testString": "assert(petRegex.test('Alice has a pet fish.'), 'Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Alice has a pet fish.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Jimmy has a pet computer.\"</code>'",
+          "testString": "assert(!petRegex.test('Jimmy has a pet computer.'), 'Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Jimmy has a pet computer.\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let petString = \"James has a pet cat.\";",
+            "let petRegex = /change/; // Change this line",
+            "let result = petRegex.test(petString);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 <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>.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should match <code>freeCodeCamp</code>'",
+          "testString": "assert(fccRegex.test('freeCodeCamp'), 'Your regex should match <code>freeCodeCamp</code>')"
+        },
+        {
+          "text": "Your regex should match <code>FreeCodeCamp</code>'",
+          "testString": "assert(fccRegex.test('FreeCodeCamp'), 'Your regex should match <code>FreeCodeCamp</code>')"
+        },
+        {
+          "text": "Your regex should match <code>FreecodeCamp</code>'",
+          "testString": "assert(fccRegex.test('FreecodeCamp'), 'Your regex should match <code>FreecodeCamp</code>')"
+        },
+        {
+          "text": "Your regex should match <code>FreeCodecamp</code>'",
+          "testString": "assert(fccRegex.test('FreeCodecamp'), 'Your regex should match <code>FreeCodecamp</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>Free Code Camp</code>'",
+          "testString": "assert(!fccRegex.test('Free Code Camp'), 'Your regex should not match <code>Free Code Camp</code>')"
+        },
+        {
+          "text": "Your regex should match <code>FreeCOdeCamp</code>'",
+          "testString": "assert(fccRegex.test('FreeCOdeCamp'), 'Your regex should match <code>FreeCOdeCamp</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>FCC</code>'",
+          "testString": "assert(!fccRegex.test('FCC'), 'Your regex should not match <code>FCC</code>')"
+        },
+        {
+          "text": "Your regex should match <code>FrEeCoDeCamp</code>'",
+          "testString": "assert(fccRegex.test('FrEeCoDeCamp'), 'Your regex should match <code>FrEeCoDeCamp</code>')"
+        },
+        {
+          "text": "Your regex should match <code>FrEeCodECamp</code>'",
+          "testString": "assert(fccRegex.test('FrEeCodECamp'), 'Your regex should match <code>FrEeCodECamp</code>')"
+        },
+        {
+          "text": "Your regex should match <code>FReeCodeCAmp</code>'",
+          "testString": "assert(fccRegex.test('FReeCodeCAmp'), 'Your regex should match <code>FReeCodeCAmp</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let myString = \"freeCodeCamp\";",
+            "let fccRegex = /change/; // Change this line",
+            "let result = fccRegex.test(myString);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Apply the <code>.match()</code> method to extract the word <code>coding</code>."
+      ],
+      "tests": [
+        {
+          "text": "The <code>result</code> should have the word <code>coding</code>'",
+          "testString": "assert(result.join() === \"coding\", 'The <code>result</code> should have the word <code>coding</code>')"
+        },
+        {
+          "text": "Your regex <code>codingRegex</code> should search for <code>coding</code>'",
+          "testString": "assert(codingRegex.source === \"coding\", 'Your regex <code>codingRegex</code> should search for <code>coding</code>')"
+        },
+        {
+          "text": "You should use the <code>.match()</code> method.'",
+          "testString": "assert(code.match(/\\.match\\(.*\\)/), 'You should use the <code>.match()</code> method.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let extractStr = \"Extract the word 'coding' from this string.\";",
+            "let codingRegex = /change/; // Change this line",
+            "let result = extractStr; // Change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>"
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>starRegex</code> should use the global flag <code>g</code>'",
+          "testString": "assert(starRegex.flags.match(/g/).length == 1, 'Your regex <code>starRegex</code> should use the global flag <code>g</code>')"
+        },
+        {
+          "text": "Your regex <code>starRegex</code> should use the case insensitive flag <code>i</code>'",
+          "testString": "assert(starRegex.flags.match(/i/).length == 1, 'Your regex <code>starRegex</code> should use the case insensitive flag <code>i</code>')"
+        },
+        {
+          "text": "Your match should match both occurrences of the word <code>\"Twinkle\"</code>'",
+          "testString": "assert(result.sort().join() == twinkleStar.match(/twinkle/gi).sort().join(), 'Your match should match both occurrences of the word <code>\"Twinkle\"</code>')"
+        },
+        {
+          "text": "Your match <code>result</code> should have two elements in it.'",
+          "testString": "assert(result.length == 2, 'Your match <code>result</code> should have two elements in it.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let twinkleStar = \"Twinkle, twinkle, little star\";",
+            "let starRegex = /change/; // Change this line",
+            "let result = twinkleStar; // Change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "You should use the <code>.test()</code> method.'",
+          "testString": "assert(code.match(/\\.test\\(.*\\)/), 'You should use the <code>.test()</code> method.')"
+        },
+        {
+          "text": "You should use the wildcard character in your regex <code>unRegex</code>'",
+          "testString": "assert(/\\./.test(unRegex.source), 'You should use the wildcard character in your regex <code>unRegex</code>')"
+        },
+        {
+          "text": "Your regex <code>unRegex</code> should match <code>\"run\"</code> in <code>\"Let us go on a run.\"</code>'",
+          "testString": "assert(unRegex.test(\"Let us go on a run.\"), 'Your regex <code>unRegex</code> should match <code>\"run\"</code> in <code>\"Let us go on a run.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>unRegex</code> should match <code>\"sun\"</code> in <code>\"The sun is out today.\"</code>'",
+          "testString": "assert(unRegex.test(\"The sun is out today.\"), 'Your regex <code>unRegex</code> should match <code>\"sun\"</code> in <code>\"The sun is out today.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>unRegex</code> should match <code>\"fun\"</code> in <code>\"Coding is a lot of fun.\"</code>'",
+          "testString": "assert(unRegex.test(\"Coding is a lot of fun.\"), 'Your regex <code>unRegex</code> should match <code>\"fun\"</code> in <code>\"Coding is a lot of fun.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>unRegex</code> should match <code>\"pun\"</code> in <code>\"Seven days without a pun makes one weak.\"</code>'",
+          "testString": "assert(unRegex.test(\"Seven days without a pun makes one weak.\"), 'Your regex <code>unRegex</code> should match <code>\"pun\"</code> in <code>\"Seven days without a pun makes one weak.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>unRegex</code> should match <code>\"nun\"</code> in <code>\"One takes a vow to be a nun.\"</code>'",
+          "testString": "assert(unRegex.test(\"One takes a vow to be a nun.\"), 'Your regex <code>unRegex</code> should match <code>\"nun\"</code> in <code>\"One takes a vow to be a nun.\"</code>')"
+        },
+        {
+          "text": "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>'",
+          "testString": "assert(unRegex.test(\"She got fired from the hot dog stand for putting her hair in a bun.\"), '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>')"
+        },
+        {
+          "text": "Your regex <code>unRegex</code> should not match <code>\"There is a bug in my code.\"</code>'",
+          "testString": "assert(!unRegex.test(\"There is a bug in my code.\"), 'Your regex <code>unRegex</code> should not match <code>\"There is a bug in my code.\"</code>')"
+        },
+        {
+          "text": "Your regex <code>unRegex</code> should not match <code>\"Catch me if you can.\"</code>'",
+          "testString": "assert(!unRegex.test(\"Can me if you can.\"), 'Your regex <code>unRegex</code> should not match <code>\"Catch me if you can.\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let exampleStr = \"Let's have fun with regular expressions!\";",
+            "let unRegex = /change/; // Change this line",
+            "let result = unRegex.test(exampleStr);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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 find all the vowels in the string <code>quoteSample</code>.",
+        "<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
+      ],
+      "tests": [
+        {
+          "text": "You should find all 25 vowels.'",
+          "testString": "assert(result.length == 25, 'You should find all 25 vowels.')"
+        },
+        {
+          "text": "Your regex <code>vowelRegex</code> should use a character class.'",
+          "testString": "assert(/\\[.*\\]/.test(vowelRegex.source), 'Your regex <code>vowelRegex</code> should use a character class.')"
+        },
+        {
+          "text": "Your regex <code>vowelRegex</code> should use the global flag.'",
+          "testString": "assert(vowelRegex.flags.match(/g/).length == 1, 'Your regex <code>vowelRegex</code> should use the global flag.')"
+        },
+        {
+          "text": "Your regex <code>vowelRegex</code> should use the case insensitive flag.'",
+          "testString": "assert(vowelRegex.flags.match(/i/).length == 1, 'Your regex <code>vowelRegex</code> should use the case insensitive flag.')"
+        },
+        {
+          "text": "Your regex should not match any consonants.'",
+          "testString": "assert(!/[b-df-hj-np-tv-z]/gi.test(result.join()), 'Your regex should not match any consonants.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "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"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Match all the letters in the string <code>quoteSample</code>.",
+        "<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>alphabetRegex</code> should match 35 items.'",
+          "testString": "assert(result.length == 35, 'Your regex <code>alphabetRegex</code> should match 35 items.')"
+        },
+        {
+          "text": "Your regex <code>alphabetRegex</code> should use the global flag.'",
+          "testString": "assert(alphabetRegex.flags.match(/g/).length == 1, 'Your regex <code>alphabetRegex</code> should use the global flag.')"
+        },
+        {
+          "text": "Your regex <code>alphabetRegex</code> should use the case insensitive flag.'",
+          "testString": "assert(alphabetRegex.flags.match(/i/).length == 1, 'Your regex <code>alphabetRegex</code> should use the case insensitive flag.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let quoteSample = \"The quick brown fox jumps over the lazy dog.\";",
+            "let alphabetRegex = /change/; // Change this line",
+            "let result = alphabetRegex; // Change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>// matches all letters and numbers in jennyStr<br>jennyStr.match(myRegex);</blockquote>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>myRegex</code> should match 17 items.'",
+          "testString": "assert(result.length == 17, 'Your regex <code>myRegex</code> should match 17 items.')"
+        },
+        {
+          "text": "Your regex <code>myRegex</code> should use the global flag.'",
+          "testString": "assert(myRegex.flags.match(/g/).length == 1, 'Your regex <code>myRegex</code> should use the global flag.')"
+        },
+        {
+          "text": "Your regex <code>myRegex</code> should use the case insensitive flag.'",
+          "testString": "assert(myRegex.flags.match(/i/).length == 1, 'Your regex <code>myRegex</code> should use the case insensitive flag.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let quoteSample = \"Blueberry 3.141592653s are delicious.\";",
+            "let myRegex = /change/; // Change this line",
+            "let result = myRegex; // Change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>myRegex</code> should match 9 items.'",
+          "testString": "assert(result.length == 9, 'Your regex <code>myRegex</code> should match 9 items.')"
+        },
+        {
+          "text": "Your regex <code>myRegex</code> should use the global flag.'",
+          "testString": "assert(myRegex.flags.match(/g/).length == 1, 'Your regex <code>myRegex</code> should use the global flag.')"
+        },
+        {
+          "text": "Your regex <code>myRegex</code> should use the case insensitive flag.'",
+          "testString": "assert(myRegex.flags.match(/i/).length == 1, 'Your regex <code>myRegex</code> should use the case insensitive flag.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let quoteSample = \"3 blind mice.\";",
+            "let myRegex = /change/; // Change this line",
+            "let result = myRegex; // Change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>. Because of the <code>+</code>, it would also find a single match in <code>\"aabc\"</code> and return <code>[\"aa\"]</code>.",
+        "If it were instead 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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>myRegex</code> should use the <code>+</code> sign to match one or more <code>s</code> characters.'",
+          "testString": "assert(/\\+/.test(myRegex.source), 'Your regex <code>myRegex</code> should use the <code>+</code> sign to match one or more <code>s</code> characters.')"
+        },
+        {
+          "text": "Your regex <code>myRegex</code> should match 2 items.'",
+          "testString": "assert(result.length == 2, 'Your regex <code>myRegex</code> should match 2 items.')"
+        },
+        {
+          "text": "The <code>result</code> variable should be an array with two matches of <code>\"ss\"</code>'",
+          "testString": "assert(result[0] == 'ss' && result[1] == 'ss', 'The <code>result</code> variable should be an array with two matches of <code>\"ss\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let difficultSpelling = \"Mississippi\";",
+            "let myRegex = /change/; // Change this line",
+            "let result = difficultSpelling.match(myRegex);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 soccerWord = \"gooooooooal!\";<br>let gPhrase = \"gut feeling\";<br>let oPhrase = \"over the moon\";<br>let goRegex = /go*/;<br>soccerWord.match(goRegex); // Returns [\"goooooooo\"]<br>gPhrase.match(goRegex); // Returns [\"g\"]<br>oPhrase.match(goRegex); // Returns null</blockquote>",
+        "<hr>",
+        "Create a regex <code>chewieRegex</code> that uses the <code>*</code> character to match all the upper and lower<code>\"a\"</code> characters in <code>chewieQuote</code>. Your regex does not need flags, and it should not match any of the other quotes."
+      ],
+      "tests": [
+        {
+          "text": "Your regex <code>chewieRegex</code> should use the <code>*</code> character to match zero or more <code>a</code> characters.'",
+          "testString": "assert(/\\*/.test(chewieRegex.source), 'Your regex <code>chewieRegex</code> should use the <code>*</code> character to match zero or more <code>a</code> characters.')"
+        },
+        {
+          "text": "Your regex <code>chewieRegex</code> should match 16 characters.'",
+          "testString": "assert(result[0].length === 16, 'Your regex <code>chewieRegex</code> should match 16 characters.')"
+        },
+        {
+          "text": "Your regex should match <code>\"Aaaaaaaaaaaaaaaa\"</code>.'",
+          "testString": "assert(result[0] === 'Aaaaaaaaaaaaaaaa', 'Your regex should match <code>\"Aaaaaaaaaaaaaaaa\"</code>.')"
+        },
+        {
+          "text": "Your regex should not match any characters in <code>\"He made a fair move. Screaming about it can&#39t help you.\"</code>'",
+          "testString": "assert(!\"He made a fair move. Screaming about it can\\'t help you.\".match(chewieRegex), 'Your regex should not match any characters in <code>\"He made a fair move. Screaming about it can&#39t help you.\"</code>')"
+        },
+        {
+          "text": "Your regex should not match any characters in <code>\"Let him have it. It&#39s not wise to upset a Wookiee.\"</code>'",
+          "testString": "assert(!\"Let him have it. It\\'s not wise to upset a Wookiee.\".match(chewieRegex), 'Your regex should not match any characters in <code>\"Let him have it. It&#39s not wise to upset a Wookiee.\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let chewieQuote = \"Aaaaaaaaaaaaaaaarrrgh!\";",
+            "let chewieRegex = /change/; // Change this line",
+            "let result = chewieQuote.match(chewieRegex);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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\"]</code>. 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>.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "The <code>result</code> variable should be an array with <code>&lt;h1&gt;</code> in it'",
+          "testString": "assert(result[0] == '<h1>', 'The <code>result</code> variable should be an array with <code>&lt;h1&gt;</code> in it')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let text = \"<h1>Winter is coming</h1>\";",
+            "let myRegex = /<.*>/; // Change this line",
+            "let result = text.match(myRegex);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should match <em>one</em> criminal (\"<code>C</code>\") in <code>\"C\"</code>'",
+          "testString": "assert('C'.match(reCriminals) && 'C'.match(reCriminals)[0] == 'C', 'Your regex should match <em>one</em> criminal (\"<code>C</code>\") in <code>\"C\"</code>')"
+        },
+        {
+          "text": "Your regex should match <em>two</em> criminals (\"<code>CC</code>\") in <code>\"CC\"</code>'",
+          "testString": "assert('CC'.match(reCriminals) && 'CC'.match(reCriminals)[0] == 'CC', 'Your regex should match <em>two</em> criminals (\"<code>CC</code>\") in <code>\"CC\"</code>')"
+        },
+        {
+          "text": "Your regex should match <em>three</em> criminals (\"<code>CCC</code>\") in <code>\"P1P5P4CCCP2P6P3\"</code>'",
+          "testString": "assert('P1P5P4CCCP2P6P3'.match(reCriminals) && 'P1P5P4CCCP2P6P3'.match(reCriminals)[0] == 'CCC', 'Your regex should match <em>three</em> criminals (\"<code>CCC</code>\") in <code>\"P1P5P4CCCP2P6P3\"</code>')"
+        },
+        {
+          "text": "Your regex should match <em>five</em> criminals (\"<code>CCCCC</code>\") in <code>\"P6P2P7P4P5CCCCCP3P1\"</code>'",
+          "testString": "assert('P6P2P7P4P5CCCCCP3P1'.match(reCriminals) && 'P6P2P7P4P5CCCCCP3P1'.match(reCriminals)[0] == 'CCCCC', 'Your regex should match <em>five</em> criminals (\"<code>CCCCC</code>\") in <code>\"P6P2P7P4P5CCCCCP3P1\"</code>')"
+        },
+        {
+          "text": "Your regex should not match any criminals in <code>\"\"</code>'",
+          "testString": "assert(!reCriminals.test(''), 'Your regex should not match any criminals in <code>\"\"</code>')"
+        },
+        {
+          "text": "Your regex should not match any criminals in <code>\"P1P2P3\"</code>'",
+          "testString": "assert(!reCriminals.test('P1P2P3'), 'Your regex should not match any criminals in <code>\"P1P2P3\"</code>')"
+        },
+        {
+          "text": "Your regex should match <em>fifty</em> criminals (\"<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>\") in <code>\"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3\"</code>.'",
+          "testString": "assert('P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals) && 'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals)[0] == \"CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC\", 'Your regex should match <em>fifty</em> criminals (\"<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>\") in <code>\"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3\"</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "// example crowd gathering",
+            "let crowd = 'P1P2P3P4P5P6CCCP7P8P9';",
+            "",
+            "let reCriminals = /./; // Change this line",
+            "",
+            "let matchedCriminals = crowd.match(reCriminals);",
+            "console.log(matchedCriminals);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Use the <code>caret</code> character in a regex to find <code>\"Cal\"</code> only in the beginning of the string <code>rickyAndCal</code>."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should search for <code>\"Cal\"</code> with a capital letter.'",
+          "testString": "assert(calRegex.source == \"^Cal\", 'Your regex should search for <code>\"Cal\"</code> with a capital letter.')"
+        },
+        {
+          "text": "Your regex should not use any flags.'",
+          "testString": "assert(calRegex.flags == \"\", 'Your regex should not use any flags.')"
+        },
+        {
+          "text": "Your regex should match <code>\"Cal\"</code> at the beginning of the string.'",
+          "testString": "assert(calRegex.test(\"Cal and Ricky both like racing.\"), 'Your regex should match <code>\"Cal\"</code> at the beginning of the string.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Cal\"</code> in the middle of a string.'",
+          "testString": "assert(!calRegex.test(\"Ricky and Cal both like racing.\"), 'Your regex should not match <code>\"Cal\"</code> in the middle of a string.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let rickyAndCal = \"Cal and Ricky both like racing.\";",
+            "let calRegex = /change/; // Change this line",
+            "let result = calRegex.test(rickyAndCal);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Use the anchor character (<code>$</code>) to match the string <code>\"caboose\"</code> at the end of the string <code>caboose</code>."
+      ],
+      "tests": [
+        {
+          "text": "You should search for <code>\"caboose\"</code> with the dollar sign <code>$</code> anchor in your regex.'",
+          "testString": "assert(lastRegex.source == \"caboose$\", 'You should search for <code>\"caboose\"</code> with the dollar sign <code>$</code> anchor in your regex.')"
+        },
+        {
+          "text": "Your regex should not use any flags.'",
+          "testString": "assert(lastRegex.flags == \"\", 'Your regex should not use any flags.')"
+        },
+        {
+          "text": "You should match <code>\"caboose\"</code> at the end of the string <code>\"The last car on a train is the caboose\"</code>'",
+          "testString": "assert(lastRegex.test(\"The last car on a train is the caboose\"), '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",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let caboose = \"The last car on a train is the caboose\";",
+            "let lastRegex = /change/; // Change this line",
+            "let result = lastRegex.test(caboose);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>.",
+        "<hr>",
+        "Use the shorthand character class <code>\\w</code> to count the number of alphanumeric characters in various quotes and strings."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the global flag.'",
+          "testString": "assert(alphabetRegexV2.global, 'Your regex should use the global flag.')"
+        },
+        {
+          "text": "Your regex should find 31 alphanumeric characters in <code>\"The five boxing wizards jump quickly.\"</code>'",
+          "testString": "assert(\"The five boxing wizards jump quickly.\".match(alphabetRegexV2).length === 31, 'Your regex should find 31 alphanumeric characters in <code>\"The five boxing wizards jump quickly.\"</code>')"
+        },
+        {
+          "text": "Your regex should find 32 alphanumeric characters in <code>\"Pack my box with five dozen liquor jugs.\"</code>'",
+          "testString": "assert(\"Pack my box with five dozen liquor jugs.\".match(alphabetRegexV2).length === 32, 'Your regex should find 32 alphanumeric characters in <code>\"Pack my box with five dozen liquor jugs.\"</code>')"
+        },
+        {
+          "text": "Your regex should find 30 alphanumeric characters in <code>\"How vexingly quick daft zebras jump!\"</code>'",
+          "testString": "assert(\"How vexingly quick daft zebras jump!\".match(alphabetRegexV2).length === 30, 'Your regex should find 30 alphanumeric characters in <code>\"How vexingly quick daft zebras jump!\"</code>')"
+        },
+        {
+          "text": "Your regex should find 36 alphanumeric characters in <code>\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\"</code>'",
+          "testString": "assert(\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\".match(alphabetRegexV2).length === 36, '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",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let quoteSample = \"The five boxing wizards jump quickly.\";",
+            "let alphabetRegexV2 = /change/; // Change this line",
+            "let result = quoteSample.match(alphabetRegexV2).length;"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Use the shorthand character class <code>\\W</code> to count the number of non-alphanumeric characters in various quotes and strings."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the global flag.'",
+          "testString": "assert(nonAlphabetRegex.global, 'Your regex should use the global flag.')"
+        },
+        {
+          "text": "Your regex should find 6 non-alphanumeric characters in <code>\"The five boxing wizards jump quickly.\"</code>.'",
+          "testString": "assert(\"The five boxing wizards jump quickly.\".match(nonAlphabetRegex).length == 6, 'Your regex should find 6 non-alphanumeric characters in <code>\"The five boxing wizards jump quickly.\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 8 non-alphanumeric characters in <code>\"Pack my box with five dozen liquor jugs.\"</code>'",
+          "testString": "assert(\"Pack my box with five dozen liquor jugs.\".match(nonAlphabetRegex).length == 8, 'Your regex should find 8 non-alphanumeric characters in <code>\"Pack my box with five dozen liquor jugs.\"</code>')"
+        },
+        {
+          "text": "Your regex should find 6 non-alphanumeric characters in <code>\"How vexingly quick daft zebras jump!\"</code>'",
+          "testString": "assert(\"How vexingly quick daft zebras jump!\".match(nonAlphabetRegex).length == 6, 'Your regex should find 6 non-alphanumeric characters in <code>\"How vexingly quick daft zebras jump!\"</code>')"
+        },
+        {
+          "text": "Your regex should find 12 non-alphanumeric characters in <code>\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\"</code>'",
+          "testString": "assert(\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\".match(nonAlphabetRegex).length == 12, '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",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let quoteSample = \"The five boxing wizards jump quickly.\";",
+            "let nonAlphabetRegex = /change/; // Change this line",
+            "let result = quoteSample.match(nonAlphabetRegex).length;"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the shortcut character to match digit characters'",
+          "testString": "assert(/\\\\d/.test(numRegex.source), 'Your regex should use the shortcut character to match digit characters')"
+        },
+        {
+          "text": "Your regex should use the global flag.'",
+          "testString": "assert(numRegex.global, 'Your regex should use the global flag.')"
+        },
+        {
+          "text": "Your regex should find 1 digit in <code>\"9\"</code>.'",
+          "testString": "assert(\"9\".match(numRegex).length == 1, 'Your regex should find 1 digit in <code>\"9\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 2 digits in <code>\"Catch 22\"</code>.'",
+          "testString": "assert(\"Catch 22\".match(numRegex).length == 2, 'Your regex should find 2 digits in <code>\"Catch 22\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 3 digits in <code>\"101 Dalmatians\"</code>.'",
+          "testString": "assert(\"101 Dalmatians\".match(numRegex).length == 3, 'Your regex should find 3 digits in <code>\"101 Dalmatians\"</code>.')"
+        },
+        {
+          "text": "Your regex should find no digits in <code>\"One, Two, Three\"</code>.'",
+          "testString": "assert(\"One, 'Your regex should find no digits in <code>\"One, Two, Three\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 2 digits in <code>\"21 Jump Street\"</code>.'",
+          "testString": "assert(\"21 Jump Street\".match(numRegex).length == 2, 'Your regex should find 2 digits in <code>\"21 Jump Street\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 4 digits in <code>\"2001: A Space Odyssey\"</code>.'",
+          "testString": "assert(\"2001: A Space Odyssey\".match(numRegex).length == 4, 'Your regex should find 4 digits in <code>\"2001: A Space Odyssey\"</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let numString = \"Your sandwich will be $5.00\";",
+            "let numRegex = /change/; // Change this line",
+            "let result = numString.match(numRegex).length;"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Use the shorthand character class for non-digits <code>\\D</code> to count how many non-digits are in movie titles."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the shortcut character to match non-digit characters'",
+          "testString": "assert(/\\\\D/.test(noNumRegex.source), 'Your regex should use the shortcut character to match non-digit characters')"
+        },
+        {
+          "text": "Your regex should use the global flag.'",
+          "testString": "assert(noNumRegex.global, 'Your regex should use the global flag.')"
+        },
+        {
+          "text": "Your regex should find no non-digits in <code>\"9\"</code>.'",
+          "testString": "assert(\"9\".match(noNumRegex) == null, 'Your regex should find no non-digits in <code>\"9\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 6 non-digits in <code>\"Catch 22\"</code>.'",
+          "testString": "assert(\"Catch 22\".match(noNumRegex).length == 6, 'Your regex should find 6 non-digits in <code>\"Catch 22\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 11 non-digits in <code>\"101 Dalmatians\"</code>.'",
+          "testString": "assert(\"101 Dalmatians\".match(noNumRegex).length == 11, 'Your regex should find 11 non-digits in <code>\"101 Dalmatians\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 15 non-digits in <code>\"One, Two, Three\"</code>.'",
+          "testString": "assert(\"One, 'Your regex should find 15 non-digits in <code>\"One, Two, Three\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 12 non-digits in <code>\"21 Jump Street\"</code>.'",
+          "testString": "assert(\"21 Jump Street\".match(noNumRegex).length == 12, 'Your regex should find 12 non-digits in <code>\"21 Jump Street\"</code>.')"
+        },
+        {
+          "text": "Your regex should find 17 non-digits in <code>\"2001: A Space Odyssey\"</code>.'",
+          "testString": "assert(\"2001: A Space Odyssey\".match(noNumRegex).length == 17, 'Your regex should find 17 non-digits in <code>\"2001: A Space Odyssey\"</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let numString = \"Your sandwich will be $5.00\";",
+            "let noNumRegex = /change/; // Change this line",
+            "let result = numString.match(noNumRegex).length;"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "Change the regex <code>userCheck</code> to fit the constraints listed above."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should match <code>JACK</code>'",
+          "testString": "assert(userCheck.test(\"JACK\"), 'Your regex should match <code>JACK</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>J</code>'",
+          "testString": "assert(!userCheck.test(\"J\"), 'Your regex should not match <code>J</code>')"
+        },
+        {
+          "text": "Your regex should match <code>Oceans11</code>'",
+          "testString": "assert(userCheck.test(\"Oceans11\"), 'Your regex should match <code>Oceans11</code>')"
+        },
+        {
+          "text": "Your regex should match <code>RegexGuru</code>'",
+          "testString": "assert(userCheck.test(\"RegexGuru\"), 'Your regex should match <code>RegexGuru</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>007</code>'",
+          "testString": "assert(!userCheck.test(\"007\"), 'Your regex should not match <code>007</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>9</code>'",
+          "testString": "assert(!userCheck.test(\"9\"), 'Your regex should not match <code>9</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let username = \"JackOfAllTrades\";",
+            "let userCheck = /change/; // Change this line",
+            "let result = userCheck.test(username);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Change the regex <code>countWhiteSpace</code> to look for multiple whitespace characters in a string."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the global flag.'",
+          "testString": "assert(countWhiteSpace.global, 'Your regex should use the global flag.')"
+        },
+        {
+          "text": "Your regex should find eight spaces in <code>\"Men are from Mars and women are from Venus.\"</code>'",
+          "testString": "assert(\"Men are from Mars and women are from Venus.\".match(countWhiteSpace).length == 8, 'Your regex should find eight spaces in <code>\"Men are from Mars and women are from Venus.\"</code>')"
+        },
+        {
+          "text": "Your regex should find three spaces in <code>\"Space: the final frontier.\"</code>'",
+          "testString": "assert(\"Space: the final frontier.\".match(countWhiteSpace).length == 3, 'Your regex should find three spaces in <code>\"Space: the final frontier.\"</code>')"
+        },
+        {
+          "text": "Your regex should find no spaces in <code>\"MindYourPersonalSpace\"</code>'",
+          "testString": "assert(\"MindYourPersonalSpace\".match(countWhiteSpace) == null, 'Your regex should find no spaces in <code>\"MindYourPersonalSpace\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let sample = \"Whitespace is important in separating words\";",
+            "let countWhiteSpace = /change/; // Change this line",
+            "let result = sample.match(countWhiteSpace);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Change the regex <code>countNonWhiteSpace</code> to look for multiple non-whitespace characters in a string."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the global flag.'",
+          "testString": "assert(countNonWhiteSpace.global, 'Your regex should use the global flag.')"
+        },
+        {
+          "text": "Your regex should find 35 non-spaces in <code>\"Men are from Mars and women are from Venus.\"</code>'",
+          "testString": "assert(\"Men are from Mars and women are from Venus.\".match(countNonWhiteSpace).length == 35, 'Your regex should find 35 non-spaces in <code>\"Men are from Mars and women are from Venus.\"</code>')"
+        },
+        {
+          "text": "Your regex should find 23 non-spaces in <code>\"Space: the final frontier.\"</code>'",
+          "testString": "assert(\"Space: the final frontier.\".match(countNonWhiteSpace).length == 23, 'Your regex should find 23 non-spaces in <code>\"Space: the final frontier.\"</code>')"
+        },
+        {
+          "text": "Your regex should find 21 non-spaces in <code>\"MindYourPersonalSpace\"</code>'",
+          "testString": "assert(\"MindYourPersonalSpace\".match(countNonWhiteSpace).length == 21, 'Your regex should find 21 non-spaces in <code>\"MindYourPersonalSpace\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let sample = \"Whitespace is important in separating words\";",
+            "let countNonWhiteSpace = /change/; // Change this line",
+            "let result = sample.match(countNonWhiteSpace);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use curly brackets.'",
+          "testString": "assert(ohRegex.source.match(/{.*?}/).length > 0, 'Your regex should use curly brackets.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Ohh no\"</code>'",
+          "testString": "assert(!ohRegex.test(\"Ohh no\"), 'Your regex should not match <code>\"Ohh no\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Ohhh no\"</code>'",
+          "testString": "assert(ohRegex.test(\"Ohhh no\"), 'Your regex should match <code>\"Ohhh no\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Ohhhh no\"</code>'",
+          "testString": "assert(ohRegex.test(\"Ohhhh no\"), 'Your regex should match <code>\"Ohhhh no\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Ohhhhh no\"</code>'",
+          "testString": "assert(ohRegex.test(\"Ohhhhh no\"), 'Your regex should match <code>\"Ohhhhh no\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Ohhhhhh no\"</code>'",
+          "testString": "assert(ohRegex.test(\"Ohhhhhh no\"), 'Your regex should match <code>\"Ohhhhhh no\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Ohhhhhhh no\"</code>'",
+          "testString": "assert(!ohRegex.test(\"Ohhhhhhh no\"), 'Your regex should not match <code>\"Ohhhhhhh no\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let ohStr = \"Ohhh no\";",
+            "let ohRegex = /change/; // Change this line",
+            "let result = ohRegex.test(ohStr);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use curly brackets.'",
+          "testString": "assert(haRegex.source.match(/{.*?}/).length > 0, 'Your regex should use curly brackets.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Hazzah\"</code>'",
+          "testString": "assert(!haRegex.test(\"Hazzah\"), 'Your regex should not match <code>\"Hazzah\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Hazzzah\"</code>'",
+          "testString": "assert(!haRegex.test(\"Hazzzah\"), 'Your regex should not match <code>\"Hazzzah\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Hazzzzah\"</code>'",
+          "testString": "assert(haRegex.test(\"Hazzzzah\"), 'Your regex should match <code>\"Hazzzzah\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Hazzzzzah\"</code>'",
+          "testString": "assert(haRegex.test(\"Hazzzzzah\"), 'Your regex should match <code>\"Hazzzzzah\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Hazzzzzzah\"</code>'",
+          "testString": "assert(haRegex.test(\"Hazzzzzzah\"), 'Your regex should match <code>\"Hazzzzzzah\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Hazzah\"</code> with 30 <code>z</code>\\'s in it.'",
+          "testString": "assert(haRegex.test(\"Ha\" + \"z\".repeat(30) + \"ah\"), 'Your regex should match <code>\"Hazzah\"</code> with 30 <code>z</code>\\'s in it.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let haStr = \"Hazzzzah\";",
+            "let haRegex = /change/; // Change this line",
+            "let result = haRegex.test(haStr);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Change the regex <code>timRegex</code> to match the word <code>\"Timber\"</code> only when it has four letter <code>m</code>'s."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use curly brackets.'",
+          "testString": "assert(timRegex.source.match(/{.*?}/).length > 0, 'Your regex should use curly brackets.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Timber\"</code>'",
+          "testString": "assert(!timRegex.test(\"Timber\"), 'Your regex should not match <code>\"Timber\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Timmber\"</code>'",
+          "testString": "assert(!timRegex.test(\"Timmber\"), 'Your regex should not match <code>\"Timmber\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Timmmber\"</code>'",
+          "testString": "assert(!timRegex.test(\"Timmmber\"), 'Your regex should not match <code>\"Timmmber\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"Timmmmber\"</code>'",
+          "testString": "assert(timRegex.test(\"Timmmmber\"), 'Your regex should match <code>\"Timmmmber\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"Timber\"</code> with 30 <code>m</code>\\'s in it.'",
+          "testString": "assert(!timRegex.test(\"Ti\" + \"m\".repeat(30) + \"ber\"), 'Your regex should not match <code>\"Timber\"</code> with 30 <code>m</code>\\'s in it.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let timStr = \"Timmmmber\";",
+            "let timRegex = /change/; // Change this line",
+            "let result = timRegex.test(timStr);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Change the regex <code>favRegex</code> to match both the American English (favorite) and the British English (favourite) version of the word."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the optional symbol, <code>?</code>.'",
+          "testString": "assert(favRegex.source.match(/\\?/).length > 0, 'Your regex should use the optional symbol, <code>?</code>.')"
+        },
+        {
+          "text": "Your regex should match <code>\"favorite\"</code>'",
+          "testString": "assert(favRegex.test(\"favorite\"), 'Your regex should match <code>\"favorite\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"favourite\"</code>'",
+          "testString": "assert(favRegex.test(\"favourite\"), 'Your regex should match <code>\"favourite\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"fav\"</code>'",
+          "testString": "assert(!favRegex.test(\"fav\"), 'Your regex should not match <code>\"fav\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let favWord = \"favorite\";",
+            "let favRegex = /change/; // Change this line",
+            "let result = favRegex.test(favWord);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "Use <code>lookaheads</code> in the <code>pwRegex</code> to match passwords that are greater than 5 characters long and have two consecutive digits."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use two positive <code>lookaheads</code>.'",
+          "testString": "assert(pwRegex.source.match(/\\(\\?=.*?\\)\\(\\?=.*?\\)/) !== null, 'Your regex should use two positive <code>lookaheads</code>.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"astronaut\"</code>'",
+          "testString": "assert(!pwRegex.test(\"astronaut\"), 'Your regex should not match <code>\"astronaut\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"airplanes\"</code>'",
+          "testString": "assert(!pwRegex.test(\"airplanes\"), 'Your regex should not match <code>\"airplanes\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"bana12\"</code>'",
+          "testString": "assert(pwRegex.test(\"bana12\"), 'Your regex should match <code>\"bana12\"</code>')"
+        },
+        {
+          "text": "Your regex should match <code>\"abc123\"</code>'",
+          "testString": "assert(pwRegex.test(\"abc123\"), 'Your regex should match <code>\"abc123\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"123\"</code>'",
+          "testString": "assert(!pwRegex.test(\"123\"), 'Your regex should not match <code>\"123\"</code>')"
+        },
+        {
+          "text": "Your regex should not match <code>\"1234\"</code>'",
+          "testString": "assert(!pwRegex.test(\"1234\"), 'Your regex should not match <code>\"1234\"</code>')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let sampleWord = \"astronaut\";",
+            "let pwRegex = /change/; // Change this line",
+            "let result = pwRegex.test(sampleWord);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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 (<code>\\</code>) and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be <code>\\1</code> 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.",
+        "<hr>",
+        "Use <code>capture groups</code> in <code>reRegex</code> to match numbers that are repeated only three times in a string, each separated by a space."
+      ],
+      "tests": [
+        {
+          "text": "Your regex should use the shorthand character class for digits.'",
+          "testString": "assert(reRegex.source.match(/\\\\d/), 'Your regex should use the shorthand character class for digits.')"
+        },
+        {
+          "text": "Your regex should reuse the capture group twice.'",
+          "testString": "assert(reRegex.source.match(/\\\\\\d/g).length === 2, 'Your regex should reuse the capture group twice.')"
+        },
+        {
+          "text": "Your regex should have two spaces separating the three numbers.'",
+          "testString": "assert(reRegex.source.match(/\\\\s/g).length === 2, 'Your regex should have two spaces separating the three numbers.')"
+        },
+        {
+          "text": "Your regex should match <code>\"42 42 42\"</code>.'",
+          "testString": "assert(reRegex.test(\"42 42 42\"), 'Your regex should match <code>\"42 42 42\"</code>.')"
+        },
+        {
+          "text": "Your regex should match <code>\"100 100 100\"</code>.'",
+          "testString": "assert(reRegex.test(\"100 100 100\"), 'Your regex should match <code>\"100 100 100\"</code>.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"42 42 42 42\"</code>.'",
+          "testString": "assert.equal((\"42 42 42 42\").match(reRegex.source), 'Your regex should not match <code>\"42 42 42 42\"</code>.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"42 42\"</code>.'",
+          "testString": "assert.equal((\"42 42\").match(reRegex.source), 'Your regex should not match <code>\"42 42\"</code>.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"101 102 103\"</code>.'",
+          "testString": "assert(!reRegex.test(\"101 102 103\"), 'Your regex should not match <code>\"101 102 103\"</code>.')"
+        },
+        {
+          "text": "Your regex should not match <code>\"1 2 3\"</code>.'",
+          "testString": "assert(!reRegex.test(\"1 2 3\"), 'Your regex should not match <code>\"1 2 3\"</code>.')"
+        },
+        {
+          "text": "Your regex should match <code>\"10 10 10\"</code>.'",
+          "testString": "assert(reRegex.test(\"10 10 10\"), 'Your regex should match <code>\"10 10 10\"</code>.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let repeatNum = \"42 42 42\";",
+            "let reRegex = /change/; // Change this line",
+            "let result = reRegex.test(repeatNum);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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>",
+        "<hr>",
+        "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>."
+      ],
+      "tests": [
+        {
+          "text": "You should use <code>.replace()</code> to search and replace.'",
+          "testString": "assert(code.match(/\\.replace\\(.*\\)/), 'You should use <code>.replace()</code> to search and replace.')"
+        },
+        {
+          "text": "Your regex should change <code>\"This sandwich is good.\"</code> to <code>\"This sandwich is okey-dokey.\"</code>'",
+          "testString": "assert(result == \"This sandwich is okey-dokey.\" && replaceText === \"okey-dokey\", 'Your regex should change <code>\"This sandwich is good.\"</code> to <code>\"This sandwich is okey-dokey.\"</code>')"
+        },
+        {
+          "text": "You should not change the last line.'",
+          "testString": "assert(code.match(/result\\s*=\\s*huhText\\.replace\\(.*?\\)/), 'You should not change the last line.')"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let huhText = \"This sandwich is good.\";",
+            "let fixRegex = /change/; // Change this line",
+            "let replaceText = \"\"; // Change this line",
+            "let result = huhText.replace(fixRegex, replaceText);"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    },
+    {
+      "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.",
+        "<hr>",
+        "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."
+      ],
+      "tests": [
+        {
+          "text": "<code>result</code> should equal to <code>\"Hello, World!\"</code>'",
+          "testString": "assert(result == \"Hello, '<code>result</code> should equal to <code>\"Hello, World!\"</code>')"
+        },
+        {
+          "text": "You should not use the <code>.trim()</code> method.'",
+          "testString": "assert(!code.match(/\\.trim\\(.*?\\)/), 'You should not use the <code>.trim()</code> method.')"
+        },
+        {
+          "text": "The <code>result</code> variable should not be set equal to a string.'",
+          "testString": "assert(!code.match(/result\\s*=\\s*\".*?\"/), '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",
+      "releasedOn": "Feb 17, 2017",
+      "challengeType": 1,
+      "translations": {},
+      "files": {
+        "indexjs": {
+          "key": "indexjs",
+          "ext": "js",
+          "name": "index",
+          "contents": [
+            "let hello = \"   Hello, World!  \";",
+            "let wsRegex = /change/; // Change this line",
+            "let result = hello; // Change this line"
+          ],
+          "head": "",
+          "tail": ""
+        }
+      }
+    }
+  ],
+  "fileName": "02-javascript-algorithms-and-data-structures/regular-expressions.json",
+  "superBlock": "javascript-algorithms-and-data-structures",
+  "superOrder": 2
+}
\ No newline at end of file
diff --git a/packages/learn/seed/getChallenges.js b/packages/learn/seed/getChallenges.js
new file mode 100644
index 0000000000..eb2ee1def4
--- /dev/null
+++ b/packages/learn/seed/getChallenges.js
@@ -0,0 +1,65 @@
+/* eslint-disable no-self-compare */
+// no import here as this runs without babel
+const fs = require('fs-extra');
+const path = require('path');
+
+
+const hiddenFile = /(^(\.|\/\.))|(.md$)/g;
+function getFilesFor(dir) {
+  return fs
+    .readdirSync(path.join(__dirname, '/' + dir))
+    .filter(file => !hiddenFile.test(file))
+    .map(function(file) {
+      let superBlock;
+      if (fs.statSync(path.join(__dirname, dir + '/' + file)).isFile()) {
+        return { file: file };
+      }
+      superBlock = file;
+      return getFilesFor(dir + '/' + superBlock).map(function(data) {
+        return {
+          file: superBlock + '/' + data.file,
+          superBlock: superBlock
+        };
+      });
+    })
+    .reduce(function(files, file) {
+      if (!Array.isArray(file)) {
+        files.push(file);
+        return files;
+      }
+      return files.concat(file);
+    }, []);
+}
+
+function getSupOrder(filePath) {
+  const order = parseInt((filePath || '').split('-')[0], 10);
+  // check for NaN
+  if (order !== order) {
+    return 0;
+  }
+  return order;
+}
+
+function getSupName(filePath) {
+  const order = parseInt((filePath || '').split('-')[0], 10);
+  // check for NaN
+  if (order !== order) {
+    return filePath;
+  }
+
+  return (filePath || '')
+    .split('-')
+    .splice(1)
+    .join('-');
+}
+
+module.exports = function getChallenges() {
+  return getFilesFor('challenges').map(function(data) {
+    const challengeSpec = require('./challenges/' + data.file);
+    challengeSpec.fileName = data.file;
+    challengeSpec.superBlock = getSupName(data.superBlock);
+    challengeSpec.superOrder = getSupOrder(data.superBlock);
+
+    return challengeSpec;
+  });
+};
diff --git a/packages/learn/seed/schema/challengeSchema.js b/packages/learn/seed/schema/challengeSchema.js
new file mode 100644
index 0000000000..23cf265a5c
--- /dev/null
+++ b/packages/learn/seed/schema/challengeSchema.js
@@ -0,0 +1,90 @@
+const Joi = require('joi');
+Joi.objectId = require('joi-objectid')(Joi);
+
+const schema = Joi.object().keys({
+  block: Joi.string(),
+  blockId: Joi.objectId(),
+  challengeSeed: Joi.array().items(Joi.string().allow('')),
+  challengeType: Joi.number()
+    .min(0)
+    .max(9)
+    .required(),
+  checksum: Joi.number(),
+  dashedName: Joi.string(),
+  description: Joi.array()
+    .items(
+      // classic/modern challenges
+      Joi.string().allow(''),
+
+      // step challenges
+      Joi.array()
+        .items(Joi.string().allow(''))
+        .length(4),
+
+      // quiz challenges
+      Joi.object().keys({
+        subtitle: Joi.string(),
+        question: Joi.string(),
+        choices: Joi.array(),
+        answer: Joi.number(),
+        explanation: Joi.string()
+      })
+    )
+    .required(),
+  fileName: Joi.string(),
+  files: Joi.object().pattern(
+    /(jsx?|html|css|sass)$/,
+    Joi.object().keys({
+      key: Joi.string(),
+      ext: Joi.string(),
+      name: Joi.string(),
+      head: Joi.string().allow(''),
+      tail: Joi.string().allow(''),
+      contents: Joi.string()
+    })
+  ),
+  guideUrl: Joi.string().uri({ scheme: 'https' }),
+  head: Joi.array().items(Joi.string().allow('')),
+  helpRoom: Joi.string(),
+  id: Joi.objectId().required(),
+  isBeta: Joi.bool(),
+  isComingSoon: Joi.bool(),
+  isLocked: Joi.bool(),
+  isPrivate: Joi.bool(),
+  isRequired: Joi.bool(),
+  name: Joi.string(),
+  order: Joi.number(),
+  required: Joi.array().items(
+    Joi.object().keys({
+      link: Joi.string(),
+      raw: Joi.bool(),
+      src: Joi.string(),
+      crossDomain: Joi.bool()
+    })
+  ),
+  solutions: Joi.array().items(Joi.string().optional()),
+  superBlock: Joi.string(),
+  superOrder: Joi.number(),
+  suborder: Joi.number(),
+  tail: Joi.array().items(Joi.string().allow('')),
+  tests: Joi.array().items(
+    Joi.string().min(2),
+    Joi.object().keys({
+      text: Joi.string().required(),
+      testString: Joi.string()
+        .allow('')
+        .required()
+    }),
+    Joi.object().keys({
+      id: Joi.objectId().required(),
+      title: Joi.string().required()
+    })
+  ),
+  template: Joi.string(),
+  time: Joi.string().allow(''),
+  title: Joi.string().required()
+});
+
+exports.validateChallenge = function validateChallenge(challenge) {
+  return Joi.validate(challenge, schema);
+};
diff --git a/packages/learn/src/client/frame-runner.js b/packages/learn/src/client/frame-runner.js
new file mode 100644
index 0000000000..15a36d10a0
--- /dev/null
+++ b/packages/learn/src/client/frame-runner.js
@@ -0,0 +1,155 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var testTimeout = 5000;
+  var Rx = document.Rx;
+  var frameReady = document.__frameReady;
+  var helpers = Rx.helpers;
+  var chai = require('chai');
+  var source = document.__source;
+  var __getUserInput = document.__getUserInput || (x => x);
+  var checkChallengePayload = document.__checkChallengePayload;
+
+  // Fake Deep Equal dependency
+  /* eslint-disable no-unused-vars */
+  const DeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+  // Hardcode Deep Freeze dependency
+  var DeepFreeze = o => {
+    Object.freeze(o);
+    Object.getOwnPropertyNames(o).forEach(function(prop) {
+      if (
+        o.hasOwnProperty(prop) &&
+        o[prop] !== null &&
+        (typeof o[prop] === 'object' || typeof o[prop] === 'function') &&
+        !Object.isFrozen(o[prop])
+      ) {
+        DeepFreeze(o[prop]);
+      }
+    });
+    return o;
+  };
+
+  if (document.Enzyme) {
+    window.Enzyme = document.Enzyme;
+  }
+
+  document.__getJsOutput = function getJsOutput() {
+    if (window.__err) {
+      return window.__err;
+    }
+    let output;
+    try {
+      /* eslint-disable no-eval */
+      output = eval(source);
+      /* eslint-enable no-eval */
+    } catch (e) {
+      output = e.message + '\n' + e.stack;
+      window.__err = e;
+    }
+    return output;
+  };
+
+  document.__runTests = function runTests(tests = []) {
+    /* eslint-disable no-unused-vars */
+    const code = source;
+    const editor = {
+      getValue() {
+        return source;
+      }
+    };
+    /* eslint-enable no-unused-vars */
+    if (window.__err) {
+      return Rx.Observable.from(tests)
+        .map(test => {
+          /* eslint-disable */
+          return Object.assign({}, test, {
+            err: window.__err.message + '\n' + window.__err.stack,
+            message: window.__err.message,
+            stack: window.__err.stack
+          });
+          /* eslint-enable */
+        })
+        .toArray()
+        .do(() => {
+          window.__err = null;
+        });
+    }
+
+    // Iterate through the test one at a time
+    // on new stacks
+    return (
+      Rx.Observable.from(tests, null, null, Rx.Scheduler.default)
+        // add delay here for firefox to catch up
+        .delay(200)
+        /* eslint-disable no-unused-vars */
+        .flatMap(({ text, testString }) => {
+          const assert = chai.assert;
+          const getUserInput = __getUserInput;
+          /* eslint-enable no-unused-vars */
+          const newTest = { text, testString };
+          let test;
+          let __result;
+
+          // uncomment the following line to inspect
+          // the framerunner as it runs tests
+          // make sure the dev tools console is open
+          // debugger;
+          try {
+            /* eslint-disable no-eval */
+            // eval test string to actual JavaScript
+            // This return can be a function
+            // i.e. function() { assert(true, 'happy coding'); }
+            test = eval(testString);
+            /* eslint-enable no-eval */
+            if (typeof test === 'function') {
+              // all async tests must return a promise or observable
+              // sync tests can return Any type
+              __result = test(getUserInput);
+
+              if (helpers.isPromise(__result)) {
+                // turn promise into an observable
+                __result = Rx.Observable.fromPromise(__result);
+              }
+            }
+
+            if (!__result || typeof __result.subscribe !== 'function') {
+              // make sure result is an observable
+              __result = Rx.Observable.of(null);
+            }
+          } catch (e) {
+            // something threw an uncaught error
+            // we catch here and wrap it in an observable
+            __result = Rx.Observable.throw(e);
+          }
+          return __result
+            .timeout(testTimeout)
+            .map(() => {
+              // we don't need the result of a promise/observable/cb here
+              // all data asserts should happen further up the chain
+              // mark test as passing
+              newTest.pass = true;
+              return newTest;
+            })
+            .catch(err => {
+              // we catch the error here to prevent the error from bubbling up
+              // and collapsing the pipe
+              let message = err.message || '';
+              const assertIndex = message.indexOf(': expected');
+              if (assertIndex !== -1) {
+                message = message.slice(0, assertIndex);
+              }
+              message = message.replace(/<code>(.*?)<\/code>/g, '$1');
+              newTest.err = err.message + '\n' + err.stack;
+              newTest.stack = err.stack;
+              newTest.message = message;
+              // RxJS catch expects an observable as a return
+              return Rx.Observable.of(newTest);
+            });
+        })
+        // gather tests back into an array
+        .toArray()
+    );
+  };
+
+  // notify that the window methods are ready to run
+  frameReady.next({ checkChallengePayload });
+});
diff --git a/packages/learn/src/components/Header/index.js b/packages/learn/src/components/Header/index.js
index d9954d5800..d0eb5617ec 100644
--- a/packages/learn/src/components/Header/index.js
+++ b/packages/learn/src/components/Header/index.js
@@ -4,25 +4,24 @@ import Link from 'gatsby-link';
 const Header = () => (
   <div
     style={{
-      background: 'rebeccapurple',
+      background: '#006400',
       marginBottom: '1.45rem'
     }}
-  >
+    >
     <div
       style={{
         margin: '0 auto',
-        maxWidth: 960,
-        padding: '1.45rem 1.0875rem'
+        maxWidth: 960
       }}
-    >
+      >
       <h1 style={{ margin: 0 }}>
         <Link
-          to="/"
           style={{
             color: 'white',
             textDecoration: 'none'
           }}
-        >
+          to='/'
+          >
           Gatsby
         </Link>
       </h1>
diff --git a/packages/learn/src/components/Map/Map.js b/packages/learn/src/components/Map/Map.js
new file mode 100644
index 0000000000..02c208103b
--- /dev/null
+++ b/packages/learn/src/components/Map/Map.js
@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import uniq from 'lodash/uniq';
+
+import SuperBlock from './components/SuperBlock';
+import Spacer from '../util/Spacer';
+
+import './map.css';
+import { ChallengeNode } from '../../redux/propTypes';
+
+const propTypes = {
+  nodes: PropTypes.arrayOf(ChallengeNode)
+};
+
+class ShowMap extends PureComponent {
+  renderSuperBlocks = superBlocks => {
+    const { nodes } = this.props;
+    return superBlocks.map(superBlock => (
+      <SuperBlock key={superBlock} nodes={nodes} superBlock={superBlock} />
+    ));
+  };
+
+  render() {
+    const { nodes } = this.props;
+    const superBlocks = uniq(nodes.map(({ superBlock }) => superBlock));
+    return (
+      <ul>
+        {this.renderSuperBlocks(superBlocks)}
+        <Spacer />
+      </ul>
+    );
+  }
+}
+
+ShowMap.displayName = 'Map';
+ShowMap.propTypes = propTypes;
+
+export default ShowMap;
diff --git a/packages/learn/src/components/Map/components/Block.js b/packages/learn/src/components/Map/components/Block.js
new file mode 100644
index 0000000000..2d89a3ace7
--- /dev/null
+++ b/packages/learn/src/components/Map/components/Block.js
@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import Link from 'gatsby-link';
+
+import { makeExpandedBlockSelector, toggleBlock } from '../redux';
+import Caret from '../../icons/Caret';
+
+const mapStateToProps = (state, ownProps) => {
+  const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
+
+  return createSelector(expandedSelector, isExpanded => ({ isExpanded }))(
+    state
+  );
+};
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ toggleBlock }, dispatch);
+
+const propTypes = {
+  blockDashedName: PropTypes.string,
+  challenges: PropTypes.array,
+  isExpanded: PropTypes.bool,
+  toggleBlock: PropTypes.func.isRequired
+};
+
+class Block extends PureComponent {
+  renderChallenges = challenges =>
+    challenges.map(challenge => (
+      <li className='map-challenge-title' key={challenge.dashedName}>
+        <Link to={challenge.fields.slug}>{challenge.title}</Link>
+      </li>
+    ));
+
+  render() {
+    const { blockDashedName, challenges, isExpanded, toggleBlock } = this.props;
+    const { blockName } = challenges[0].fields;
+    return (
+      <li className={`block ${isExpanded ? 'open' : ''}`}>
+        <div className='map-title' onClick={() => toggleBlock(blockDashedName)}>
+          <Caret />
+          <h5>{blockName}</h5>
+        </div>
+        <ul>{isExpanded ? this.renderChallenges(challenges) : null}</ul>
+      </li>
+    );
+  }
+}
+
+Block.displayName = 'Block';
+Block.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Block);
diff --git a/packages/learn/src/components/Map/components/SuperBlock.js b/packages/learn/src/components/Map/components/SuperBlock.js
new file mode 100644
index 0000000000..496c984d5c
--- /dev/null
+++ b/packages/learn/src/components/Map/components/SuperBlock.js
@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import uniq from 'lodash/uniq';
+
+import Block from './Block';
+
+import { makeExpandedSuperBlockSelector, toggleSuperBlock } from '../redux';
+import Caret from '../../icons/Caret';
+import { ChallengeNode } from '../../../redux/propTypes';
+
+const mapStateToProps = (state, ownProps) => {
+  const expandedSelector = makeExpandedSuperBlockSelector(ownProps.superBlock);
+
+  return createSelector(expandedSelector, isExpanded => ({ isExpanded }))(
+    state
+  );
+};
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      toggleSuperBlock
+    },
+    dispatch
+  );
+}
+
+const propTypes = {
+  isExpanded: PropTypes.bool,
+  nodes: PropTypes.arrayOf(ChallengeNode),
+  superBlock: PropTypes.string,
+  toggleSuperBlock: PropTypes.func.isRequired
+};
+
+class SuperBlock extends PureComponent {
+  renderBlock = superBlock => {
+    const { nodes } = this.props;
+    const blocksForSuperBlock = nodes.filter(
+      node => node.superBlock === superBlock
+    );
+    const blockDashedNames = uniq(
+      blocksForSuperBlock.map(({ block }) => block)
+    );
+
+    return (
+      <ul>
+        {blockDashedNames.map(blockDashedName => (
+          <Block
+            blockDashedName={blockDashedName}
+            challenges={blocksForSuperBlock.filter(
+              node => node.block === blockDashedName
+            )}
+            key={blockDashedName}
+          />
+        ))}
+      </ul>
+    );
+  };
+  render() {
+    const { superBlock, isExpanded, toggleSuperBlock } = this.props;
+    return (
+      <li className={`superblock ${isExpanded ? 'open' : ''}`}>
+        <div className='map-title' onClick={() => toggleSuperBlock(superBlock)}>
+          <Caret />
+          <h4>{superBlock}</h4>
+        </div>
+        {isExpanded ? this.renderBlock(superBlock) : null}
+      </li>
+    );
+  }
+}
+
+SuperBlock.displayName = 'SuperBlock';
+SuperBlock.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(SuperBlock);
diff --git a/packages/learn/src/components/Map/index.js b/packages/learn/src/components/Map/index.js
new file mode 100644
index 0000000000..e3ad23bf41
--- /dev/null
+++ b/packages/learn/src/components/Map/index.js
@@ -0,0 +1 @@
+export default from './Map.js';
diff --git a/packages/learn/src/components/Map/map.css b/packages/learn/src/components/Map/map.css
new file mode 100644
index 0000000000..17487bda6c
--- /dev/null
+++ b/packages/learn/src/components/Map/map.css
@@ -0,0 +1,23 @@
+aside#map {
+  height: 100%;
+  max-height: calc(100vh - (45px + 1.45rem));
+}
+
+aside#map ul {
+  list-style: none;
+  color: #006400;
+}
+
+.map-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.map-title > svg {
+  width: 14px;
+  margin-right: 5px;
+}
+
+li.open > .map-title svg {
+  transform: rotate(90deg);
+}
diff --git a/packages/learn/src/components/Map/redux/index.js b/packages/learn/src/components/Map/redux/index.js
new file mode 100644
index 0000000000..5872cf8a9b
--- /dev/null
+++ b/packages/learn/src/components/Map/redux/index.js
@@ -0,0 +1,50 @@
+import { createAction, handleActions } from 'redux-actions';
+
+import { createTypes } from '../../../../utils/stateManagment';
+
+const ns = 'map';
+
+export const getNS = () => ns;
+
+const initialState = {
+  expandedState: {
+    superBlock: {},
+    block: {}
+  }
+};
+
+const types = createTypes(['toggleSuperBlock', 'toggleBlock'], ns);
+
+export const toggleBlock = createAction(types.toggleBlock);
+export const toggleSuperBlock = createAction(types.toggleSuperBlock);
+
+export const makeExpandedSuperBlockSelector = superBlock => state =>
+  !!state[ns].expandedState.superBlock[superBlock];
+export const makeExpandedBlockSelector = block => state =>
+  !!state[ns].expandedState.block[block];
+
+export const reducer = handleActions(
+  {
+    [types.toggleBlock]: (state, { payload }) => ({
+      ...state,
+      expandedState: {
+        ...state.expandedState,
+        block: {
+          ...state.expandedState.block,
+          [payload]: !state.expandedState.block[payload]
+        }
+      }
+    }),
+    [types.toggleSuperBlock]: (state, { payload }) => ({
+      ...state,
+      expandedState: {
+        ...state.expandedState,
+        superBlock: {
+          ...state.expandedState.superBlock,
+          [payload]: !state.expandedState.superBlock[payload]
+        }
+      }
+    })
+  },
+  initialState
+);
diff --git a/packages/learn/src/components/icons/Caret.js b/packages/learn/src/components/icons/Caret.js
new file mode 100644
index 0000000000..1a4e3a0239
--- /dev/null
+++ b/packages/learn/src/components/icons/Caret.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Caret() {
+  return (
+    <svg viewBox='0 0 100 100' width='25px'>
+      <polygon
+        points='-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196'
+        style={{ stroke: '#aaa', fill: '#aaa', strokeWidth: '1px' }}
+        transform={
+          'matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)'
+        }
+      />
+    </svg>
+  );
+}
+
+Caret.displayName = 'Caret';
+
+export default Caret;
diff --git a/packages/learn/src/components/util/Spacer.js b/packages/learn/src/components/util/Spacer.js
new file mode 100644
index 0000000000..537b787560
--- /dev/null
+++ b/packages/learn/src/components/util/Spacer.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './spacer.css';
+
+function Spacer() {
+  return <div className='util-spacer' />;
+}
+
+Spacer.displayName = 'Spacer';
+
+export default Spacer;
diff --git a/packages/learn/src/components/util/spacer.css b/packages/learn/src/components/util/spacer.css
new file mode 100644
index 0000000000..111b408a2e
--- /dev/null
+++ b/packages/learn/src/components/util/spacer.css
@@ -0,0 +1,3 @@
+.util-spacer {
+  margin: 5px 0px;
+}
diff --git a/packages/learn/src/layouts/index.css b/packages/learn/src/layouts/global.css
similarity index 94%
rename from packages/learn/src/layouts/index.css
rename to packages/learn/src/layouts/global.css
index e485487be9..f77b7f7b65 100644
--- a/packages/learn/src/layouts/index.css
+++ b/packages/learn/src/layouts/global.css
@@ -1,11 +1,15 @@
 html {
-  font-family: sans-serif;
+  font-family: 'Lato', sans-serif;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
 body {
   margin: 0;
 }
+html, body, .full-height {
+  min-height: 100% !important;
+  height: 100%;
+}
 article,
 aside,
 details,
@@ -198,7 +202,7 @@ html {
 }
 body {
   color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
+  font-family: 'Lato', georgia, serif;
   font-weight: normal;
   word-wrap: break-word;
   font-kerning: normal;
@@ -245,7 +249,7 @@ h2 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
@@ -262,7 +266,7 @@ h3 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
@@ -279,7 +283,7 @@ h4 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
@@ -296,7 +300,7 @@ h5 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
@@ -313,7 +317,7 @@ h6 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
diff --git a/packages/learn/src/layouts/index.js b/packages/learn/src/layouts/index.js
index 618c48921d..d4f5669595 100644
--- a/packages/learn/src/layouts/index.js
+++ b/packages/learn/src/layouts/index.js
@@ -1,35 +1,73 @@
-import React from 'react';
+/* global graphql */
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 
-import Header from '../components/Header';
-import './index.css';
+import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 
-const TemplateWrapper = ({ children }) => (
-  <div>
+import { AllChallengeNode } from '../redux/propTypes';
+
+import Header from '../components/Header';
+import Map from '../components/Map';
+
+import '../../static/bootstrap3/css/bootstrap.min.css';
+import './global.css';
+import 'react-reflex/styles.css';
+import './layout.css';
+
+const Layout = ({ children, data: { allChallengeNode: { edges } } }) => (
+  <Fragment>
     <Helmet
-      title="Gatsby Default Starter"
       meta={[
         { name: 'description', content: 'Sample' },
         { name: 'keywords', content: 'sample, something' }
       ]}
     />
     <Header />
-    <div
-      style={{
-        margin: '0 auto',
-        maxWidth: 960,
-        padding: '0px 1.0875rem 1.45rem',
-        paddingTop: 0
-      }}
-    >
-      {children()}
-    </div>
-  </div>
+    <ReflexContainer className='app-wrapper' orientation='vertical'>
+      <ReflexElement flex={0.2} minSize={100}>
+        <aside id='map'>
+          <Map
+            nodes={edges
+              .map(({ node }) => node)
+              .filter(({ isPrivate }) => !isPrivate)}
+          />
+        </aside>
+      </ReflexElement>
+
+      <ReflexSplitter />
+
+      <ReflexElement>
+        <main>{children()}</main>
+      </ReflexElement>
+    </ReflexContainer>
+  </Fragment>
 );
 
-TemplateWrapper.propTypes = {
-  children: PropTypes.func
+Layout.propTypes = {
+  children: PropTypes.func,
+  data: AllChallengeNode
 };
 
-export default TemplateWrapper;
+export default Layout;
+
+export const query = graphql`
+  query LayoutQuery {
+    allChallengeNode(sort: { fields: [superOrder, order, suborder] }) {
+      edges {
+        node {
+          fields {
+            slug
+            blockName
+          }
+          block
+          title
+          isRequired
+          isPrivate
+          superBlock
+          dashedName
+        }
+      }
+    }
+  }
+`;
diff --git a/packages/learn/src/layouts/layout.css b/packages/learn/src/layouts/layout.css
new file mode 100644
index 0000000000..5c39e60fc6
--- /dev/null
+++ b/packages/learn/src/layouts/layout.css
@@ -0,0 +1,25 @@
+.app-wrapper {
+  min-height: calc(100vh - (45px + 1.45rem));
+}
+
+main {
+  height: 100%;
+}
+
+.reflex-layout.vertical > .reflex-splitter,
+.reflex-layout > .reflex-element {
+  /*
+    Note(Bouncey): removing height: 100% makes the element 100% high ¯\_(ツ)_/¯
+  */
+  height: auto;
+}
+
+.reflex-layout.vertical > .reflex-splitter:hover {
+ border-left: 2px solid #ccc !important;
+ border-right: 2px solid #ccc !important;
+}
+
+.reflex-layout.vertical > .reflex-splitter,  {
+  border-left: 2px solid #c6c6c6;
+  border-right: 2px solid #c6c6c6;
+}
\ No newline at end of file
diff --git a/packages/learn/src/pages/apis-and-microservices/basic-node-and-express/index.md b/packages/learn/src/pages/apis-and-microservices/basic-node-and-express/index.md
new file mode 100644
index 0000000000..ba8ddcce8b
--- /dev/null
+++ b/packages/learn/src/pages/apis-and-microservices/basic-node-and-express/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Basic Node and Express Challenges
+block: Basic Node and Express
+---
+## Introduction to the Basic Node and Express Challenges
+
+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&mdash;small, independent programs&mdash;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.
+Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.<br>Start this project on Glitch using <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-express/'>this link</a> or clone <a href='https://github.com/freeCodeCamp/boilerplate-express/'>this repository</a> on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!
+
diff --git a/packages/learn/src/pages/apis-and-microservices/managing-packages-with-npm/index.md b/packages/learn/src/pages/apis-and-microservices/managing-packages-with-npm/index.md
new file mode 100644
index 0000000000..6bcade9ac7
--- /dev/null
+++ b/packages/learn/src/pages/apis-and-microservices/managing-packages-with-npm/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Managing Packages with npm Challenges
+block: Managing Packages with Npm
+---
+## Introduction to the Managing Packages with npm Challenges
+
+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.
+Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.<br>Start this project on Glitch using <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-npm'>this link</a> or clone <a href='https://github.com/freeCodeCamp/boilerplate-npm/'>this repository</a> on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!
+
diff --git a/packages/learn/src/pages/apis-and-microservices/mongodb-and-mongoose/index.md b/packages/learn/src/pages/apis-and-microservices/mongodb-and-mongoose/index.md
new file mode 100644
index 0000000000..86a7f513c3
--- /dev/null
+++ b/packages/learn/src/pages/apis-and-microservices/mongodb-and-mongoose/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the MongoDB and Mongoose Challenges
+block: MongoDB and Mongoose
+---
+## Introduction to the MongoDB and Mongoose Challenges
+
+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.
+Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing.<br>Start this project on Glitch using <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mongomongoose/'>this link</a> or clone <a href='https://github.com/freeCodeCamp/boilerplate-mongomongoose/'>this repository</a> on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!
+
diff --git a/packages/learn/src/pages/data-visualization/data-visualization-with-d3/index.md b/packages/learn/src/pages/data-visualization/data-visualization-with-d3/index.md
new file mode 100644
index 0000000000..6a46dfcc25
--- /dev/null
+++ b/packages/learn/src/pages/data-visualization/data-visualization-with-d3/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the Data Visualization with D3 Challenges
+block: Data Visualization with D3
+---
+## Introduction to the Data Visualization with D3 Challenges
+
+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.
+
diff --git a/packages/learn/src/pages/data-visualization/json-apis-and-ajax/index.md b/packages/learn/src/pages/data-visualization/json-apis-and-ajax/index.md
new file mode 100644
index 0000000000..37c2271edb
--- /dev/null
+++ b/packages/learn/src/pages/data-visualization/json-apis-and-ajax/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the JSON APIs and AJAX Challenges
+block: JSON APIs and Ajax
+---
+## Introduction to the JSON APIs and AJAX Challenges
+
+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 freeCodeCamp API.
+
diff --git a/packages/learn/src/pages/front-end-libraries/bootstrap/index.md b/packages/learn/src/pages/front-end-libraries/bootstrap/index.md
new file mode 100644
index 0000000000..3eef00d8cf
--- /dev/null
+++ b/packages/learn/src/pages/front-end-libraries/bootstrap/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Bootstrap Challenges
+block: Bootstrap
+---
+## Introduction to the Bootstrap Challenges
+
+Bootstrap is a front-end framework used to design responsive web pages and web applications. It takes a mobile-first approach to web development. Bootstrap includes pre-built CSS styles and classes, plus some JavaScript functionality.
+Bootstrap uses a responsive 12 column grid layout and has design templates for:<br><br><ul><li>buttons</li><li>images</li><li>tables</li><li>forms</li><li>navigation</li></ul><br>This section introduces some of the ways to use Bootstrap in your web projects.
+
diff --git a/packages/learn/src/pages/front-end-libraries/jquery/index.md b/packages/learn/src/pages/front-end-libraries/jquery/index.md
new file mode 100644
index 0000000000..9b43ae9da9
--- /dev/null
+++ b/packages/learn/src/pages/front-end-libraries/jquery/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to jQuery
+block: jQuery
+---
+## Introduction to jQuery
+
+jQuery is one of the many libraries for JavaScript. It is designed to simplify scripting done on the client side.
+jQuery's most recognizable characteristic is its dollar sign (<code>$</code>) syntax. With it, you can easily manipulate elements, create animations and handle input events.
+
diff --git a/packages/learn/src/pages/front-end-libraries/sass/index.md b/packages/learn/src/pages/front-end-libraries/sass/index.md
new file mode 100644
index 0000000000..2e0c2f88cc
--- /dev/null
+++ b/packages/learn/src/pages/front-end-libraries/sass/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the Sass Challenges
+block: Sass
+---
+## Introduction to the Sass Challenges
+
+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>There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout these challenges, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. Files using this syntax have the .scss extension.<br><br>The second and older syntax, known as the indented syntax (or sometimes just "Sass"), uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.<br><br>This section introduces the basic features of Sass.
+
diff --git a/packages/learn/src/pages/index.css b/packages/learn/src/pages/index.css
new file mode 100644
index 0000000000..9f8aec7aae
--- /dev/null
+++ b/packages/learn/src/pages/index.css
@@ -0,0 +1,7 @@
+.index-page-wrapper {
+  display: flex;
+  /* width: calc(100vw - 340px); */
+  flex-direction: column;
+  align-items: center;
+
+}
\ No newline at end of file
diff --git a/packages/learn/src/pages/index.js b/packages/learn/src/pages/index.js
index c2d3fc6e9b..6468cdedea 100644
--- a/packages/learn/src/pages/index.js
+++ b/packages/learn/src/pages/index.js
@@ -1,13 +1,62 @@
+/* global graphql */
 import React from 'react';
+import PropTypes from 'prop-types';
 import Link from 'gatsby-link';
+import Helmet from 'react-helmet';
 
-const IndexPage = () => (
-  <div>
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <Link to="/page-2/">Go to page 2</Link>
+import { ChallengeNode } from '../redux/propTypes';
+
+import './index.css';
+
+const propTypes = {
+  data: PropTypes.shape({
+    challengeNode: ChallengeNode
+  })
+};
+
+const IndexPage = ({
+  data: { challengeNode: { title, fields: { slug, blockName } } }
+}) => (
+  <div className='index-page-wrapper'>
+    <Helmet title='Welcome to learn.freeCodeCamp!' />
+    <h1>Welcome to learn.freeCodeCamp.org</h1>
+    <p>
+      Check out the lesson map on the left. We have thousands of coding lessons
+      to help you improve your skills.
+    </p>
+    <p>
+      You can earn verified certificates by completing certificate's 5 required
+      projects.
+    </p>
+    <p>
+      {'And yes - all of this is 100% free, thanks to the thousands of ' +
+        'campers who '}
+      <a href='https://donate.freecodecamp.org' target='_blank'>
+        donate
+      </a>{' '}
+      to our nonprofit.
+    </p>
+    <h3>Not sure where to start?</h3>
+    <p>
+      We recommend you start at the beginning{' '}
+      <Link to={slug}>{`${blockName} -> ${title}`}</Link>
+    </p>
   </div>
 );
 
+IndexPage.displayName = 'IndexPage';
+IndexPage.propTypes = propTypes;
+
 export default IndexPage;
+
+export const query = graphql`
+  query FirstChallenge {
+    challengeNode(order: { eq: 0 }, suborder: { eq: 1 }) {
+      title
+      fields {
+        slug
+        blockName
+      }
+    }
+  }
+`;
diff --git a/packages/learn/src/pages/information-security-and-quality-assurance/information-security-with-helmetjs/index.md b/packages/learn/src/pages/information-security-and-quality-assurance/information-security-with-helmetjs/index.md
new file mode 100644
index 0000000000..85c25bc770
--- /dev/null
+++ b/packages/learn/src/pages/information-security-and-quality-assurance/information-security-with-helmetjs/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to Information Security with HelmetJS Challenges
+block: Information Security with HelmetJS
+---
+## Introduction to Information Security with HelmetJS Challenges
+
+HelmetJS is a type of middleware for Express-based applications that automatically sets HTTP headers to prevent sensitive information from unintentially being passed between the server and client. While HelmetJS does not account for all situations, it does include support for common ones like Content Security Policy, XSS Filtering, and HTTP Strict Transport Security, among others. HelmetJS can be installed on an Express project from npm, after which each layer of protection can be configured to best fit the project.<br><br>Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing.<br>Start this project on Glitch using <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>this link</a> or clone <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>this repository</a> on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!
+
diff --git a/packages/learn/src/pages/javascript-algorithms-and-data-structures/basic-data-structures/index.md b/packages/learn/src/pages/javascript-algorithms-and-data-structures/basic-data-structures/index.md
new file mode 100644
index 0000000000..2209582552
--- /dev/null
+++ b/packages/learn/src/pages/javascript-algorithms-and-data-structures/basic-data-structures/index.md
@@ -0,0 +1,11 @@
+---
+title: Introduction to Objects
+block: Basic Data Structures
+---
+## Introduction to Objects
+
+The next data structure we will discuss is the JavaScript <dfn>object</dfn>. Like arrays, objects are a fundamental part of JavaScript. However, it is probably safe to say that objects surpass arrays in flexibility, usefulness and in their overall importance to the language &mdash; in fact, you may have heard this line before: 'In JavaScript, everything is an object.'<br><br>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 <dfn>key-value pair</dfn> stores, a commonly used data structure across almost all programming languages. Here, we will confine our discussion to JavaScript objects in this capacity.
+Key-value pair data structures go by different names depending on the language and the specific details of the data structure. The terms <dfn>dictionary</dfn>, <dfn>map</dfn>, and <dfn>hash table</dfn> all refer to the notion of a data structure in which specific keys, or properties, are mapped to specific values.<br><br>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; properties can be nested to an arbitrary depth, and values can be anything, including arrays and even other objects.<br><br>Largely due to this flexibility, objects are also the foundation for <dfn>JavaScript Object Notation</dfn>, or <dfn>JSON</dfn>, which is a widely used method of sending data across the web.
+Another powerful advantage of key-value pair data structures is <dfn>constant lookup time</dfn>. What this means, is that 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, you could still retrieve property values or check if a key exists in the same amount of time.<br><br>The reason for this fast lookup time, is that internally, the object is storing properties using a 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 <strong>performant access to flexibly structured data make key-value stores very attractive data structures useful in a wide variety of settings</strong>.
+<br><br>In JavaScript, objects are written as comma-separated lists of key-value pairs, wrapped in curly brackets, with each key and its assigned value separated by a colon:<br> <code>{ key1: 'val-1', key2: 'val-2' }</code><br><br>In the next few challenges, we will examine JavaScript objects more closely, and take a look at <dfn>methods</dfn> and techniques that allow us to access, store, and manipulate an object's data.<br><br>Note that throughout the scope of this discussion, and in general when considering JavaScript objects, the terms <dfn>key</dfn> and <dfn>property</dfn> will be used interchangeably.
+
diff --git a/packages/learn/src/pages/javascript-algorithms-and-data-structures/basic-javascript/index.md b/packages/learn/src/pages/javascript-algorithms-and-data-structures/basic-javascript/index.md
new file mode 100644
index 0000000000..29694a162d
--- /dev/null
+++ b/packages/learn/src/pages/javascript-algorithms-and-data-structures/basic-javascript/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to JavaScript
+block: Basic JavaScript
+---
+## Introduction to JavaScript
+
+JavaScript is a high-level programming language that all modern web browsers support. It is also one of the core technologies of the web, along with HTML and CSS that you may have learned previously. This section will cover basic programming concepts in JavaScript, which range from variables and arithemtic to objects and loops.
+
diff --git a/packages/learn/src/pages/javascript-algorithms-and-data-structures/debugging/index.md b/packages/learn/src/pages/javascript-algorithms-and-data-structures/debugging/index.md
new file mode 100644
index 0000000000..9d8fcec2c2
--- /dev/null
+++ b/packages/learn/src/pages/javascript-algorithms-and-data-structures/debugging/index.md
@@ -0,0 +1,10 @@
+---
+title: Introduction to the Debugging Challenges
+block: Debugging
+---
+## Introduction to the Debugging Challenges
+
+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.
+
diff --git a/packages/learn/src/pages/javascript-algorithms-and-data-structures/es6/index.md b/packages/learn/src/pages/javascript-algorithms-and-data-structures/es6/index.md
new file mode 100644
index 0000000000..f2f40bfd58
--- /dev/null
+++ b/packages/learn/src/pages/javascript-algorithms-and-data-structures/es6/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the ES6 Challenges
+block: ES6
+---
+## Introduction to the ES6 Challenges
+
+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 freeCodeCamp 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.
+
diff --git a/packages/learn/src/pages/javascript-algorithms-and-data-structures/functional-programming/index.md b/packages/learn/src/pages/javascript-algorithms-and-data-structures/functional-programming/index.md
new file mode 100644
index 0000000000..1e7083476f
--- /dev/null
+++ b/packages/learn/src/pages/javascript-algorithms-and-data-structures/functional-programming/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the Functional Programming Challenges
+block: Functional Programming
+---
+## Introduction to the Functional Programming Challenges
+
+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.
+
diff --git a/packages/learn/src/pages/javascript-algorithms-and-data-structures/object-oriented-programming/index.md b/packages/learn/src/pages/javascript-algorithms-and-data-structures/object-oriented-programming/index.md
new file mode 100644
index 0000000000..e17257ea5c
--- /dev/null
+++ b/packages/learn/src/pages/javascript-algorithms-and-data-structures/object-oriented-programming/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the Object Oriented Programming Challenges
+block: Object Oriented Programming
+---
+## Introduction to the Object Oriented Programming Challenges
+
+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.
+
diff --git a/packages/learn/src/pages/javascript-algorithms-and-data-structures/regular-expressions/index.md b/packages/learn/src/pages/javascript-algorithms-and-data-structures/regular-expressions/index.md
new file mode 100644
index 0000000000..cdf9a11c53
--- /dev/null
+++ b/packages/learn/src/pages/javascript-algorithms-and-data-structures/regular-expressions/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the Regular Expression Challenges
+block: Regular Expressions
+---
+## Introduction to the Regular Expression Challenges
+
+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.
+
diff --git a/packages/learn/src/pages/page-2.js b/packages/learn/src/pages/page-2.js
deleted file mode 100644
index 3ade843827..0000000000
--- a/packages/learn/src/pages/page-2.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import Link from 'gatsby-link';
-
-const SecondPage = () => (
-  <div>
-    <h1>Hi from the second page</h1>
-    <p>Welcome to page 2</p>
-    <Link to="/">Go back to the homepage</Link>
-  </div>
-);
-
-export default SecondPage;
diff --git a/packages/learn/src/pages/responsive-web-design/applied-accessibility/index.md b/packages/learn/src/pages/responsive-web-design/applied-accessibility/index.md
new file mode 100644
index 0000000000..bcdde81b24
--- /dev/null
+++ b/packages/learn/src/pages/responsive-web-design/applied-accessibility/index.md
@@ -0,0 +1,10 @@
+---
+title: Introduction to the Applied Accessibility Challenges
+block: Applied Accessibility
+---
+## Introduction to the Applied Accessibility Challenges
+
+"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.
+
diff --git a/packages/learn/src/pages/responsive-web-design/applied-visual-design/index.md b/packages/learn/src/pages/responsive-web-design/applied-visual-design/index.md
new file mode 100644
index 0000000000..4699ca25f7
--- /dev/null
+++ b/packages/learn/src/pages/responsive-web-design/applied-visual-design/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the Applied Visual Design Challenges
+block: Applied Visual Design
+---
+## Introduction to the Applied Visual Design Challenges
+
+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.
+
diff --git a/packages/learn/src/pages/responsive-web-design/basic-css/index.md b/packages/learn/src/pages/responsive-web-design/basic-css/index.md
new file mode 100644
index 0000000000..5fe4345ef0
--- /dev/null
+++ b/packages/learn/src/pages/responsive-web-design/basic-css/index.md
@@ -0,0 +1,11 @@
+---
+title: Introduction to Basic CSS
+block: Basic CSS
+---
+## Introduction to Basic CSS
+
+Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.<br><br>Note that CSS is case-sensitive so be careful with your capitalization.
+CSS has been adopted by all major browsers and allows you to control:<br><ul><li>color</li><li>fonts</li><li>positioning</li><li>spacing</li><li>sizing</li><li>decorations</li><li>transitions</li></ul>
+There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the <code>style</code> attribute. Alternatively, you can place CSS rules within <code>style</code> tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.
+The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.<br><br>In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.
+
diff --git a/packages/learn/src/pages/responsive-web-design/css-flexbox/index.md b/packages/learn/src/pages/responsive-web-design/css-flexbox/index.md
new file mode 100644
index 0000000000..28d417ef12
--- /dev/null
+++ b/packages/learn/src/pages/responsive-web-design/css-flexbox/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the CSS Flexbox Challenges
+block: CSS Flexbox
+---
+## Introduction to the CSS Flexbox Challenges
+
+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.
+
diff --git a/packages/learn/src/pages/responsive-web-design/css-grid/index.md b/packages/learn/src/pages/responsive-web-design/css-grid/index.md
new file mode 100644
index 0000000000..bb44356db0
--- /dev/null
+++ b/packages/learn/src/pages/responsive-web-design/css-grid/index.md
@@ -0,0 +1,8 @@
+---
+title: Introduction to the CSS Grid Challenges
+block: CSS Grid
+---
+## Introduction to the CSS Grid Challenges
+
+<dfn>CSS Grid</dfn> helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid.
+
diff --git a/packages/learn/src/pages/responsive-web-design/responsive-web-design-principles/index.md b/packages/learn/src/pages/responsive-web-design/responsive-web-design-principles/index.md
new file mode 100644
index 0000000000..ce9cf9d26e
--- /dev/null
+++ b/packages/learn/src/pages/responsive-web-design/responsive-web-design-principles/index.md
@@ -0,0 +1,11 @@
+---
+title: Introduction to the Responsive Web Design Challenges
+block: Responsive Web Design Principles
+---
+## Introduction to the Responsive Web Design Challenges
+
+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.
+
diff --git a/packages/learn/src/redux/propTypes.js b/packages/learn/src/redux/propTypes.js
new file mode 100644
index 0000000000..35d41f6681
--- /dev/null
+++ b/packages/learn/src/redux/propTypes.js
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+
+const FileType = PropTypes.shape({
+  key: PropTypes.string,
+  ext: PropTypes.string,
+  name: PropTypes.string,
+  contents: PropTypes.string,
+  head: PropTypes.string,
+  tail: PropTypes.string
+});
+
+export const ChallengeNode = PropTypes.shape({
+  block: PropTypes.string,
+  challengeType: PropTypes.number,
+  dashedName: PropTypes.string,
+  description: PropTypes.arrayOf(PropTypes.string),
+  files: PropTypes.shape({
+    indexhtml: FileType,
+    indexjs: FileType
+  }),
+  fields: PropTypes.shape({
+    slug: PropTypes.string,
+    blockName: PropTypes.string
+  }),
+  guideUrl: PropTypes.string,
+  head: PropTypes.arrayOf(PropTypes.string),
+  helpRoom: PropTypes.string,
+  suborder: PropTypes.number,
+  isBeta: PropTypes.bool,
+  isComingSoon: PropTypes.bool,
+  isLocked: PropTypes.bool,
+  isPrivate: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string,
+  order: PropTypes.number,
+  superOrder: PropTypes.number,
+  superBlock: PropTypes.string,
+  tail: PropTypes.arrayOf(PropTypes.string),
+  time: PropTypes.string,
+  title: PropTypes.string
+});
+
+export const AllChallengeNode = PropTypes.shape({
+  edges: PropTypes.arrayOf(
+    PropTypes.shape({
+      node: ChallengeNode
+    })
+  )
+});
diff --git a/packages/learn/src/redux/store.js b/packages/learn/src/redux/store.js
new file mode 100644
index 0000000000..a6dcb6393b
--- /dev/null
+++ b/packages/learn/src/redux/store.js
@@ -0,0 +1,30 @@
+import {
+  createStore as reduxCreateStore,
+  combineReducers,
+  applyMiddleware
+} from 'redux';
+import { combineEpics, createEpicMiddleware } from 'redux-observable';
+import { routerReducer as router, routerMiddleware } from 'react-router-redux';
+
+import { reducer as challenge, epics } from '../templates/Challenges/redux';
+import { reducer as map } from '../components/Map/redux';
+
+const rootReducer = combineReducers({
+  challenge,
+  map,
+  router
+});
+
+const rootEpic = combineEpics(...epics);
+const epicMiddleware = createEpicMiddleware(rootEpic, {
+  dependencies: {
+    window: typeof window !== 'undefined' ? window : {},
+    document: typeof window !== 'undefined' ? document : {}
+  }
+});
+
+export const createStore = history =>
+  reduxCreateStore(
+    rootReducer,
+    applyMiddleware(epicMiddleware, routerMiddleware(history))
+  );
diff --git a/packages/learn/src/templates/Challenges/icons/GreenPass.js b/packages/learn/src/templates/Challenges/icons/GreenPass.js
new file mode 100644
index 0000000000..d78d29a563
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/icons/GreenPass.js
@@ -0,0 +1,57 @@
+import React from 'react';
+
+const propTypes = {};
+
+function GreenPass() {
+  return (
+    <svg
+      height='50'
+      viewBox='0 0 200 200'
+      width='50'
+      xmlns='http://www.w3.org/2000/svg'
+      >
+      <g>
+        <title>Test Passed</title>
+        <circle
+          cx='100'
+          cy='99'
+          fill='#006400'
+          r='95'
+          stroke='#006400'
+          strokeDasharray='null'
+          strokeLinecap='null'
+          strokeLinejoin='null'
+        />
+        <rect
+          fill='#ffffff'
+          height='30'
+          stroke='#ffffff'
+          strokeDasharray='null'
+          strokeLinecap='null'
+          strokeLinejoin='null'
+          transform='rotate(-45, 120, 106.321)'
+          width='128.85878'
+          x='55.57059'
+          y='91.32089'
+        />
+        <rect
+          fill='#ffffff'
+          height='30'
+          stroke='#ffffff'
+          strokeDasharray='null'
+          strokeLinecap='null'
+          strokeLinejoin='null'
+          transform='rotate(45, 66.75, 123.75)'
+          width='80.66548'
+          x='26.41726'
+          y='108.75'
+        />
+      </g>
+    </svg>
+  );
+}
+
+GreenPass.displayName = 'GreenPass';
+GreenPass.propTypes = propTypes;
+
+export default GreenPass;
diff --git a/packages/learn/src/templates/Challenges/icons/RedFail.js b/packages/learn/src/templates/Challenges/icons/RedFail.js
new file mode 100644
index 0000000000..2b191b8a71
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/icons/RedFail.js
@@ -0,0 +1,57 @@
+import React from 'react';
+
+const propTypes = {};
+
+function RedFail() {
+  return (
+    <svg
+      height='50'
+      viewBox='0 0 200 200'
+      width='50'
+      xmlns='http://www.w3.org/2000/svg'
+      >
+      <g>
+        <title>Test failed</title>
+        <circle
+          cx='100'
+          cy='99'
+          fill='#ff0000'
+          r='95'
+          stroke='#ff0000'
+          strokeDasharray='null'
+          strokeLinecap='null'
+          strokeLinejoin='null'
+        />
+        <rect
+          fill='#ffffff'
+          height='30'
+          stroke='#ffffff'
+          strokeDasharray='null'
+          strokeLinecap='null'
+          strokeLinejoin='null'
+          transform='rotate(-45, 100, 103.321)'
+          width='128.85878'
+          x='35'
+          y='88'
+        />
+        <rect
+          fill='#ffffff'
+          height='30'
+          stroke='#ffffff'
+          strokeDasharray='null'
+          strokeLinecap='null'
+          strokeLinejoin='null'
+          transform='rotate(45, 99.5, 104)'
+          width='128.85878'
+          x='35'
+          y='88'
+        />
+      </g>
+    </svg>
+  );
+}
+
+RedFail.displayName = 'RedFail';
+RedFail.propTypes = propTypes;
+
+export default RedFail;
diff --git a/packages/learn/src/templates/Challenges/rechallenge/builders.js b/packages/learn/src/templates/Challenges/rechallenge/builders.js
new file mode 100644
index 0000000000..d4d34dc68c
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/rechallenge/builders.js
@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import { Observable } from 'rxjs';
+import cond from 'lodash/cond';
+import flow from 'lodash/flow';
+import identity from 'lodash/identity';
+import matchesProperty from 'lodash/matchesProperty';
+import partial from 'lodash/partial';
+import stubTrue from 'lodash/stubTrue';
+
+import { fetchScript, fetchLink } from '../utils/fetch-and-cache.js';
+import { compileHeadTail, setExt, transformContents } from '../utils/polyvinyl';
+
+const htmlCatch = '\n<!--fcc-->\n';
+const jsCatch = '\n;/*fcc*/\n';
+
+const defaultTemplate = ({ source }) => `
+  <body style='margin:8px;'>
+    <!-- fcc-start-source -->
+      ${source}
+    <!-- fcc-end-source -->
+  </body>
+`;
+
+const wrapInScript = partial(
+  transformContents,
+  content => `${htmlCatch}<script>${content}${jsCatch}</script>`
+);
+const wrapInStyle = partial(
+  transformContents,
+  content => `${htmlCatch}<style>${content}</style>`
+);
+const setExtToHTML = partial(setExt, 'html');
+const padContentWithJsCatch = partial(compileHeadTail, jsCatch);
+const padContentWithHTMLCatch = partial(compileHeadTail, htmlCatch);
+
+export const jsToHtml = cond([
+  [
+    matchesProperty('ext', 'js'),
+    flow(padContentWithJsCatch, wrapInScript, setExtToHTML)
+  ],
+  [stubTrue, identity]
+]);
+
+export const cssToHtml = cond([
+  [
+    matchesProperty('ext', 'css'),
+    flow(padContentWithHTMLCatch, wrapInStyle, setExtToHTML)
+  ],
+  [stubTrue, identity]
+]);
+
+// FileStream::concactHtml(
+//   required: [ ...Object ],
+//   template: String
+// ) => Observable[{ build: String, sources: Dictionary }]
+export function concactHtml(required, template) {
+  const createBody = template ? _.template(template) : defaultTemplate;
+  const source = this.shareReplay();
+  const sourceMap = source.flatMap(files =>
+    files.reduce((sources, file) => {
+      sources[file.name] = file.source || file.contents;
+      return sources;
+    }, {})
+  );
+
+  const head = Observable.from(required)
+    .flatMap(required => {
+      if (required.src) {
+        return fetchScript(required);
+      }
+      if (required.link) {
+        return fetchLink(required);
+      }
+      return Observable.of('');
+    })
+    .reduce((head, required) => head + required, '')
+    .map(head => `<head>${head}</head>`);
+
+  const body = source
+    .flatMap(file =>
+      file.reduce((body, file) => {
+        return body + file.contents + file.tail + htmlCatch;
+      }, '')
+    )
+    .map(source => ({ source }))
+    .map(createBody);
+
+  return Observable.combineLatest(
+    head,
+    body,
+    fetchScript({
+      src: '/js/frame-runner.js',
+      crossDomain: false,
+      cacheBreaker: true
+    }),
+    sourceMap,
+    (head, body, frameRunner, sources) => ({
+      build: head + body + frameRunner,
+      sources
+    })
+  );
+}
diff --git a/packages/learn/src/templates/Challenges/rechallenge/throwers.js b/packages/learn/src/templates/Challenges/rechallenge/throwers.js
new file mode 100644
index 0000000000..bbc407d17a
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/rechallenge/throwers.js
@@ -0,0 +1,123 @@
+import { Observable } from 'rxjs';
+import cond from 'lodash/cond';
+import identity from 'lodash/identity';
+import stubTrue from 'lodash/stubTrue';
+import conforms from 'lodash/conforms';
+
+import { castToObservable } from '../utils/polyvinyl';
+
+const HTML$JSReg = /html|js/;
+
+const testHTMLJS = conforms({ ext: ext => HTML$JSReg.test(ext) });
+// const testJS = matchesProperty('ext', 'js');
+const passToNext = [stubTrue, identity];
+
+// Detect if a JS multi-line comment is left open
+const throwIfOpenComments = cond([
+  [
+    testHTMLJS,
+    function _checkForComments({ contents }) {
+      const openingComments = contents.match(/\/\*/gi);
+      const closingComments = contents.match(/\*\//gi);
+      if (
+        openingComments &&
+        (!closingComments || openingComments.length > closingComments.length)
+      ) {
+        throw new SyntaxError('Unfinished multi-line comment');
+      }
+    }
+  ],
+  passToNext
+]);
+
+// Nested dollar sign calls breaks browsers
+const nestedJQCallReg = /\$\s*?\(\s*?\$\s*?\)/gi;
+const throwIfNestedJquery = cond([
+  [
+    testHTMLJS,
+    function({ contents }) {
+      if (nestedJQCallReg.test(contents)) {
+        throw new SyntaxError('Nested jQuery calls breaks browsers');
+      }
+    }
+  ],
+  passToNext
+]);
+
+const functionReg = /function/g;
+const functionCallReg = /function\s*?\(|function\s+\w+\s*?\(/gi;
+// lonely function keywords breaks browsers
+const ThrowIfUnfinishedFunction = cond([
+  [
+    testHTMLJS,
+    function({ contents }) {
+      if (functionReg.test(contents) && !functionCallReg.test(contents)) {
+        throw new SyntaxError('Unsafe or unfinished function declaration');
+      }
+    }
+  ],
+  passToNext
+]);
+
+// console call stops tests scripts from running
+const unsafeConsoleCallReg = /if\s\(null\)\sconsole\.log\(1\);/gi;
+const throwIfUnsafeConsoleCall = cond([
+  [
+    testHTMLJS,
+    function({ contents }) {
+      if (unsafeConsoleCallReg.test(contents)) {
+        throw new SyntaxError(
+          '`if (null) console.log(1)` detected. This will break tests'
+        );
+      }
+    }
+  ],
+  passToNext
+]);
+
+// Code with the URL hyperdev.com should not be allowed to run,
+const goMixReg = /glitch\.(com|me)/gi;
+const throwIfGomixDetected = cond([
+  [
+    testHTMLJS,
+    function({ contents }) {
+      if (goMixReg.test(contents)) {
+        throw new Error('Glitch.com or Glitch.me should not be in the code');
+      }
+    }
+  ],
+  passToNext
+]);
+
+const validators = [
+  throwIfOpenComments,
+  throwIfGomixDetected,
+  throwIfNestedJquery,
+  ThrowIfUnfinishedFunction,
+  throwIfUnsafeConsoleCall
+];
+
+export default function validate(file) {
+  return (
+    validators
+      .reduce(
+        (obs, validator) =>
+          obs.flatMap(file => {
+            try {
+              return castToObservable(validator(file));
+            } catch (err) {
+              return Observable.throw(err);
+            }
+          }),
+        Observable.of(file)
+      )
+      // if no error has occured map to the original file
+      .switchMap(() => Observable.of(file))
+      // if err add it to the file
+      // and return file
+      .catch(err => {
+        file.error = err;
+        return Observable.of(file);
+      })
+  );
+}
diff --git a/packages/learn/src/templates/Challenges/rechallenge/transformers.js b/packages/learn/src/templates/Challenges/rechallenge/transformers.js
new file mode 100644
index 0000000000..923505b8c0
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/rechallenge/transformers.js
@@ -0,0 +1,146 @@
+import {
+  attempt,
+  cond,
+  flow,
+  identity,
+  isError,
+  matchesProperty,
+  overSome,
+  partial,
+  stubTrue
+} from 'lodash';
+
+import * as Babel from 'babel-standalone';
+import presetEs2015 from 'babel-preset-es2015';
+import presetReact from 'babel-preset-react';
+import { Observable } from 'rxjs';
+import protect from 'loop-protect';
+
+import * as vinyl from '../utils/polyvinyl.js';
+
+const { castToObservable } = vinyl;
+
+const protectTimeout = 100;
+Babel.registerPlugin('loopProtection', protect(protectTimeout));
+
+const babelOptions = {
+  plugins: ['loopProtection'],
+  presets: [presetEs2015, presetReact]
+};
+const babelTransformCode = code => Babel.transform(code, babelOptions).code;
+
+// const sourceReg =
+//  /(<!-- fcc-start-source -->)([\s\S]*?)(?=<!-- fcc-end-source -->)/g;
+const console$logReg = /(?:\b)console(\.log\S+)/g;
+const NBSPReg = new RegExp(String.fromCharCode(160), 'g');
+
+const isJS = matchesProperty('ext', 'js');
+const testHTMLJS = overSome(isJS, matchesProperty('ext', 'html'));
+export const testJS$JSX = overSome(isJS, matchesProperty('ext', 'jsx'));
+
+// work around the absence of multi-flile editing
+// this can be replaced with `matchesProperty('ext', 'sass')`
+// when the time comes
+const sassRE = /type='text\/sass'/i;
+const testSASS = file => sassRE.test(file.contents);
+// This can be done in the transformer when we have multi-file editing
+const browserSassCompiler = `
+  <script>
+    var styleTags = [ ...document.querySelectorAll('style') ];
+    [].slice.call(styleTags, 1).forEach(
+      function compileSass(tag) {
+        var scss = tag.innerHTML;
+        Sass.compile(scss, function(result) {
+          tag.type = 'text/css';
+          tag.innerHTML = result.text;
+        });
+      }
+    )
+  </script>
+`;
+// if shouldProxyConsole then we change instances of console log
+// to `window.__console.log`
+// this let's us tap into logging into the console.
+// currently we only do this to the main window and not the test window
+export const proxyLoggerTransformer = partial(
+  vinyl.transformHeadTailAndContents,
+  source =>
+    source.replace(console$logReg, (match, methodCall) => {
+      return 'window.__console' + methodCall;
+    })
+);
+
+// const addLoopProtect = partial(vinyl.transformContents, contents => {
+//   /* eslint-disable import/no-unresolved */
+//   const loopProtect = require('loop-protect');
+//   /* eslint-enable import/no-unresolved */
+//   loopProtect.hit = loopProtectHit;
+//   return loopProtect(contents);
+// });
+
+// export const addLoopProtectHtmlJsJsx = cond([
+//   [
+//     overEvery(
+//       testHTMLJS,
+//       partial(vinyl.testContents, contents =>
+//         contents.toLowerCase().includes('<script>')
+//       )
+//     ),
+//     addLoopProtect
+//   ],
+//   [testJS$JSX, addLoopProtect],
+//   [stubTrue, identity]
+// ]);
+
+export const replaceNBSP = cond([
+  [
+    testHTMLJS,
+    partial(vinyl.transformContents, contents => contents.replace(NBSPReg, ' '))
+  ],
+  [stubTrue, identity]
+]);
+
+function tryTransform(wrap = identity) {
+  return function transformWrappedPoly(source) {
+    const result = attempt(wrap, source);
+    if (isError(result)) {
+      const friendlyError = `${result}`
+        .match(/[\w\W]+?\n/)[0]
+        .replace(' unknown:', '');
+      throw new Error(friendlyError);
+    }
+    return result;
+  };
+}
+
+export const babelTransformer = cond([
+  [
+    testJS$JSX,
+    flow(
+      partial(
+        vinyl.transformHeadTailAndContents,
+        tryTransform(babelTransformCode)
+      ),
+      partial(vinyl.setExt, 'js')
+    )
+  ],
+  [stubTrue, identity]
+]);
+
+export const sassTransformer = cond([
+  [testSASS, partial(vinyl.appendToTail, browserSassCompiler)],
+  [stubTrue, identity]
+]);
+
+export const _transformers = [
+  // addLoopProtectHtmlJsJsx,
+  replaceNBSP,
+  babelTransformer,
+  sassTransformer
+];
+
+export function applyTransformers(file, transformers = _transformers) {
+  return transformers.reduce((obs, transformer) => {
+    return obs.flatMap(file => castToObservable(transformer(file)));
+  }, Observable.of(file));
+}
diff --git a/packages/learn/src/templates/Challenges/redux/challenge-modal-epic.js b/packages/learn/src/templates/Challenges/redux/challenge-modal-epic.js
new file mode 100644
index 0000000000..d0df17eee8
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/redux/challenge-modal-epic.js
@@ -0,0 +1,18 @@
+import { ofType } from 'redux-observable';
+import { switchMap } from 'rxjs/operators';
+import { of } from 'rxjs/observable/of';
+import { empty } from 'rxjs/observable/empty';
+
+import { types, openModal } from './';
+
+function challengeModalEpic(action$) {
+  return action$.pipe(
+    ofType(types.updateTests),
+    switchMap(({ payload: tests }) => {
+      const challengeComplete = tests.every(test => test.pass && !test.err);
+      return challengeComplete ? of(openModal('completion')) : empty();
+    })
+  );
+}
+
+export default challengeModalEpic;
diff --git a/packages/learn/src/templates/Challenges/redux/completion-epic.js b/packages/learn/src/templates/Challenges/redux/completion-epic.js
new file mode 100644
index 0000000000..7b5ea916d3
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/redux/completion-epic.js
@@ -0,0 +1,175 @@
+import { of } from 'rxjs/observable/of';
+import { switchMap } from 'rxjs/operators';
+import { ofType } from 'redux-observable';
+import { push } from 'react-router-redux';
+
+import {
+  // backendFormValuesSelector,
+  // frontendProjectFormValuesSelector,
+  // backendProjectFormValuesSelector,
+  // challengeMetaSelector,
+  // moveToNextChallenge,
+  // submitChallengeComplete,
+  // testsSelector,
+  types,
+  closeModal,
+  challengeMetaSelector
+} from './';
+
+// import {
+//   challengeSelector,
+//   createErrorObservable,
+//   csrfSelector,
+//   userSelector
+// } from '../../../redux';
+// import { filesSelector } from '../../../files';
+// import { backEndProject } from '../../../utils/challengeTypes.js';
+// import { makeToast } from '../../../Toasts/redux';
+// import { postJSON$ } from '../../../../utils/ajax-stream.js';
+
+// function postChallenge(url, username, _csrf, challengeInfo) {
+//   return Observable.if(
+//     () => !!username,
+//     Observable.defer(() => {
+//       const body = { ...challengeInfo, _csrf };
+//       const saveChallenge = postJSON$(url, body)
+//         .retry(3)
+//         .map(({ points, lastUpdated, completedDate }) =>
+//           submitChallengeComplete(username, points, {
+//             ...challengeInfo,
+//             lastUpdated,
+//             completedDate
+//           })
+//         )
+//         .catch(createErrorObservable);
+//       const challengeCompleted = Observable.of(moveToNextChallenge());
+//       return Observable.merge(saveChallenge, challengeCompleted).startWith({
+//         type: types.submitChallenge.start
+//       });
+//     }),
+//     Observable.of(moveToNextChallenge())
+//   );
+// }
+
+// function submitModern(type, state) {
+//   const tests = testsSelector(state);
+//   if (tests.length > 0 && tests.every(test => test.pass && !test.err)) {
+//     if (type === types.checkChallenge) {
+//       return Observable.empty();
+//     }
+
+//     if (type === types.submitChallenge.toString()) {
+//       const { id } = challengeSelector(state);
+//       const files = filesSelector(state);
+//       const { username } = userSelector(state);
+//       const csrfToken = csrfSelector(state);
+//       return postChallenge(
+// '/modern-challenge-completed', username, csrfToken, {
+//         id,
+//         files
+//       });
+//     }
+//   }
+//   return Observable.of(makeToast({ message: 'Keep trying.' }));
+// }
+
+// function submitProject(type, state) {
+//   if (type === types.checkChallenge) {
+//     return Observable.empty();
+//   }
+//   const {
+//     solution: frontEndSolution = '' } = frontendProjectFormValuesSelector(
+//     state
+//   );
+//   const {
+//     solution: backendSolution = '',
+//     githubLink = ''
+//   } = backendProjectFormValuesSelector(state);
+//   const solution = frontEndSolution ? frontEndSolution : backendSolution;
+//   const { id, challengeType } = challengeSelector(state);
+//   const { username } = userSelector(state);
+//   const csrfToken = csrfSelector(state);
+//   const challengeInfo = { id, challengeType, solution };
+//   if (challengeType === backEndProject) {
+//     challengeInfo.githubLink = githubLink;
+//   }
+//   return Observable.merge(
+//     postChallenge('/project-completed', username, csrfToken, challengeInfo),
+//     Observable.of(closeChallengeModal())
+//   );
+// }
+
+// function submitSimpleChallenge(type, state) {
+//   const { id } = challengeSelector(state);
+//   const { username } = userSelector(state);
+//   const csrfToken = csrfSelector(state);
+//   const challengeInfo = { id };
+//   return postChallenge(
+//     '/challenge-completed',
+//     username,
+//     csrfToken,
+//     challengeInfo
+//   );
+// }
+
+// function submitBackendChallenge(type, state) {
+//   const tests = testsSelector(state);
+//   if (
+//     type === types.checkChallenge &&
+//     tests.length > 0 &&
+//     tests.every(test => test.pass && !test.err)
+//   ) {
+//     /*
+//     return Observable.of(
+//       makeToast({
+//         message: `${randomCompliment()} Go to your next challenge.`,
+//         action: 'Submit',
+//         actionCreator: 'submitChallenge',
+//         timeout: 10000
+//       })
+//     );
+//     */
+//     return Observable.empty();
+//   }
+//   if (type === types.submitChallenge.toString()) {
+//     const { id } = challengeSelector(state);
+//     const { username } = userSelector(state);
+//     const csrfToken = csrfSelector(state);
+//     const { solution } = backendFormValuesSelector(state);
+//     const challengeInfo = { id, solution };
+//     return postChallenge(
+//       '/backend-challenge-completed',
+//       username,
+//       csrfToken,
+//       challengeInfo
+//     );
+//   }
+//   return Observable.of(makeToast({ message: 'Keep trying.' }));
+// }
+
+// const submitters = {
+//   tests: submitModern,
+//   backend: submitBackendChallenge,
+//   step: submitSimpleChallenge,
+//   video: submitSimpleChallenge,
+//   quiz: submitSimpleChallenge,
+//   'project.frontEnd': submitProject,
+//   'project.backEnd': submitProject,
+//   'project.simple': submitSimpleChallenge
+// };
+
+export default function completionEpic(action$, { getState }) {
+  return action$.pipe(
+    ofType(types.submitChallenge),
+    switchMap(({ type }) => {
+      const { nextChallengePath } = challengeMetaSelector(getState());
+      // const state = getState();
+      // const { submitType } = challengeMetaSelector(state);
+      // const submitter = submitters[submitType] || (() => Observable.empty());
+
+      return type === types.submitChallenge
+        ? of(closeModal('completion'), push(nextChallengePath))
+        : of({ type: 'PONG' });
+    })
+  );
+}
diff --git a/packages/learn/src/templates/Challenges/redux/execute-challenge-epic.js b/packages/learn/src/templates/Challenges/redux/execute-challenge-epic.js
new file mode 100644
index 0000000000..6b07fe288e
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/redux/execute-challenge-epic.js
@@ -0,0 +1,111 @@
+import { Observable, Subject } from 'rxjs';
+import {
+  debounceTime,
+  switchMap,
+  map,
+  filter,
+  pluck,
+  concat
+} from 'rxjs/operators';
+import { ofType, combineEpics } from 'redux-observable';
+import _ from 'lodash';
+
+import {
+  types,
+  challengeTestsSelector,
+  initConsole,
+  updateConsole,
+  checkChallenge,
+  updateTests
+} from './';
+import { buildFromFiles } from '../utils/build';
+import {
+  runTestsInTestFrame,
+  createTestFramer,
+  createMainFramer
+} from '../utils/frame.js';
+
+const executeDebounceTimeout = 750;
+
+function updateMainEpic(actions, { getState }, { document }) {
+  return Observable.of(document).pipe(
+    filter(Boolean),
+    switchMap(() => {
+      const proxyLogger = new Subject();
+      const frameMain = createMainFramer(document, getState, proxyLogger);
+      const buildAndFrameMain = actions.pipe(
+        ofType(types.updateFile, types.executeChallenge),
+        debounceTime(executeDebounceTimeout),
+        switchMap(() =>
+          buildFromFiles(getState(), true)
+            .map(frameMain)
+            .ignoreElements()
+            .catch(err => console.error(err))
+        )
+      );
+      return Observable.merge(
+        buildAndFrameMain,
+        proxyLogger.map(updateConsole)
+      );
+    })
+  );
+}
+
+function executeChallengeEpic(action$, { getState }, { document }) {
+  return Observable.of(document).pipe(
+    filter(Boolean),
+    switchMap(() => {
+      const frameReady = new Subject();
+      const frameTests = createTestFramer(document, getState, frameReady);
+      const challengeResults = frameReady.pipe(
+        pluck('checkChallengePayload'),
+        map(checkChallengePayload => ({
+          checkChallengePayload,
+          tests: challengeTestsSelector(getState())
+        })),
+        switchMap(({ checkChallengePayload, tests }) => {
+          const postTests = Observable.of(
+            updateConsole('// tests completed'),
+            checkChallenge(checkChallengePayload)
+          ).delay(250);
+          // run the tests within the test iframe
+          return runTestsInTestFrame(document, tests)
+            .flatMap(tests => {
+              return Observable.from(tests).pipe(
+                map(({ message }) => message),
+                filter(_.overEvery(_.isString, Boolean)),
+                map(updateConsole),
+                concat(Observable.of(updateTests(tests)))
+              );
+            })
+            .concat(postTests);
+        })
+      );
+      const buildAndFrameChallenge = action$.pipe(
+        ofType(types.executeChallenge),
+        debounceTime(executeDebounceTimeout),
+        // if isCodeLocked do not run challenges
+        // .filter(() => !codeLockedSelector(getState()))
+        switchMap(() => {
+          const state = getState();
+          // const { challengeType } = challengeSelector(state);
+          // if (challengeType === backend) {
+          //   return buildBackendChallenge(state)
+          //     .do(frameTests)
+          //     .ignoreElements()
+          //     .startWith(initOutput('// running test'))
+          //     .catch(createErrorObservable);
+          // }
+          return buildFromFiles(state, false)
+            .do(frameTests)
+            .ignoreElements()
+            .startWith(initConsole('// running test'))
+            .catch(err => console.log(err));
+        })
+      );
+      return Observable.merge(buildAndFrameChallenge, challengeResults);
+    })
+  );
+}
+
+export default combineEpics(updateMainEpic, executeChallengeEpic);
diff --git a/packages/learn/src/templates/Challenges/redux/index.js b/packages/learn/src/templates/Challenges/redux/index.js
new file mode 100644
index 0000000000..5dca4efadd
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/redux/index.js
@@ -0,0 +1,163 @@
+import { createAction, handleActions } from 'redux-actions';
+
+import { createTypes } from '../../../../utils/stateManagment';
+import { createPoly } from '../utils/polyvinyl';
+import challengeModalEpic from './challenge-modal-epic';
+import completionEpic from './completion-epic';
+import executeChallengeEpic from './execute-challenge-epic';
+
+const ns = 'challenge';
+
+const initialState = {
+  challengeFiles: {},
+  challengeMeta: {
+    id: '',
+    nextChallengePath: '/'
+  },
+  challengeTests: [],
+  consoleOut: '',
+  isJSEnabled: true,
+  modal: {
+    completion: false,
+    help: false
+  },
+  successMessage: 'Happy Coding!'
+};
+
+export const epics = [challengeModalEpic, completionEpic, executeChallengeEpic];
+
+export const types = createTypes(
+  [
+    'createFiles',
+    'initTests',
+    'initConsole',
+    'updateConsole',
+    'updateChallengeMeta',
+    'updateFile',
+    'updateJSEnabled',
+    'updateSuccessMessage',
+    'updateTests',
+    'disableJSOnError',
+
+    'closeModal',
+    'openModal',
+
+    'checkChallenge',
+    'executeChallenge',
+    'submitChallenge'
+  ],
+  ns
+);
+
+export const createFiles = createAction(types.createFiles, challengeFiles =>
+  Object.keys(challengeFiles)
+    .filter(key => challengeFiles[key])
+    .map(key => challengeFiles[key])
+    .reduce(
+      (challengeFiles, file) => ({
+        ...challengeFiles,
+        [file.key]: {
+          ...createPoly(file),
+          seed: file.contents.slice(0)
+        }
+      }),
+      {}
+    )
+);
+export const initTests = createAction(types.initTests);
+export const updateTests = createAction(types.updateTests);
+
+export const initConsole = createAction(types.initConsole);
+export const updateChallengeMeta = createAction(types.updateChallengeMeta);
+export const updateFile = createAction(types.updateFile);
+export const updateConsole = createAction(types.updateConsole);
+export const updateJSEnabled = createAction(types.updateJSEnabled);
+export const updateSuccessMessage = createAction(types.updateSuccessMessage);
+
+export const disableJSOnError = createAction(types.disableJSOnError, err => {
+  console.error(err);
+  return {};
+});
+
+export const closeModal = createAction(types.closeModal);
+export const openModal = createAction(types.openModal);
+
+export const checkChallenge = createAction(types.checkChallenge);
+export const executeChallenge = createAction(types.executeChallenge);
+export const submitChallenge = createAction(types.submitChallenge);
+
+export const challengeFilesSelector = state => state[ns].challengeFiles;
+
+export const challengeMetaSelector = state => state[ns].challengeMeta;
+
+export const challengeTestsSelector = state => state[ns].challengeTests;
+
+export const isJSEnabledSelector = state => state[ns].isJSEnabled;
+
+export const consoleOutputSelector = state => state[ns].consoleOut;
+
+export const isCompletionModalOpenSelector = state =>
+  state[ns].modal.completion;
+export const successMessageSelector = state => state[ns].successMessage;
+
+export const reducer = handleActions(
+  {
+    [types.createFiles]: (state, { payload }) => ({
+      ...state,
+      challengeFiles: payload
+    }),
+    [types.initTests]: (state, { payload }) => ({
+      ...state,
+      challengeTests: payload
+    }),
+    [types.updateTests]: (state, { payload }) => ({
+      ...state,
+      challengeTests: payload
+    }),
+    [types.initConsole]: (state, { payload }) => ({
+      ...state,
+      consoleOut: payload
+    }),
+    [types.updateChallengeMeta]: (state, { payload }) => ({
+      ...state,
+      challengeMeta: { ...payload }
+    }),
+    [types.updateConsole]: (state, { payload }) => ({
+      ...state,
+      consoleOut: state.consoleOut + '\n' + payload
+    }),
+    [types.updateFile]: (state, { payload: { key, editorValue } }) => ({
+      ...state,
+      challengeFiles: {
+        ...state.challengeFiles,
+        [key]: {
+          ...state.challengeFiles[key],
+          contents: editorValue
+        }
+      }
+    }),
+    [types.disableJSOnError]: state => ({
+      ...state,
+      isJSEnabled: false
+    }),
+    [types.updateSuccessMessage]: (state, { payload }) => ({
+      ...state,
+      successMessage: payload
+    }),
+    [types.closeModal]: (state, { payload }) => ({
+      ...state,
+      modal: {
+        ...state.modal,
+        [payload]: false
+      }
+    }),
+    [types.openModal]: (state, { payload }) => ({
+      ...state,
+      modal: {
+        ...state.modal,
+        [payload]: true
+      }
+    })
+  },
+  initialState
+);
diff --git a/packages/learn/src/templates/Challenges/utils/ajax-stream.js b/packages/learn/src/templates/Challenges/utils/ajax-stream.js
new file mode 100644
index 0000000000..534d2a0b4c
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/utils/ajax-stream.js
@@ -0,0 +1,308 @@
+/*
+ * Copyright (c) Microsoft Open Technologies, Inc.  All rights reserved.
+ * Microsoft Open Technologies would like to thank its contributors, a list
+ * of whom are at http://rx.codeplex.com/wikipage?title=Contributors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you
+ * may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ * implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+import debugFactory from 'debug';
+import { Observable, helpers } from 'rxjs';
+
+const debug = debugFactory('fcc:ajax$');
+const root = typeof window !== 'undefined' ? window : {};
+
+// Gets the proper XMLHttpRequest for support for older IE
+function getXMLHttpRequest() {
+  if (root.XMLHttpRequest) {
+    return new root.XMLHttpRequest();
+  } else {
+    var progId;
+    try {
+      var progIds = [
+        'Msxml2.XMLHTTP',
+        'Microsoft.XMLHTTP',
+        'Msxml2.XMLHTTP.4.0'
+      ];
+      for (var i = 0; i < 3; i++) {
+        try {
+          progId = progIds[i];
+          if (new root.ActiveXObject(progId)) {
+            break;
+          }
+        } catch (e) {
+          // purposely do nothing
+          helpers.noop(e);
+        }
+      }
+      return new root.ActiveXObject(progId);
+    } catch (e) {
+      throw new Error('XMLHttpRequest is not supported by your browser');
+    }
+  }
+}
+
+// Get CORS support even for older IE
+function getCORSRequest() {
+  var xhr = new root.XMLHttpRequest();
+  if ('withCredentials' in xhr) {
+    return xhr;
+  } else if (root.XDomainRequest) {
+    return new XDomainRequest();
+  } else {
+    throw new Error('CORS is not supported by your browser');
+  }
+}
+
+function parseXhrResponse(responseType, xhr) {
+  switch (responseType) {
+    case 'json':
+      if ('response' in xhr) {
+        return xhr.responseType
+          ? xhr.response
+          : JSON.parse(xhr.response || xhr.responseText || 'null');
+      } else {
+        return JSON.parse(xhr.responseText || 'null');
+      }
+    case 'xml':
+      return xhr.responseXML;
+    case 'text':
+    default:
+      return 'response' in xhr ? xhr.response : xhr.responseText;
+  }
+}
+
+function normalizeAjaxSuccessEvent(e, xhr, settings) {
+  return {
+    response: parseXhrResponse(settings.responseType || xhr.responseType, xhr),
+    status: xhr.status,
+    responseType: xhr.responseType,
+    xhr: xhr,
+    originalEvent: e
+  };
+}
+
+function normalizeAjaxErrorEvent(e, xhr, type) {
+  return {
+    type: type,
+    status: xhr.status,
+    xhr: xhr,
+    originalEvent: e
+  };
+}
+
+/*
+ * Creates an observable for an Ajax request with either a settings object
+ * with url, headers, etc or a string for a URL.
+ *
+ * @example
+ *   source = Rx.DOM.ajax('/products');
+ *   source = Rx.DOM.ajax( url: 'products', method: 'GET' });
+ *
+ * interface Options {
+ *   url: String, // URL of the request
+ *   body?: Object, // The body of the request
+ *   method? = 'GET' : 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
+ *   async? = true: Boolean, // Whether the request is async
+ *   headers?: Object, // optional headers
+ *   crossDomain?: true // if a cross domain request, else false
+ * }
+ *
+ * ajax$(url?: String, options: Options) => Observable[XMLHttpRequest]
+ */
+export function ajax$(options) {
+  var settings = {
+    method: 'GET',
+    crossDomain: false,
+    async: true,
+    headers: {},
+    responseType: 'text',
+    createXHR: function() {
+      return this.crossDomain ? getCORSRequest() : getXMLHttpRequest();
+    },
+    normalizeError: normalizeAjaxErrorEvent,
+    normalizeSuccess: normalizeAjaxSuccessEvent
+  };
+
+  if (typeof options === 'string') {
+    settings.url = options;
+  } else {
+    for (var prop in options) {
+      if (hasOwnProperty.call(options, prop)) {
+        settings[prop] = options[prop];
+      }
+    }
+  }
+
+  var normalizeError = settings.normalizeError;
+  var normalizeSuccess = settings.normalizeSuccess;
+
+  if (!settings.crossDomain && !settings.headers['X-Requested-With']) {
+    settings.headers['X-Requested-With'] = 'XMLHttpRequest';
+  }
+  settings.hasContent = typeof settings.body !== 'undefined';
+
+  return new Observable.create(function(observer) {
+    var isDone = false;
+    var xhr;
+
+    var processResponse = function(xhr, e) {
+      var status = xhr.status === 1223 ? 204 : xhr.status;
+      if ((status >= 200 && status <= 300) || status === 0 || status === '') {
+        try {
+          observer.next(normalizeSuccess(e, xhr, settings));
+          observer.complete();
+        } catch (err) {
+          observer.error(err);
+        }
+      } else {
+        observer.error(normalizeError(e, xhr, 'error'));
+      }
+      isDone = true;
+    };
+
+    try {
+      xhr = settings.createXHR();
+    } catch (err) {
+      observer.error(err);
+    }
+
+    try {
+      if (settings.user) {
+        xhr.open(
+          settings.method,
+          settings.url,
+          settings.async,
+          settings.user,
+          settings.password
+        );
+      } else {
+        xhr.open(settings.method, settings.url, settings.async);
+      }
+
+      var headers = settings.headers;
+      for (var header in headers) {
+        if (hasOwnProperty.call(headers, header)) {
+          xhr.setRequestHeader(header, headers[header]);
+        }
+      }
+
+      if (!xhr.upload || (!('withCredentials' in xhr) && root.XDomainRequest)) {
+        xhr.onload = function(e) {
+          if (settings.progressObserver) {
+            settings.progressObserver.next(e);
+            settings.progressObserver.complete();
+          }
+          processResponse(xhr, e);
+        };
+
+        if (settings.progressObserver) {
+          xhr.onprogress = function(e) {
+            settings.progressObserver.next(e);
+          };
+        }
+
+        xhr.onerror = function(e) {
+          if (settings.progressObserver) {
+            settings.progressObserver.error(e);
+          }
+          observer.error(normalizeError(e, xhr, 'error'));
+          isDone = true;
+        };
+
+        xhr.onabort = function(e) {
+          if (settings.progressObserver) {
+            settings.progressObserver.error(e);
+          }
+          observer.error(normalizeError(e, xhr, 'abort'));
+          isDone = true;
+        };
+      } else {
+        xhr.onreadystatechange = function(e) {
+          if (xhr.readyState === 4) {
+            processResponse(xhr, e);
+          }
+        };
+      }
+
+      debug('ajax$ sending content', settings.hasContent && settings.body);
+      xhr.send((settings.hasContent && settings.body) || null);
+    } catch (err) {
+      observer.error(err);
+    }
+
+    return function() {
+      if (!isDone && xhr.readyState !== 4) {
+        xhr.abort();
+      }
+    };
+  });
+}
+
+// Creates an observable sequence from an Ajax POST Request with the body.
+// post$(url: String, body: Object) => Observable[Any]
+export function post$(url, body) {
+  try {
+    body = JSON.stringify(body);
+  } catch (e) {
+    return Observable.throw(e);
+  }
+
+  return ajax$({ url, body, method: 'POST' });
+}
+
+// postJSON$(url: String, body: Object) => Observable[Object]
+export function postJSON$(url, body) {
+  try {
+    body = JSON.stringify(body);
+  } catch (e) {
+    return Observable.throw(e);
+  }
+
+  return ajax$({
+    url,
+    body,
+    method: 'POST',
+    responseType: 'json',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json'
+    },
+    normalizeError: (e, xhr) => parseXhrResponse('json', xhr)
+  }).map(({ response }) => response);
+}
+
+// Creates an observable sequence from an Ajax GET Request with the body.
+// get$(url: String) => Obserable[Any]
+export function get$(url) {
+  return ajax$({ url: url });
+}
+
+/**
+ * Creates an observable sequence from JSON from an Ajax request
+ *
+ * @param {String} url The URL to GET
+ * @returns {Observable} The observable sequence which contains the parsed JSON
+ */
+// getJSON$(url: String) => Observable[Object];
+export function getJSON$(url) {
+  return ajax$({
+    url: url,
+    responseType: 'json',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json'
+    },
+    normalizeError: (e, xhr) => parseXhrResponse('json', xhr)
+  }).map(({ response }) => response);
+}
diff --git a/packages/learn/src/templates/Challenges/utils/build.js b/packages/learn/src/templates/Challenges/utils/build.js
new file mode 100644
index 0000000000..274ea3642a
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/utils/build.js
@@ -0,0 +1,74 @@
+import { of } from 'rxjs/observable/of';
+import identity from 'lodash/identity';
+
+// import { fetchScript } from './fetch-and-cache.js';
+import throwers from '../rechallenge/throwers';
+import {
+  challengeFilesSelector,
+  isJSEnabledSelector,
+  disableJSOnError
+} from '../redux';
+import {
+  applyTransformers,
+  proxyLoggerTransformer,
+  testJS$JSX
+} from '../rechallenge/transformers';
+import { cssToHtml, jsToHtml, concactHtml } from '../rechallenge/builders.js';
+import { createFileStream, pipe } from './polyvinyl';
+
+const jQuery = {
+  src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
+};
+// const frameRunner = {
+//   src: '/js/frame-runner.js',
+//   crossDomain: false,
+//   cacheBreaker: true
+// };
+const globalRequires = [
+  {
+    link:
+      'https://cdnjs.cloudflare.com/' +
+      'ajax/libs/normalize/4.2.0/normalize.min.css'
+  },
+  jQuery
+];
+
+function filterJSIfDisabled(state) {
+  const isJSEnabled = isJSEnabledSelector(state);
+  return file => !(testJS$JSX(file) && !isJSEnabled);
+}
+
+export function buildFromFiles(state, shouldProxyConsole) {
+  const files = challengeFilesSelector(state);
+  const required = [];
+  /* challengeRequiredSelector(state);*/
+  const finalRequires = [...globalRequires, ...required];
+  const requiredFiles = Object.keys(files)
+    .map(key => files[key])
+    .filter(filterJSIfDisabled(state))
+    .filter(Boolean);
+  return createFileStream(requiredFiles)
+    ::pipe(throwers)
+    ::pipe(applyTransformers)
+    ::pipe(shouldProxyConsole ? proxyLoggerTransformer : identity)
+    ::pipe(jsToHtml)
+    ::pipe(cssToHtml)
+    ::concactHtml(
+      finalRequires,
+      false
+      /* challengeTemplateSelector(state) */
+    )
+    .catch(err => of(disableJSOnError(err)));
+}
+
+// export function buildBackendChallenge(state) {
+//   const { solution: url } = backendFormValuesSelector(state);
+//   return Observable.combineLatest(
+//     fetchScript(frameRunner),
+//     fetchScript(jQuery)
+//   ).map(([frameRunner, jQuery]) => ({
+//     build: jQuery + frameRunner,
+//     sources: { url },
+//     checkChallengePayload: { solution: url }
+//   }));
+// }
diff --git a/packages/learn/src/templates/Challenges/utils/fetch-and-cache.js b/packages/learn/src/templates/Challenges/utils/fetch-and-cache.js
new file mode 100644
index 0000000000..203281e94a
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/utils/fetch-and-cache.js
@@ -0,0 +1,69 @@
+import { Observable } from 'rxjs';
+import { ajax$ } from '../utils/ajax-stream';
+
+// value used to break browser ajax caching
+const cacheBreakerValue = Math.random();
+
+export function _fetchScript({
+  src,
+  cacheBreaker = false,
+  crossDomain = true
+} = {}) {
+  if (!src) {
+    throw new Error('No source provided for script');
+  }
+  if (this.cache.has(src)) {
+    return this.cache.get(src);
+  }
+  const url = cacheBreaker ? `${src}?cacheBreaker=${cacheBreakerValue}` : src;
+  const script = ajax$({ url, crossDomain })
+    .do(res => {
+      if (res.status !== 200) {
+        throw new Error('Request errror: ' + res.status);
+      }
+    })
+    .map(({ response }) => response)
+    .map(script => `<script>${script}</script>`)
+    .shareReplay();
+
+  this.cache.set(src, script);
+  return script;
+}
+export const fetchScript = _fetchScript.bind({ cache: new Map() });
+
+export function _fetchLink({
+  link: href,
+  raw = false,
+  crossDomain = true
+} = {}) {
+  if (!href) {
+    return Observable.throw(new Error('No source provided for link'));
+  }
+  if (this.cache.has(href)) {
+    return this.cache.get(href);
+  }
+  // css files with `url(...` may not work in style tags
+  // so we put them in raw links
+  if (raw) {
+    const link = Observable.of(
+      `<link href=${href} rel='stylesheet' />`
+    ).shareReplay();
+    this.cache.set(href, link);
+    return link;
+  }
+  const link = ajax$({ url: href, crossDomain })
+    .do(res => {
+      if (res.status !== 200) {
+        throw new Error('Request error: ' + res.status);
+      }
+    })
+    .map(({ response }) => response)
+    .map(script => `<style>${script}</style>`)
+    .catch(() => Observable.of(''))
+    .shareReplay();
+
+  this.cache.set(href, link);
+  return link;
+}
+
+export const fetchLink = _fetchLink.bind({ cache: new Map() });
diff --git a/packages/learn/src/templates/Challenges/utils/frame.js b/packages/learn/src/templates/Challenges/utils/frame.js
new file mode 100644
index 0000000000..7b732961b3
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/utils/frame.js
@@ -0,0 +1,147 @@
+import _ from 'lodash';
+import Rx, { Observable } from 'rxjs';
+import { ShallowWrapper, ReactWrapper } from 'enzyme';
+import Adapter15 from 'enzyme-adapter-react-15';
+import { isJSEnabledSelector } from '../redux';
+import 'chai';
+
+// we use two different frames to make them all essentially pure functions
+// main iframe is responsible rendering the preview and is where we proxy the
+// console.log
+const mainId = 'fcc-main-frame';
+// the test frame is responsible for running the assert tests
+const testId = 'fcc-test-frame';
+
+// base tag here will force relative links
+// within iframe to point to '/' instead of
+// append to the current challenge url
+// if an error occurs during initialization
+// the __err prop will be set
+// This is then picked up in client/frame-runner.js during
+// runTestsInTestFrame below
+const createHeader = (id = mainId) => `
+  <base href='/' target='_blank'/>
+  <script>
+    window.__frameId = '${id}';
+    window.onerror = function(msg, url, ln, col, err) {
+      window.__err = err;
+      return true;
+    };
+  </script>
+`;
+
+export const runTestsInTestFrame = (document, tests) =>
+  Observable.defer(() => {
+    const { contentDocument: frame } = document.getElementById(testId);
+    return frame.__runTests(tests);
+  });
+
+const createFrame = (document, getState, id) => ctx => {
+  const isJSEnabled = isJSEnabledSelector(getState());
+  const frame = document.createElement('iframe');
+  frame.id = id;
+  if (!isJSEnabled) {
+    frame.sandbox = 'allow-same-origin';
+  }
+  return {
+    ...ctx,
+    element: frame
+  };
+};
+
+const hiddenFrameClassname = 'hide-test-frame';
+const mountFrame = document => ({ element, ...rest }) => {
+  const oldFrame = document.getElementById(element.id);
+  if (oldFrame) {
+    element.className = oldFrame.className || hiddenFrameClassname;
+    oldFrame.parentNode.replaceChild(element, oldFrame);
+  } else {
+    element.className = hiddenFrameClassname;
+    document.body.appendChild(element);
+  }
+  return {
+    ...rest,
+    element,
+    document: element.contentDocument,
+    window: element.contentWindow
+  };
+};
+
+const addDepsToDocument = ctx => {
+  ctx.document.Rx = Rx;
+
+  // using require here prevents nodejs issues as loop-protect
+  // is added to the window object by webpack and not available to
+  // us server side.
+  /* eslint-disable import/no-unresolved */
+  ctx.document.loopProtect = require('loop-protect');
+  /* eslint-enable import/no-unresolved */
+  return ctx;
+};
+
+const buildProxyConsole = proxyLogger => ctx => {
+  const oldLog = ctx.window.console.log.bind(ctx.window.console);
+  ctx.window.__console = {};
+  ctx.window.__console.log = function proxyConsole(...args) {
+    proxyLogger.onNext(args);
+    return oldLog(...args);
+  };
+  return ctx;
+};
+
+const writeTestDepsToDocument = frameReady => ctx => {
+  const { document: tests, sources, checkChallengePayload } = ctx;
+  // add enzyme
+  // TODO: do programatically
+  // TODO: webpack lazyload this
+  tests.Enzyme = {
+    shallow: (node, options) =>
+      new ShallowWrapper(node, null, {
+        ...options,
+        adapter: new Adapter15()
+      }),
+    mount: (node, options) =>
+      new ReactWrapper(node, null, {
+        ...options,
+        adapter: new Adapter15()
+      })
+  };
+  // default for classic challenges
+  // should not be used for modern
+  tests.__source = sources && 'index' in sources ? sources['index'] : '';
+  // provide the file name and get the original source
+  tests.__getUserInput = fileName => _.toString(sources[fileName]);
+  tests.__checkChallengePayload = checkChallengePayload;
+  tests.__frameReady = frameReady;
+  return ctx;
+};
+
+function writeToFrame(content, frame) {
+  frame.open();
+  frame.write(content);
+  frame.close();
+  return frame;
+}
+
+const writeContentToFrame = ctx => {
+  writeToFrame(createHeader(ctx.element.id) + ctx.build, ctx.document);
+  return ctx;
+};
+
+export const createMainFramer = (document, getState, proxyLogger) =>
+  _.flow(
+    createFrame(document, getState, mainId),
+    mountFrame(document),
+    addDepsToDocument,
+    buildProxyConsole(proxyLogger),
+    writeContentToFrame
+  );
+
+export const createTestFramer = (document, getState, frameReady) =>
+  _.flow(
+    createFrame(document, getState, testId),
+    mountFrame(document),
+    addDepsToDocument,
+    writeTestDepsToDocument(frameReady),
+    writeContentToFrame
+  );
diff --git a/packages/learn/src/templates/Challenges/utils/get-words.js b/packages/learn/src/templates/Challenges/utils/get-words.js
new file mode 100644
index 0000000000..a5141c4a57
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/utils/get-words.js
@@ -0,0 +1,17 @@
+import words from './words.json';
+
+function randomItem(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+export function randomPhrase() {
+  return randomItem(words.phrases);
+}
+
+export function randomVerb() {
+  return randomItem(words.verbs);
+}
+
+export function randomCompliment() {
+  return randomItem(words.compliments);
+}
diff --git a/packages/learn/src/templates/Challenges/utils/polyvinyl.js b/packages/learn/src/templates/Challenges/utils/polyvinyl.js
new file mode 100644
index 0000000000..204f34cfa4
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/utils/polyvinyl.js
@@ -0,0 +1,217 @@
+// originally based off of https://github.com/gulpjs/vinyl
+import invariant from 'invariant';
+import { Observable } from 'rxjs';
+import { isPromise } from 'rxjs/util/isPromise';
+
+export function castToObservable(maybe) {
+  if (maybe instanceof Observable) {
+    return maybe;
+  }
+  if (isPromise(maybe)) {
+    return Observable.fromPromise(maybe);
+  }
+  return Observable.of(maybe);
+}
+
+// createFileStream(
+//   files: [...PolyVinyl]
+// ) => Observable[...Observable[...PolyVinyl]]
+export function createFileStream(files = []) {
+  return Observable.of(Observable.from(files));
+}
+
+// Observable::pipe(
+//  project(
+//    file: PolyVinyl
+//  ) => PolyVinyl|Observable[PolyVinyl]|Promise[PolyVinyl]
+// ) => Observable[...Observable[...PolyVinyl]]
+export function pipe(project) {
+  const source = this;
+  return source.map(files =>
+    files.flatMap(file => castToObservable(project(file)))
+  );
+}
+
+// interface PolyVinyl {
+//   source: String,
+//   contents: String,
+//   name: String,
+//   ext: String,
+//   path: String,
+//   key: String,
+//   head: String,
+//   tail: String,
+//   history: [...String],
+//   error: Null|Object|Error
+// }
+
+// createPoly({
+//   name: String,
+//   ext: String,
+//   contents: String,
+//   history?: [...String],
+// }) => PolyVinyl, throws
+export function createPoly({ name, ext, contents, history, ...rest } = {}) {
+  invariant(typeof name === 'string', 'name must be a string but got %s', name);
+
+  invariant(typeof ext === 'string', 'ext must be a string, but was %s', ext);
+
+  invariant(
+    typeof contents === 'string',
+    'contents must be a string but got %s',
+    contents
+  );
+
+  return {
+    ...rest,
+    history: Array.isArray(history) ? history : [name + ext],
+    name,
+    ext,
+    path: name + '.' + ext,
+    key: name + ext,
+    contents,
+    error: null
+  };
+}
+
+// isPoly(poly: Any) => Boolean
+export function isPoly(poly) {
+  return (
+    poly &&
+    typeof poly.contents === 'string' &&
+    typeof poly.name === 'string' &&
+    typeof poly.ext === 'string' &&
+    Array.isArray(poly.history)
+  );
+}
+
+// checkPoly(poly: Any) => Void, throws
+export function checkPoly(poly) {
+  invariant(
+    isPoly(poly),
+    'function should receive a PolyVinyl, but got %s',
+    poly
+  );
+}
+
+// isEmpty(poly: PolyVinyl) => Boolean, throws
+export function isEmpty(poly) {
+  checkPoly(poly);
+  return !!poly.contents;
+}
+
+// setContent(contents: String, poly: PolyVinyl) => PolyVinyl
+// setContent will loose source if set
+export function setContent(contents, poly) {
+  checkPoly(poly);
+  return {
+    ...poly,
+    contents,
+    source: null
+  };
+}
+
+// setExt(ext: String, poly: PolyVinyl) => PolyVinyl
+export function setExt(ext, poly) {
+  checkPoly(poly);
+  const newPoly = {
+    ...poly,
+    ext,
+    path: poly.name + '.' + ext,
+    key: poly.name + ext
+  };
+  newPoly.history = [...poly.history, newPoly.path];
+  return newPoly;
+}
+
+// setName(name: String, poly: PolyVinyl) => PolyVinyl
+export function setName(name, poly) {
+  checkPoly(poly);
+  const newPoly = {
+    ...poly,
+    name,
+    path: name + '.' + poly.ext,
+    key: name + poly.ext
+  };
+  newPoly.history = [...poly.history, newPoly.path];
+  return newPoly;
+}
+
+// setError(error: Object, poly: PolyVinyl) => PolyVinyl
+export function setError(error, poly) {
+  invariant(
+    typeof error === 'object',
+    'error must be an object or null, but got %',
+    error
+  );
+  checkPoly(poly);
+  console.log('SET ERROR!!!!!!!!!!!!!!!!!');
+  return {
+    ...poly,
+    error
+  };
+}
+
+// clearHeadTail(poly: PolyVinyl) => PolyVinyl
+export function clearHeadTail(poly) {
+  checkPoly(poly);
+  return {
+    ...poly,
+    head: '',
+    tail: ''
+  };
+}
+
+// appendToTail (tail: String, poly: PolyVinyl) => PolyVinyl
+export function appendToTail(tail, poly) {
+  checkPoly(poly);
+  return {
+    ...poly,
+    tail: poly.tail.concat(tail)
+  };
+}
+
+// compileHeadTail(padding: String, poly: PolyVinyl) => PolyVinyl
+export function compileHeadTail(padding = '', poly) {
+  return clearHeadTail(
+    transformContents(
+      () => [poly.head, poly.contents, poly.tail].join(padding),
+      poly
+    )
+  );
+}
+
+// transformContents(
+//   wrap: (contents: String) => String,
+//   poly: PolyVinyl
+// ) => PolyVinyl
+// transformContents will keep a copy of the original
+// code in the `source` property. If the original polyvinyl
+// already contains a source, this version will continue as
+// the source property
+export function transformContents(wrap, poly) {
+  const newPoly = setContent(wrap(poly.contents), poly);
+  // if no source exist, set the original contents as source
+  newPoly.source = poly.source || poly.contents;
+  return newPoly;
+}
+
+// transformHeadTailAndContents(
+//   wrap: (source: String) => String,
+//   poly: PolyVinyl
+// ) => PolyVinyl
+export function transformHeadTailAndContents(wrap, poly) {
+  return {
+    ...transformContents(wrap, poly),
+    head: wrap(poly.head),
+    tail: wrap(poly.tail)
+  };
+}
+
+export function testContents(predicate, poly) {
+  return !!predicate(poly.contents);
+}
+
+export function updateFileFromSpec(spec, poly) {
+  return setContent(poly.contents, createPoly(spec));
+}
diff --git a/packages/learn/src/templates/Challenges/utils/words.json b/packages/learn/src/templates/Challenges/utils/words.json
new file mode 100644
index 0000000000..ed3a1616bf
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/utils/words.json
@@ -0,0 +1,127 @@
+{
+  "verbs": [
+    "aced",
+    "nailed",
+    "rocked",
+    "destroyed",
+    "owned",
+    "crushed",
+    "conquered",
+    "shredded",
+    "demolished",
+    "devoured",
+    "banished",
+    "wrangled"
+  ],
+  "compliments": [
+    "Over the top!",
+    "Down the rabbit hole we go!",
+    "Bring that rain!",
+    "Target acquired!",
+    "Feel that need for speed!",
+    "You've got guts!",
+    "We have liftoff!",
+    "To infinity and beyond!",
+    "Encore!",
+    "Onward, ho!",
+    "Challenge destroyed!",
+    "It's on like Donkey Kong!",
+    "Power level? It's over 9000!",
+    "Coding spree!",
+    "Code long and prosper.",
+    "The crowd goes wild!",
+    "One for the guinness book!",
+    "Flawless victory!",
+    "Most efficient!",
+    "Party on, Wayne!",
+    "You've got the touch!",
+    "You're on fire!",
+    "Don't hurt 'em, Hammer!",
+    "The town is now red!",
+    "To the nines!",
+    "The world rejoices!",
+    "That's the way it's done!",
+    "You rock!",
+    "Woo-hoo!",
+    "We knew you could do it!",
+    "Hyper Combo Finish!",
+    "Nothing but net!",
+    "Boom-shakalaka!",
+    "You're a shooting star!",
+    "You're unstoppable!",
+    "Way cool!",
+    "You're king of the world!",
+    "Walk on that sunshine!",
+    "Keep on trucking!",
+    "Off the charts!",
+    "There is no spoon!",
+    "Cranked it up to 11!",
+    "Escape velocity reached!",
+    "You make this look easy!",
+    "Passed with flying colors!",
+    "You've got this!",
+    "Happy, happy, joy, joy!",
+    "Tomorrow, the world!",
+    "Your powers combined!",
+    "A winner is you!",
+    "It's alive. It's alive!",
+    "Sonic Boom!",
+    "Here's looking at you, Code!",
+    "Ride like the wind!",
+    "Legen - wait for it - dary!",
+    "Ludicrous Speed! Go!",
+    "Yes we can!",
+    "Most triumphant!",
+    "One loop to rule them all!",
+    "By the power of Grayskull!",
+    "You did it!",
+    "Storm that castle!",
+    "Face-melting guitar solo!",
+    "Checkmate!",
+    "Bodacious!",
+    "Tubular!",
+    "You're outta sight!",
+    "Keep calm and code on!",
+    "Even sad panda smiles!",
+    "Even grumpy cat approves!",
+    "Kool Aid Man says oh yeah!",
+    "Bullseye!",
+    "Far out!",
+    "You're heating up!",
+    "Hasta la vista, challenge!",
+    "Terminated.",
+    "Off the hook!",
+    "Thundercats, Hooo!",
+    "Shiver me timbers!",
+    "Raise the roof!",
+    "We've underestimated you.",
+    "I also live dangerously.",
+    "Get to the choppa!",
+    "Bingo!",
+    "And you're all out of gum.",
+    "Even honeybadger cares!",
+    "Helm, Warp Nine. Engage!",
+    "Gotta code 'em all!",
+    "Spool up the FTL drive!",
+    "Cool beans!",
+    "They're in another castle.",
+    "Power UP!",
+    "Nuclear launch detected.",
+    "Pikachu chooses you!",
+    "We're gonna pump you up!",
+    "I gotta have more cow bell."
+  ],
+  "phrases": [
+    "Shout it from on top of a mountain",
+    "Tell everyone and their dogs",
+    "Show them. Show them all!",
+    "Inspire your friends",
+    "Tell the world of your greatness",
+    "Look accomplished on social media",
+    "Share news of your grand endeavor",
+    "Establish your alibi for the past two hours",
+    "Prove to mom that computers aren't just for games",
+    "With coding power comes sharing responsibility",
+    "Have you told your friends of your coding powers?"
+  ]
+}
diff --git a/packages/learn/src/templates/Challenges/views/Modern/Editor.jsx b/packages/learn/src/templates/Challenges/views/Modern/Editor.jsx
new file mode 100644
index 0000000000..59cf7795dd
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/Modern/Editor.jsx
@@ -0,0 +1,155 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import Codemirror from 'react-codemirror';
+import NoSSR from 'react-no-ssr';
+import MouseTrap from 'mousetrap';
+
+import ns from './ns.json';
+import CodeMirrorSkeleton from '../../Code-Mirror-Skeleton.jsx';
+import {
+  executeChallenge,
+  modernEditorUpdated,
+  challengeMetaSelector
+} from '../../redux';
+
+import { themeSelector } from '../../../../redux';
+
+import { createFileSelector } from '../../../../files';
+
+const envProps = typeof window !== 'undefined' ? Object.keys(window) : [];
+const options = {
+  lint: {
+    esversion: 6,
+    predef: envProps
+  },
+  lineNumbers: true,
+  mode: 'javascript',
+  runnable: true,
+  matchBrackets: true,
+  autoCloseBrackets: true,
+  scrollbarStyle: 'null',
+  lineWrapping: true,
+  gutters: [ 'CodeMirror-lint-markers' ]
+};
+
+const mapStateToProps = createSelector(
+  createFileSelector((_, { fileKey }) => fileKey || ''),
+  challengeMetaSelector,
+  themeSelector,
+  (
+    file,
+    { mode },
+    theme
+  ) => ({
+    content: file.contents || '// Happy Coding!',
+    file: file,
+    mode: file.ext || mode || 'javascript',
+    theme
+  })
+);
+
+const mapDispatchToProps = {
+  executeChallenge,
+  modernEditorUpdated
+};
+
+const propTypes = {
+  content: PropTypes.string,
+  executeChallenge: PropTypes.func.isRequired,
+  fileKey: PropTypes.string,
+  mode: PropTypes.string,
+  modernEditorUpdated: PropTypes.func.isRequired,
+  theme: PropTypes.string
+};
+
+export class Editor extends PureComponent {
+  createOptions = createSelector(
+    state => state.executeChallenge,
+    state => state.mode,
+    state => state.cmTheme,
+    (executeChallenge, mode, cmTheme) => ({
+      ...options,
+      theme: cmTheme,
+      mode,
+      // JSHint only works with javascript
+      // we will need to switch to eslint to make this work with jsx
+      lint: mode === 'javascript' ? options.lint : false,
+      extraKeys: {
+        Esc() {
+          document.activeElement.blur();
+        },
+        Tab(cm) {
+          if (cm.somethingSelected()) {
+            return cm.indentSelection('add');
+          }
+          const spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
+          return cm.replaceSelection(spaces);
+        },
+        'Shift-Tab': function(cm) {
+          return cm.indentSelection('subtract');
+        },
+        'Ctrl-Enter': function() {
+          executeChallenge();
+          return false;
+        },
+        'Cmd-Enter': function() {
+          executeChallenge();
+          return false;
+        },
+        'Ctrl-/': function(cm) {
+          cm.toggleComment();
+        },
+        'Cmd-/': function(cm) {
+          cm.toggleComment();
+        }
+      }
+    })
+  );
+
+  componentDidMount() {
+    MouseTrap.bind('e', () => {
+      this.refs.editor.focus();
+    }, 'keyup');
+  }
+
+  componentWillUnmount() {
+    MouseTrap.unbind('e', 'keyup');
+  }
+
+  render() {
+    const {
+      content,
+      modernEditorUpdated,
+      executeChallenge,
+      fileKey,
+      mode
+    } = this.props;
+    const cmTheme = this.props.theme === 'default' ? 'default' : 'dracula';
+    return (
+      <div
+        className={ `${ns}-editor` }
+        role='main'
+        >
+        <NoSSR onSSR={ <CodeMirrorSkeleton content={ content } /> }>
+          <Codemirror
+            onChange={ content => modernEditorUpdated(fileKey, content) }
+            options={ this.createOptions({ executeChallenge, mode, cmTheme }) }
+            ref='editor'
+            value={ content }
+          />
+        </NoSSR>
+      </div>
+    );
+  }
+}
+
+Editor.displayName = 'Editor';
+Editor.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Editor);
diff --git a/packages/learn/src/templates/Challenges/views/Modern/Show.jsx b/packages/learn/src/templates/Challenges/views/Modern/Show.jsx
new file mode 100644
index 0000000000..b0f6d99b99
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/Modern/Show.jsx
@@ -0,0 +1,111 @@
+import _ from 'lodash';
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { createSelector } from 'reselect';
+import { addNS } from 'berkeleys-redux-utils';
+
+import ns from './ns.json';
+import Editor from './Editor.jsx';
+import ChildContainer from '../../Child-Container.jsx';
+import { showPreviewSelector, types } from '../../redux';
+import SidePanel from '../../Side-Panel.jsx';
+import Preview from '../../Preview.jsx';
+import _Map from '../../../../Map';
+import Panes from '../../../../Panes';
+import { filesSelector } from '../../../../files';
+
+const createModernEditorToggleType = fileKey =>
+  types.toggleModernEditor + `(${fileKey})`;
+
+const getFirstFileKey = _.flow(_.values, _.first, _.property('key'));
+
+const propTypes = {
+  nameToFileKey: PropTypes.object
+};
+
+const mapStateToProps = createSelector(
+  filesSelector,
+  files => {
+    if (Object.keys(files).length === 1) {
+      return { nameToFileKey: { Editor: getFirstFileKey(files) }};
+    }
+    return {
+      nameToFileKey: _.reduce(files, (map, file) => {
+        map[file.name] = file.key;
+        return map;
+      }, {})
+    };
+  }
+);
+
+const mapDispatchToProps = null;
+
+export const mapStateToPanes = addNS(
+  ns,
+  createSelector(
+    filesSelector,
+    showPreviewSelector,
+    (files, showPreview) => {
+      // create panes map here
+      // must include map
+      // side panel
+      // editors are created based on state
+      // so pane component can have multiple panes based on state
+
+      const panesMap = {
+        [types.toggleMap]: 'Map',
+        [types.toggleSidePanel]: 'Lesson'
+      };
+
+      // If there is more than one file show file name
+      if (Object.keys(files).length > 1) {
+        _.forEach(files, (file) => {
+          panesMap[createModernEditorToggleType(file.fileKey)] = file.name;
+        });
+      } else {
+        const key = getFirstFileKey(files);
+        panesMap[createModernEditorToggleType(key)] = 'Editor';
+      }
+
+      if (showPreview) {
+        panesMap[types.togglePreview] = 'Preview';
+      }
+
+      return panesMap;
+    }
+  )
+);
+
+const nameToComponent = {
+  Map: _Map,
+  Lesson: SidePanel,
+  Preview: Preview
+};
+
+export function ShowModern({ nameToFileKey }) {
+  return (
+    <ChildContainer isFullWidth={ true }>
+      <Panes
+        render={ name => {
+          const Comp = nameToComponent[name];
+          if (Comp) {
+            return <Comp />;
+          }
+          if (nameToFileKey[name]) {
+            return <Editor fileKey={ nameToFileKey[name] } />;
+          }
+          return <span>Could not find Component for { name }</span>;
+        }}
+      />
+    </ChildContainer>
+  );
+}
+
+ShowModern.displayName = 'ShowModern';
+ShowModern.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShowModern);
diff --git a/packages/learn/src/templates/Challenges/views/Modern/index.js b/packages/learn/src/templates/Challenges/views/Modern/index.js
new file mode 100644
index 0000000000..53c86f5f0b
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/Modern/index.js
@@ -0,0 +1 @@
+export { default, mapStateToPanes } from './Show.jsx';
diff --git a/packages/learn/src/templates/Challenges/views/Modern/ns.json b/packages/learn/src/templates/Challenges/views/Modern/ns.json
new file mode 100644
index 0000000000..1abaf5ef09
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/Modern/ns.json
@@ -0,0 +1 @@
+"modern"
diff --git a/packages/learn/src/templates/Challenges/views/backend/Back-End.jsx b/packages/learn/src/templates/Challenges/views/backend/Back-End.jsx
new file mode 100644
index 0000000000..5e4dc78499
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/backend/Back-End.jsx
@@ -0,0 +1,184 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { createSelector } from 'reselect';
+import { reduxForm } from 'redux-form';
+import {
+  Button,
+  Col,
+  Row
+} from 'react-bootstrap';
+
+import ChallengeTitle from '../../Challenge-Title.jsx';
+import ChallengeDescription from '../../Challenge-Description.jsx';
+import SolutionInput from '../../Solution-Input.jsx';
+import TestSuite from '../../Test-Suite.jsx';
+import Output from '../../Output.jsx';
+import {
+  executeChallenge,
+  testsSelector,
+  outputSelector
+} from '../../redux';
+import { descriptionRegex } from '../../utils';
+
+import {
+  createFormValidator,
+  isValidURL,
+  makeRequired
+} from '../../../../utils/form.js';
+import { challengeSelector } from '../../../../redux';
+
+// provided by redux form
+const reduxFormPropTypes = {
+  fields: PropTypes.object,
+  handleSubmit: PropTypes.func.isRequired,
+  resetForm: PropTypes.func.isRequired,
+  submitting: PropTypes.bool
+};
+
+const propTypes = {
+  description: PropTypes.arrayOf(PropTypes.string),
+  executeChallenge: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  output: PropTypes.string,
+  tests: PropTypes.array,
+  title: PropTypes.string,
+  ...reduxFormPropTypes
+};
+
+const fields = [ 'solution' ];
+
+const fieldValidators = {
+  solution: makeRequired(isValidURL)
+};
+
+const mapStateToProps = createSelector(
+  challengeSelector,
+  outputSelector,
+  testsSelector,
+  (
+    {
+      id,
+      title,
+      description
+    },
+    output,
+    tests
+  ) => ({
+    id,
+    title,
+    tests,
+    description,
+    output
+  })
+);
+
+const mapDispatchToActions = {
+  executeChallenge
+};
+
+export class BackEnd extends PureComponent {
+  renderDescription(description) {
+    if (!Array.isArray(description)) {
+      return null;
+    }
+    return description.map((line, index) => {
+      if (descriptionRegex.test(line)) {
+        return (
+          <div
+            dangerouslySetInnerHTML={{ __html: line }}
+            key={ line.slice(-6) + index }
+          />
+        );
+      }
+      return (
+        <p
+          className='wrappable'
+          dangerouslySetInnerHTML= {{ __html: line }}
+          key={ line.slice(-6) + index }
+        />
+      );
+    });
+  }
+
+  render() {
+    const {
+      description,
+      executeChallenge,
+      output,
+      tests,
+      title,
+      // provided by redux-form
+      fields: { solution },
+      handleSubmit,
+      submitting
+    } = this.props;
+
+    const buttonCopy = submitting ?
+      'Submit and go to my next challenge' :
+      "I've completed this challenge";
+    return (
+      <Row>
+        <Col
+          xs={ 6 }
+          xsOffset={ 3 }
+          >
+          <Row>
+            <ChallengeTitle>
+              { title }
+            </ChallengeTitle>
+            <ChallengeDescription>
+              { this.renderDescription(description) }
+            </ChallengeDescription>
+          </Row>
+          <Row>
+            <form
+              name='BackEndChallenge'
+              onSubmit={ handleSubmit(executeChallenge) }
+              >
+              <SolutionInput
+                placeholder='https://your-app.com'
+                solution={ solution }
+              />
+              <Button
+                block={ true }
+                bsStyle='primary'
+                className='btn-big'
+                onClick={ submitting ? null : null }
+                type={ submitting ? null : 'submit' }
+                >
+                { buttonCopy } (ctrl + enter)
+              </Button>
+            </form>
+          </Row>
+          <Row>
+            <br/>
+            <Output
+              defaultOutput={
+`/**
+  * Test output will go here
+  */`
+              }
+              output={ output }
+            />
+          </Row>
+          <Row>
+            <TestSuite tests={ tests } />
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+BackEnd.displayName = 'BackEnd';
+BackEnd.propTypes = propTypes;
+
+export default reduxForm(
+  {
+    form: 'BackEndChallenge',
+    fields,
+    validate: createFormValidator(fieldValidators)
+  },
+  mapStateToProps,
+  mapDispatchToActions
+)(BackEnd);
diff --git a/packages/learn/src/templates/Challenges/views/backend/Show.jsx b/packages/learn/src/templates/Challenges/views/backend/Show.jsx
new file mode 100644
index 0000000000..e69702c750
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/backend/Show.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { addNS } from 'berkeleys-redux-utils';
+
+import ChildContainer from '../../Child-Container.jsx';
+import BackEnd from './Back-End.jsx';
+import { types } from '../../redux';
+import Panes from '../../../../Panes';
+import _Map from '../../../../Map';
+
+const propTypes = {};
+
+export const mapStateToPanes = addNS(
+  'backend',
+  () => ({
+    [types.toggleMap]: 'Map',
+    [types.toggleMain]: 'Main'
+  })
+);
+
+const nameToComponent = {
+  Map: _Map,
+  Main: BackEnd
+};
+
+const renderPane = name => {
+  const Comp = nameToComponent[name];
+  return Comp ? <Comp /> : <span>Pane { name } not found</span>;
+};
+
+export default function ShowBackEnd() {
+  return (
+    <ChildContainer isFullWidth={ true }>
+      <Panes render={ renderPane } />
+    </ChildContainer>
+  );
+}
+
+ShowBackEnd.displayName = 'ShowBackEnd';
+ShowBackEnd.propTypes = propTypes;
diff --git a/packages/learn/src/templates/Challenges/views/backend/index.js b/packages/learn/src/templates/Challenges/views/backend/index.js
new file mode 100644
index 0000000000..53c86f5f0b
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/backend/index.js
@@ -0,0 +1 @@
+export { default, mapStateToPanes } from './Show.jsx';
diff --git a/packages/learn/src/templates/Challenges/views/classic/Editor.js b/packages/learn/src/templates/Challenges/views/classic/Editor.js
new file mode 100644
index 0000000000..06459b7b42
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/classic/Editor.js
@@ -0,0 +1,107 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Controlled as CodeMirror } from 'react-codemirror2';
+
+import { executeChallenge, updateFile } from '../../redux';
+
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/material.css';
+
+require('codemirror/mode/htmlmixed/htmlmixed');
+require('codemirror/mode/javascript/javascript');
+
+const propTypes = {
+  contents: PropTypes.string,
+  executeChallenge: PropTypes.func.isRequired,
+  ext: PropTypes.string,
+  fileKey: PropTypes.string,
+  updateFile: PropTypes.func.isRequired
+};
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      executeChallenge,
+      updateFile
+    },
+    dispatch
+  );
+
+const modeMap = {
+  html: 'htmlmixed',
+  js: 'javascript',
+  jsx: 'javascript'
+};
+
+class Editor extends PureComponent {
+  constructor(...props) {
+    super(...props);
+
+    this._editor = null;
+  }
+
+  handleChange = editorValue => {
+    const { updateFile, fileKey } = this.props;
+    updateFile({ key: fileKey, editorValue });
+  };
+
+  render() {
+    const { contents, executeChallenge, ext } = this.props;
+
+    return (
+      <div className='classic-editor editor'>
+        <CodeMirror
+          onBeforeChange={(editor, something, newValue) =>
+            this.handleChange(newValue)
+          }
+          options={{
+            mode: modeMap[ext],
+            theme: 'material',
+            lineNumbers: true,
+            lineWrapping: true,
+            extraKeys: {
+              Esc() {
+                document.activeElement.blur();
+              },
+              Tab(cm) {
+                if (cm.somethingSelected()) {
+                  return cm.indentSelection('add');
+                }
+                const spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
+                return cm.replaceSelection(spaces);
+              },
+              'Shift-Tab': function(cm) {
+                return cm.indentSelection('subtract');
+              },
+              'Ctrl-Enter': function() {
+                executeChallenge();
+                return false;
+              },
+              'Cmd-Enter': function() {
+                executeChallenge();
+                return false;
+              }
+              // TODO: Not working in cm2
+              // 'Ctrl-/': function(cm) {
+              //   cm.toggleComment();
+              // },
+              // 'Cmd-/': function(cm) {
+              //   cm.toggleComment();
+              // }
+            }
+          }}
+          value={contents}
+        />
+      </div>
+    );
+  }
+}
+
+Editor.displayName = 'Editor';
+Editor.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Editor);
diff --git a/packages/learn/src/templates/Challenges/views/classic/Show.js b/packages/learn/src/templates/Challenges/views/classic/Show.js
new file mode 100644
index 0000000000..ce916132c0
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/classic/Show.js
@@ -0,0 +1,160 @@
+/* global graphql */
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { createSelector } from 'reselect';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
+
+import Editor from './Editor';
+import Preview from '../components/Preview';
+import SidePanel from '../components/Side-Panel';
+import CompletionModal from '../components/CompletionModal';
+
+import { challengeTypes } from '../../../../../utils/challengeTypes';
+import { ChallengeNode } from '../../../../redux/propTypes';
+import {
+  createFiles,
+  challengeFilesSelector,
+  initTests,
+  updateChallengeMeta
+} from '../../redux';
+
+import './classic.css';
+
+const mapStateToProps = createSelector(challengeFilesSelector, files => ({
+  files
+}));
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ createFiles, initTests, updateChallengeMeta }, dispatch);
+
+const propTypes = {
+  createFiles: PropTypes.func.isRequired,
+  data: PropTypes.shape({
+    challengeNode: ChallengeNode
+  }),
+  files: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  initTests: PropTypes.func.isRequired,
+  pathContext: PropTypes.shape({
+    challengeMeta: PropTypes.shape({
+      nextchallengePath: PropTypes.string
+    })
+  }),
+  updateChallengeMeta: PropTypes.func.isRequired
+};
+
+class ShowClassic extends PureComponent {
+  componentDidMount() {
+    const {
+      createFiles,
+      initTests,
+      updateChallengeMeta,
+      data: { challengeNode: { files, fields: { tests } } },
+      pathContext: { challengeMeta }
+    } = this.props;
+    createFiles(files);
+    initTests(tests);
+    updateChallengeMeta(challengeMeta);
+  }
+
+  render() {
+    const {
+      data: {
+        challengeNode: {
+          challengeType,
+          fields: { blockName },
+          title,
+          description,
+          guideUrl
+        }
+      },
+      files
+    } = this.props;
+    const editors = Object.keys(files)
+      .map(key => files[key])
+      .map((file, index) => (
+        <Fragment key={file.key + index}>
+          {index !== 0 && <ReflexSplitter />}
+          <ReflexElement flex={1}>
+            <Editor {...file} fileKey={file.key} />
+          </ReflexElement>
+        </Fragment>
+      ));
+
+    const showPreview = challengeType === challengeTypes.html;
+    const blockNameTitle = `${blockName} - ${title}`;
+    return (
+      <Fragment>
+        <Helmet title={`${blockNameTitle} | Learn freeCodeCamp}`} />
+        <ReflexContainer orientation='vertical'>
+          <ReflexElement flex={1}>
+            <SidePanel
+              className='full-height'
+              description={description}
+              guideUrl={guideUrl}
+              title={blockNameTitle}
+            />
+          </ReflexElement>
+          <ReflexSplitter />
+          <ReflexElement flex={1}>
+            <ReflexContainer orientation='horizontal'>
+              {editors}
+            </ReflexContainer>
+          </ReflexElement>
+          {showPreview && <ReflexSplitter />}
+          {showPreview && (
+            <ReflexElement flex={0.3} maxSize={325}>
+              <Preview className='full-height' />
+            </ReflexElement>
+          )}
+        </ReflexContainer>
+        <CompletionModal />
+      </Fragment>
+    );
+  }
+}
+
+ShowClassic.displayName = 'ShowClassic';
+ShowClassic.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShowClassic);
+
+export const query = graphql`
+  query ClassicChallenge($slug: String!) {
+    challengeNode(fields: { slug: { eq: $slug } }) {
+      title
+      guideUrl
+      description
+      challengeType
+      fields {
+        blockName
+        tests {
+          text
+          testString
+        }
+      }
+      files {
+        indexhtml {
+          key
+          ext
+          name
+          contents
+          head
+          tail
+        }
+        indexjs {
+          key
+          ext
+          name
+          contents
+          head
+          tail
+        }
+      }
+    }
+  }
+`;
diff --git a/packages/learn/src/templates/Challenges/views/classic/classic.css b/packages/learn/src/templates/Challenges/views/classic/classic.css
new file mode 100644
index 0000000000..a7d7f58fc4
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/classic/classic.css
@@ -0,0 +1,9 @@
+.editor,
+.react-codemirror2,
+.react-codemirror2 > .CodeMirror-wrap {
+  height: 100%;
+}
+
+.instructions-panel {
+  padding: 0 10px;
+}
\ No newline at end of file
diff --git a/packages/learn/src/templates/Challenges/views/classic/index.js b/packages/learn/src/templates/Challenges/views/classic/index.js
new file mode 100644
index 0000000000..238f9c2da1
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/classic/index.js
@@ -0,0 +1 @@
+export { default } from './Show.js';
diff --git a/packages/learn/src/templates/Challenges/views/components/Challenge-Description.js b/packages/learn/src/templates/Challenges/views/components/Challenge-Description.js
new file mode 100644
index 0000000000..c9d40fbf7e
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Challenge-Description.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col, Row } from 'react-bootstrap';
+
+const propTypes = {
+  children: PropTypes.array
+};
+
+function ChallengeDescription({ children }) {
+  // TODO: Remove bootstrap
+  return (
+    <Row>
+      <Col className='challenge-instructions' xs={12}>
+        {children}
+      </Col>
+    </Row>
+  );
+}
+
+ChallengeDescription.displayName = 'ChallengeDescription';
+ChallengeDescription.propTypes = propTypes;
+
+export default ChallengeDescription;
diff --git a/packages/learn/src/templates/Challenges/views/components/Challenge-Title.js b/packages/learn/src/templates/Challenges/views/components/Challenge-Title.js
new file mode 100644
index 0000000000..60984fa511
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Challenge-Title.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  children: PropTypes.string,
+  isCompleted: PropTypes.bool
+};
+
+function ChallengeTitle({ children, isCompleted }) {
+  let icon = null;
+  if (isCompleted) {
+    icon = (
+      // TODO Use SVG here
+      <i className='ion-checkmark-circled text-primary' title='Completed' />
+    );
+  }
+  return (
+    <h4 className='text-center challenge-title'>
+      {children || 'Happy Coding!'}
+      {icon}
+      <hr />
+    </h4>
+  );
+}
+
+ChallengeTitle.displayName = 'ChallengeTitle';
+ChallengeTitle.propTypes = propTypes;
+
+export default ChallengeTitle;
diff --git a/packages/learn/src/templates/Challenges/views/components/CompletionModal.js b/packages/learn/src/templates/Challenges/views/components/CompletionModal.js
new file mode 100644
index 0000000000..ff0a2f1072
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/CompletionModal.js
@@ -0,0 +1,99 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { Button, Modal } from 'react-bootstrap';
+
+import GreenPass from '../../icons/GreenPass';
+
+import {
+  closeModal,
+  submitChallenge,
+  isCompletionModalOpenSelector,
+  successMessageSelector
+} from '../../redux';
+
+const mapStateToProps = createSelector(
+  isCompletionModalOpenSelector,
+  successMessageSelector,
+  (isOpen, message) => ({
+    isOpen,
+    message
+  })
+);
+
+const mapDispatchToProps = function(dispatch) {
+  const dispatchers = {
+    close: () => dispatch(closeModal('completion')),
+    handleKeypress: e => {
+      if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+        console.log('dispatching');
+        dispatch(submitChallenge());
+      }
+    },
+    submitChallenge: () => {
+      console.log('dispatching');
+      dispatch(submitChallenge());
+    }
+  };
+  return () => dispatchers;
+};
+
+const propTypes = {
+  close: PropTypes.func.isRequired,
+  handleKeypress: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool,
+  message: PropTypes.string,
+  submitChallenge: PropTypes.func.isRequired
+};
+
+export class CompletionModal extends PureComponent {
+  render() {
+    const {
+      close,
+      isOpen,
+      submitChallenge,
+      handleKeypress,
+      message
+    } = this.props;
+    return (
+      <Modal
+        animation={false}
+        dialogClassName={'challenge-success-modal'}
+        keyboard={true}
+        onHide={close}
+        onKeyDown={isOpen ? handleKeypress : noop}
+        show={isOpen}
+        >
+        <Modal.Header className={'challenge-list-header'} closeButton={true}>
+          <Modal.Title>{message}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className='text-center'>
+            <div className='row'>
+              <div>
+                <GreenPass />
+              </div>
+            </div>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            block={true}
+            bsSize='large'
+            bsStyle='primary'
+            onClick={submitChallenge}
+            >
+            Submit and go to next challenge (Ctrl + Enter)
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+CompletionModal.displayName = 'CompletionModal';
+CompletionModal.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(CompletionModal);
diff --git a/packages/learn/src/templates/Challenges/views/components/Help-Modal.jsx b/packages/learn/src/templates/Challenges/views/components/Help-Modal.jsx
new file mode 100644
index 0000000000..5339be2b49
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Help-Modal.jsx
@@ -0,0 +1,75 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Button, Modal } from 'react-bootstrap';
+
+import ns from './ns.json';
+import {
+  createQuestion,
+  closeHelpModal,
+  helpModalSelector
+} from './redux';
+import { RSA } from '../../../utils/constantStrings.json';
+
+const mapStateToProps = state => ({ isOpen: helpModalSelector(state) });
+const mapDispatchToProps = { createQuestion, closeHelpModal };
+
+const propTypes = {
+  closeHelpModal: PropTypes.func.isRequired,
+  createQuestion: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool
+};
+
+export class HelpModal extends PureComponent {
+  render() {
+    const {
+      isOpen,
+      closeHelpModal,
+      createQuestion
+    } = this.props;
+    return (
+      <Modal
+        show={ isOpen }
+        >
+        <Modal.Header className={ `${ns}-list-header` }>
+          Ask for help?
+          <span
+            className='close closing-x'
+            onClick={ closeHelpModal }
+            >
+            ×
+          </span>
+        </Modal.Header>
+        <Modal.Body className='text-center'>
+          <h3 className={`${ns}-help-modal-heading`}>
+            If you've already tried the&nbsp;
+            <a href={ RSA } target='_blank' title='Read, search, ask'>
+              Read-Search-Ask</a>&nbsp; method, then you can ask for help
+              on the freeCodeCamp forum.
+          </h3>
+          <Button
+            block={ true }
+            bsSize='lg'
+            bsStyle='primary'
+            onClick={ createQuestion }
+            >
+            Create a help post on the forum
+          </Button>
+          <Button
+            block={ true }
+            bsSize='lg'
+            bsStyle='primary'
+            onClick={ closeHelpModal }
+            >
+            Cancel
+          </Button>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+HelpModal.displayName = 'HelpModal';
+HelpModal.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(HelpModal);
diff --git a/packages/learn/src/templates/Challenges/views/components/Output.js b/packages/learn/src/templates/Challenges/views/components/Output.js
new file mode 100644
index 0000000000..58537f54c9
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Output.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Controlled as CodeMirror } from 'react-codemirror2';
+
+import './output.css';
+
+const defaultOptions = {
+  lineNumbers: false,
+  lineWrapping: true,
+  mode: 'javascript',
+  readOnly: 'nocursor'
+};
+
+const propTypes = {
+  defaultOutput: PropTypes.string,
+  output: PropTypes.string
+};
+
+function Output({ output, defaultOutput }) {
+  return (
+    <CodeMirror
+      className='challenge-log'
+      options={{ ...defaultOptions, theme: 'material' }}
+      value={output || defaultOutput}
+    />
+  );
+}
+
+Output.displayName = 'Output';
+Output.propTypes = propTypes;
+
+export default Output;
diff --git a/packages/learn/src/templates/Challenges/views/components/Preview.js b/packages/learn/src/templates/Challenges/views/components/Preview.js
new file mode 100644
index 0000000000..6fd153b424
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Preview.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './preview.css';
+
+const mainId = 'fcc-main-frame';
+
+export function Preview() {
+  return (
+    <div className='challenge-preview'>
+      <iframe className={'challenge-preview-frame'} id={mainId} />
+    </div>
+  );
+}
+
+Preview.displayName = 'Preview';
+
+export default Preview;
diff --git a/packages/learn/src/templates/Challenges/views/components/Show.jsx b/packages/learn/src/templates/Challenges/views/components/Show.jsx
new file mode 100644
index 0000000000..43f88f7be2
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Show.jsx
@@ -0,0 +1,128 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { challengeMetaSelector, updateSuccessMessage } from './redux';
+
+import Classic from './views/classic';
+import Step from './views/step';
+import Project from './views/project';
+import BackEnd from './views/backend';
+import Quiz from './views/quiz';
+import Modern from './views/Modern';
+import NotFound from '../../NotFound';
+
+import { fullBlocksSelector } from '../../entities';
+import {
+  fetchChallenge,
+  challengeSelector,
+  updateTitle
+} from '../../redux';
+import { makeToast } from '../../Toasts/redux';
+import { paramsSelector } from '../../Router/redux';
+import { randomCompliment } from '../../utils/get-words';
+
+const views = {
+  backend: BackEnd,
+  classic: Classic,
+  modern: Modern,
+  project: Project,
+  quiz: Quiz,
+  simple: Project,
+  step: Step,
+  invalid: NotFound
+};
+
+const mapDispatchToProps = {
+  fetchChallenge,
+  makeToast,
+  updateTitle,
+  updateSuccessMessage
+};
+
+const mapStateToProps = createSelector(
+  challengeSelector,
+  challengeMetaSelector,
+  paramsSelector,
+  fullBlocksSelector,
+  (
+    { dashedName, isTranslated },
+    { viewType, title },
+    params,
+    blocks
+  ) => ({
+    blocks,
+    challenge: dashedName,
+    isTranslated,
+    params,
+    title,
+    viewType
+  })
+);
+
+const link = 'http://forum.freecodecamp.org/t/' +
+  'guidelines-for-translating-free-code-camp' +
+  '-to-any-language/19111';
+const helpUsTranslate = <a href={ link } target='_blank'>Help Us</a>;
+const propTypes = {
+  isTranslated: PropTypes.bool,
+  makeToast: PropTypes.func.isRequired,
+  params: PropTypes.shape({
+    block: PropTypes.string,
+    dashedName: PropTypes.string,
+    lang: PropTypes.string.isRequired
+  }),
+  showLoading: PropTypes.bool,
+  title: PropTypes.string,
+  updateSuccessMessage: PropTypes.func.isRequired,
+  updateTitle: PropTypes.func.isRequired,
+  viewType: PropTypes.string
+};
+
+export class Show extends PureComponent {
+
+  isNotTranslated({ isTranslated, params: { lang } }) {
+    return lang !== 'en' && !isTranslated;
+  }
+
+  makeTranslateToast() {
+    this.props.makeToast({
+      message: 'We haven\'t translated this challenge yet.',
+      action: helpUsTranslate,
+      timeout: 15000
+    });
+  }
+
+  componentDidMount() {
+    this.props.updateTitle(this.props.title);
+    this.props.updateSuccessMessage(randomCompliment());
+    if (this.isNotTranslated(this.props)) {
+      this.makeTranslateToast();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.title !== nextProps.title) {
+      this.props.updateTitle(nextProps.title);
+    }
+    const { params: { dashedName } } = nextProps;
+    if (this.props.params.dashedName !== dashedName) {
+      this.props.updateSuccessMessage(randomCompliment());
+      if (this.isNotTranslated(nextProps)) {
+        this.makeTranslateToast();
+      }
+    }
+  }
+
+  render() {
+    const { viewType } = this.props;
+    const View = views[viewType] || Classic;
+    return <View />;
+  }
+}
+
+Show.displayName = 'Show(ChallengeView)';
+Show.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Show);
diff --git a/packages/learn/src/templates/Challenges/views/components/Side-Panel.js b/packages/learn/src/templates/Challenges/views/components/Side-Panel.js
new file mode 100644
index 0000000000..e2aa38bdf9
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Side-Panel.js
@@ -0,0 +1,124 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import ReactDom from 'react-dom';
+import { createSelector } from 'reselect';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+// import HelpModal from './Help-Modal.jsx';
+import ToolPanel from './Tool-Panel';
+import ChallengeTitle from './Challenge-Title';
+import ChallengeDescription from './Challenge-Description';
+import TestSuite from './Test-Suite';
+import Output from './Output';
+import Spacer from '../../../../components/util/Spacer';
+
+import {
+  consoleOutputSelector,
+  challengeTestsSelector,
+  executeChallenge
+} from '../../redux';
+import { descriptionRegex } from '../../../../../utils';
+
+const mapStateToProps = createSelector(
+  consoleOutputSelector,
+  challengeTestsSelector,
+  (output, tests) => ({ output, tests })
+);
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ executeChallenge }, dispatch);
+
+const propTypes = {
+  description: PropTypes.arrayOf(PropTypes.string),
+  executeChallenge: PropTypes.func.isRequired,
+  guideUrl: PropTypes.string,
+  output: PropTypes.string,
+  tests: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      testString: PropTypes.string
+    })
+  ),
+  title: PropTypes.string
+};
+
+export class SidePanel extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.bindTopDiv = this.bindTopDiv.bind(this);
+  }
+
+  componentWillUpdate(nextProps) {
+    const { title } = this.props;
+    if (title !== nextProps.title) {
+      const node = ReactDom.findDOMNode(this.descriptionTop);
+      setTimeout(() => {
+        node.scrollIntoView({ behavior: 'smooth' });
+      }, 0);
+    }
+  }
+
+  bindTopDiv(node) {
+    this.descriptionTop = node;
+  }
+
+  renderDescription(description = ['Happy Coding!']) {
+    return description.map((line, index) => {
+      if (descriptionRegex.test(line)) {
+        return (
+          <div
+            dangerouslySetInnerHTML={{ __html: line }}
+            key={line.slice(-6) + index}
+          />
+        );
+      }
+      return (
+        <p
+          className='wrappable'
+          dangerouslySetInnerHTML={{ __html: line }}
+          key={line.slice(-6) + index}
+        />
+      );
+    });
+  }
+
+  render() {
+    const {
+      title,
+      description,
+      tests = [],
+      output = '',
+      guideUrl,
+      executeChallenge
+    } = this.props;
+    return (
+      <div className={'instructions-panel'} ref='panel' role='complementary'>
+        <div ref={this.bindTopDiv} />
+        <div>
+          <ChallengeTitle>{title}</ChallengeTitle>
+          <ChallengeDescription>
+            {this.renderDescription(description)}
+          </ChallengeDescription>
+        </div>
+        <ToolPanel executeChallenge={executeChallenge} guideUrl={guideUrl} />
+        <Spacer />
+        <Output
+          defaultOutput={`/**
+  * Your output will go here.
+  * Any console.log() statements
+  * will appear in here as well.
+  */`}
+          output={output}
+        />
+        <br />
+        <TestSuite tests={tests} />
+      </div>
+    );
+  }
+}
+
+SidePanel.displayName = 'SidePanel';
+SidePanel.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(SidePanel);
diff --git a/packages/learn/src/templates/Challenges/views/components/Solution-Input.jsx b/packages/learn/src/templates/Challenges/views/components/Solution-Input.jsx
new file mode 100644
index 0000000000..c6be18f8dc
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Solution-Input.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HelpBlock, FormGroup, FormControl } from 'react-bootstrap';
+import { getValidationState, DOMOnlyProps } from '../../utils/form';
+
+const propTypes = {
+  placeholder: PropTypes.string,
+  solution: PropTypes.object
+};
+
+export default function SolutionInput({ solution, placeholder }) {
+  const validationState = getValidationState(solution);
+
+  return (
+    <FormGroup
+      controlId='solution'
+      validationState={
+        (validationState && validationState.includes('warning')) ?
+          'warning' :
+          validationState
+      }
+      >
+      <FormControl
+        name='solution'
+        placeholder={ placeholder }
+        type='url'
+        { ...DOMOnlyProps(solution) }
+      />
+      {
+        validationState === 'error' &&
+          <HelpBlock>Make sure you provide a proper URL.</HelpBlock>
+      }
+      {
+        validationState === 'glitch-warning' &&
+          <HelpBlock>
+            Make sure you have entered a shareable URL
+            (e.g. "https://green-camper.glitch.me", not
+            "https://glitch.com/#!/edit/green-camper".)
+          </HelpBlock>
+      }
+    </FormGroup>
+  );
+}
+
+SolutionInput.displayName = 'SolutionInput';
+SolutionInput.propTypes = propTypes;
diff --git a/packages/learn/src/templates/Challenges/views/components/Test-Suite.js b/packages/learn/src/templates/Challenges/views/components/Test-Suite.js
new file mode 100644
index 0000000000..a31aa9b183
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Test-Suite.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import GreenPass from '../../icons/GreenPass';
+import RedFail from '../../icons/RedFail';
+
+import './test-suite.css';
+
+const propTypes = {
+  tests: PropTypes.arrayOf(PropTypes.object)
+};
+
+function getAccessibleText(err, pass, text) {
+  let accessibleText = 'Waiting';
+
+  // Determine test status (i.e. icon)
+  if (err) {
+    accessibleText = 'Error';
+  } else if (pass) {
+    accessibleText = 'Pass';
+  }
+
+  // Append the text itself
+  return accessibleText + ' - ' + text;
+}
+
+function TestSuite({ tests }) {
+  return (
+    <div className='challenge-test-suite'>
+      {tests.map(({ err, pass = false, text = '' }, index) => {
+        return (
+          <div
+            aria-label={getAccessibleText(err, pass, text)}
+            className='test-result'
+            key={text.slice(-6) + index}
+            tabIndex='0'
+            >
+            <div className='test-status-icon'>
+              {pass ? <GreenPass /> : <RedFail />}
+            </div>
+            <div
+              aria-hidden='true'
+              className='test-output'
+              dangerouslySetInnerHTML={{ __html: text }}
+              xs={10}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+TestSuite.displayName = 'TestSuite';
+TestSuite.propTypes = propTypes;
+
+export default TestSuite;
diff --git a/packages/learn/src/templates/Challenges/views/components/Tool-Panel.js b/packages/learn/src/templates/Challenges/views/components/Tool-Panel.js
new file mode 100644
index 0000000000..408ade6e27
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/Tool-Panel.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from 'react-bootstrap';
+
+const propTypes = {
+  executeChallenge: PropTypes.func.isRequired,
+  guideUrl: PropTypes.string
+};
+
+function ToolPanel({ executeChallenge, guideUrl }) {
+  return (
+    <div>
+      <Button
+        block={true}
+        bsStyle='primary'
+        className='btn-big'
+        onClick={executeChallenge}
+        >
+        Run tests (Ctrl + Enter)
+      </Button>
+      <div className='button-spacer' />
+      <Button block={true} bsStyle='primary' className='btn-big'>
+        Reset your code
+      </Button>
+      <div className='button-spacer' />
+      {guideUrl && (
+        <div>
+          <Button
+            block={true}
+            bsStyle='primary'
+            className='btn-big'
+            href={guideUrl}
+            target='_blank'
+            >
+            Get a hint
+          </Button>
+          <div className='button-spacer' />
+        </div>
+      )}
+      <Button block={true} bsStyle='primary' className='btn-big'>
+        Ask for help on the forum
+      </Button>
+      <div className='button-spacer' />
+    </div>
+  );
+}
+
+ToolPanel.displayName = 'ToolPanel';
+ToolPanel.propTypes = propTypes;
+
+export default ToolPanel;
diff --git a/packages/learn/src/templates/Challenges/views/components/output.css b/packages/learn/src/templates/Challenges/views/components/output.css
new file mode 100644
index 0000000000..f8b4b62d83
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/output.css
@@ -0,0 +1,3 @@
+.react-codemirror2.challenge-log > .CodeMirror {
+  height: 150px;
+}
diff --git a/packages/learn/src/templates/Challenges/views/components/preview.css b/packages/learn/src/templates/Challenges/views/components/preview.css
new file mode 100644
index 0000000000..020fa5f831
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/preview.css
@@ -0,0 +1,3 @@
+.hide-test-frame {
+  display: none;
+}
\ No newline at end of file
diff --git a/packages/learn/src/templates/Challenges/views/components/test-suite.css b/packages/learn/src/templates/Challenges/views/components/test-suite.css
new file mode 100644
index 0000000000..913764c3a1
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/components/test-suite.css
@@ -0,0 +1,26 @@
+.challenge-test-suite {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+
+.test-result {
+  display: flex;
+  width: 100%;
+  height: 56px;
+  align-items: center;
+}
+
+.test-result:nth-child(odd) {
+  background-color: #eee;
+}
+
+.test-output {
+  margin-left: 15px;
+}
+
+.test-status-icon {
+  display: flex;
+  align-items: center;
+  margin-left: 3px;
+}
\ No newline at end of file
diff --git a/packages/learn/src/templates/Challenges/views/project/Forms.jsx b/packages/learn/src/templates/Challenges/views/project/Forms.jsx
new file mode 100644
index 0000000000..b563412dc6
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/Forms.jsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { reduxForm } from 'redux-form';
+import {
+  Button,
+  FormGroup,
+  FormControl
+} from 'react-bootstrap';
+
+import { showProjectSubmit } from './redux';
+import SolutionInput from '../../Solution-Input.jsx';
+import { openChallengeModal } from '../../redux';
+import {
+  isValidURL,
+  makeRequired,
+  createFormValidator,
+  getValidationState
+} from '../../../../utils/form';
+
+const propTypes = {
+  fields: PropTypes.object,
+  handleSubmit: PropTypes.func,
+  isSignedIn: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
+  openChallengeModal: PropTypes.func.isRequired,
+  resetForm: PropTypes.func,
+  showProjectSubmit: PropTypes.func,
+  submitChallenge: PropTypes.func
+};
+
+const bindableActions = {
+  openChallengeModal,
+  showProjectSubmit
+};
+const frontEndFields = [ 'solution' ];
+const backEndFields = [
+  'solution',
+  'githubLink'
+];
+
+const fieldValidators = {
+  solution: makeRequired(isValidURL)
+};
+
+const backEndFieldValidators = {
+  ...fieldValidators,
+  githubLink: makeRequired(isValidURL)
+};
+
+export function _FrontEndForm({
+  fields,
+  handleSubmit,
+  openChallengeModal,
+  isSubmitting,
+  showProjectSubmit
+}) {
+  const buttonCopy = isSubmitting ?
+    'Submit and go to my next challenge' :
+    "I've completed this challenge";
+  return (
+    <form
+      name='NewFrontEndProject'
+      onSubmit={ handleSubmit(openChallengeModal) }
+      >
+      {
+        isSubmitting ?
+          <SolutionInput
+            placeholder='https://codepen/your-project'
+            { ...fields }
+          /> :
+          null
+      }
+      <Button
+        block={ true }
+        bsStyle='primary'
+        className='btn-big'
+        onClick={ isSubmitting ? null : showProjectSubmit }
+        type={ isSubmitting ? 'submit' : null }
+        >
+        { buttonCopy } (ctrl + enter)
+      </Button>
+    </form>
+  );
+}
+
+_FrontEndForm.propTypes = propTypes;
+
+export const FrontEndForm = reduxForm(
+  {
+    form: 'NewFrontEndProject',
+    fields: frontEndFields,
+    validate: createFormValidator(fieldValidators)
+  },
+  null,
+  bindableActions
+)(_FrontEndForm);
+
+export function _BackEndForm({
+  fields: { solution, githubLink },
+  handleSubmit,
+  openChallengeModal,
+  isSubmitting,
+  showProjectSubmit
+}) {
+  const buttonCopy = isSubmitting ?
+    'Submit and go to my next challenge' :
+    "I've completed this challenge";
+  return (
+    <form
+      name='NewBackEndProject'
+      onSubmit={ handleSubmit(openChallengeModal) }
+      >
+      {
+        isSubmitting ?
+          <SolutionInput
+            placeholder='https://your-app.com'
+            solution={ solution }
+          /> :
+          null
+      }
+      { isSubmitting ?
+        <FormGroup
+          controlId='githubLink'
+          validationState={ getValidationState(githubLink) }
+          >
+          <FormControl
+            name='githubLink'
+            placeholder='https://github.com/your-username/your-project'
+            type='url'
+            { ...githubLink }
+          />
+        </FormGroup> :
+        null
+      }
+      <Button
+        block={ true }
+        bsStyle='primary'
+        className='btn-big'
+        onClick={ isSubmitting ? null : showProjectSubmit }
+        type={ isSubmitting ? 'submit' : null }
+        >
+        { buttonCopy } (ctrl + enter)
+      </Button>
+    </form>
+  );
+}
+
+_BackEndForm.propTypes = propTypes;
+
+export const BackEndForm = reduxForm(
+  {
+    form: 'NewBackEndProject',
+    fields: backEndFields,
+    validate: createFormValidator(backEndFieldValidators)
+  },
+  null,
+  bindableActions
+)(_BackEndForm);
diff --git a/packages/learn/src/templates/Challenges/views/project/Project.jsx b/packages/learn/src/templates/Challenges/views/project/Project.jsx
new file mode 100644
index 0000000000..977cfa2aca
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/Project.jsx
@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { createSelector } from 'reselect';
+import { connect } from 'react-redux';
+import { Col } from 'react-bootstrap';
+
+import SidePanel from './Side-Panel.jsx';
+import ToolPanel from './Tool-Panel.jsx';
+import HelpModal from '../../Help-Modal.jsx';
+
+import { challengeMetaSelector } from '../../redux';
+import { challengeSelector } from '../../../../redux';
+
+const mapStateToProps = createSelector(
+  challengeSelector,
+  challengeMetaSelector,
+  ({ description }, { title }) => ({
+    title,
+    description
+  })
+);
+const propTypes = {
+  description: PropTypes.arrayOf(PropTypes.string),
+  isCompleted: PropTypes.bool,
+  title: PropTypes.string
+};
+
+export class Project extends PureComponent {
+  render() {
+    const {
+      title,
+      isCompleted,
+      description
+    } = this.props;
+    return (
+      <Col
+        md={ 8 }
+        xs={ 12 }
+        >
+        <SidePanel
+          description={ description }
+          isCompleted={ isCompleted }
+          title={ title }
+        />
+        <br />
+        <ToolPanel />
+        <HelpModal />
+      </Col>
+    );
+  }
+}
+
+Project.displayName = 'Project';
+Project.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps
+)(Project);
diff --git a/packages/learn/src/templates/Challenges/views/project/Show.js b/packages/learn/src/templates/Challenges/views/project/Show.js
new file mode 100644
index 0000000000..07b1e95e88
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/Show.js
@@ -0,0 +1,40 @@
+import React from 'react';
+// import { addNS } from 'berkeleys-redux-utils';
+
+// import ns from './ns.json';
+// import Main from './Project.jsx';
+// import ChildContainer from '../../Child-Container.jsx';
+// import { types } from '../../redux';
+// import Panes from '../../../../Panes';
+// import _Map from '../../../../Map';
+
+// const propTypes = {};
+// export const mapStateToPanes = addNS(
+//   ns,
+//   () => ({
+//     [types.toggleMap]: 'Map',
+//     [types.toggleMain]: 'Main'
+//   })
+// );
+
+// const nameToComponent = {
+//   Map: _Map,
+//   Main: Main
+// };
+
+// const renderPane = name => {
+//   const Comp = nameToComponent[name];
+//   return Comp ? <Comp /> : <span>Pane { name } not found</span>;
+// };
+
+export default function ShowProject() {
+  return (
+    <h1>Project</h1>
+    // <ChildContainer isFullWidth={ true }>
+    //   <Panes render={ renderPane }/>
+    // </ChildContainer>
+  );
+}
+
+ShowProject.displayName = 'ShowProject';
+// ShowProject.propTypes = propTypes;
diff --git a/packages/learn/src/templates/Challenges/views/project/Side-Panel.jsx b/packages/learn/src/templates/Challenges/views/project/Side-Panel.jsx
new file mode 100644
index 0000000000..b93a3a7b3f
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/Side-Panel.jsx
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import ChallengeTitle from '../../Challenge-Title.jsx';
+
+const propTypes = {
+  description: PropTypes.arrayOf(PropTypes.string),
+  isCompleted: PropTypes.bool,
+  isSignedIn: PropTypes.bool,
+  title: PropTypes.string
+};
+
+export default class SidePanel extends PureComponent {
+  renderDescription(title = '', description = []) {
+    return description.map((line, index) => (
+      <li
+        className='step-text wrappable'
+        dangerouslySetInnerHTML={{ __html: line }}
+        key={ title.slice(6) + index }
+      />
+    ));
+  }
+
+  render() {
+    const { title, description, isCompleted } = this.props;
+    return (
+      <div>
+        <ChallengeTitle isCompleted={ isCompleted }>
+          { title }
+        </ChallengeTitle>
+        <ul>
+          { this.renderDescription(title, description) }
+        </ul>
+      </div>
+    );
+  }
+}
+
+SidePanel.displayName = 'ProjectSidePanel';
+SidePanel.propTypes = propTypes;
diff --git a/packages/learn/src/templates/Challenges/views/project/Tool-Panel.jsx b/packages/learn/src/templates/Challenges/views/project/Tool-Panel.jsx
new file mode 100644
index 0000000000..a7c3e4ad1d
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/Tool-Panel.jsx
@@ -0,0 +1,147 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { Button } from 'react-bootstrap';
+
+import { ButtonSpacer } from '../../../../helperComponents';
+import {
+  FrontEndForm,
+  BackEndForm
+} from './Forms.jsx';
+
+import { submittingSelector } from './redux';
+
+import {
+  openChallengeModal,
+
+  openHelpModal,
+  chatRoomSelector,
+  guideURLSelector
+} from '../../redux';
+
+import {
+  signInLoadingSelector,
+  challengeSelector
+} from '../../../../redux';
+import {
+  simpleProject,
+  frontEndProject
+} from '../../../../utils/challengeTypes';
+
+const propTypes = {
+  guideUrl: PropTypes.string,
+  helpChatRoom: PropTypes.string.isRequired,
+  isFrontEnd: PropTypes.bool,
+  isSignedIn: PropTypes.bool,
+  isSimple: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
+  openChallengeModal: PropTypes.func.isRequired,
+  openHelpModal: PropTypes.func.isRequired
+};
+const mapDispatchToProps = {
+  openChallengeModal,
+  openHelpModal
+};
+const mapStateToProps = createSelector(
+  challengeSelector,
+  signInLoadingSelector,
+  submittingSelector,
+  chatRoomSelector,
+  guideURLSelector,
+  (
+    { challengeType = simpleProject },
+    showLoading,
+    isSubmitting,
+    helpChatRoom,
+    guideUrl
+  ) => ({
+    guideUrl,
+    helpChatRoom,
+    isSignedIn: !showLoading,
+    isSubmitting,
+    isSimple: challengeType === simpleProject,
+    isFrontEnd: challengeType === frontEndProject
+  })
+);
+
+export class ToolPanel extends PureComponent {
+  renderSubmitButton(isSignedIn, openChallengeModal) {
+    const buttonCopy = isSignedIn ?
+      'Submit and go to my next challenge' :
+      "I've completed this challenge";
+    return (
+      <Button
+        block={ true }
+        bsStyle='primary'
+        className='btn-big'
+        onClick={ openChallengeModal }
+        >
+        { buttonCopy } (ctrl + enter)
+      </Button>
+    );
+  }
+
+  render() {
+    const {
+      guideUrl,
+      helpChatRoom,
+      isFrontEnd,
+      isSimple,
+      isSignedIn,
+      isSubmitting,
+      openHelpModal,
+      openChallengeModal
+    } = this.props;
+
+    const FormElement = isFrontEnd ? FrontEndForm : BackEndForm;
+    return (
+      <div>
+        {
+          isSimple ?
+            this.renderSubmitButton(isSignedIn, openChallengeModal) :
+            <FormElement isSubmitting={ isSubmitting }/>
+        }
+        <ButtonSpacer />
+        <Button
+          block={ true }
+          bsStyle='primary'
+          className='btn-primary-ghost btn-big'
+          componentClass='a'
+          href={ `https://gitter.im/freecodecamp/${helpChatRoom}` }
+          target='_blank'
+          >
+          Help
+        </Button>
+        <ButtonSpacer />
+        <Button
+          block={ true }
+          bsStyle='primary'
+          className='btn-primary-ghost btn-big'
+          href={ guideUrl }
+          target='_blank'
+          >
+          Get a hint
+        </Button>
+        <ButtonSpacer />
+        <Button
+          block={ true }
+          bsStyle='primary'
+          className='btn-primary-ghost btn-big'
+          onClick={ openHelpModal }
+          >
+          Ask for help on the forum
+        </Button>
+        <ButtonSpacer />
+      </div>
+    );
+  }
+}
+
+ToolPanel.displayName = 'ProjectToolPanel';
+ToolPanel.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ToolPanel);
diff --git a/packages/learn/src/templates/Challenges/views/project/index.js b/packages/learn/src/templates/Challenges/views/project/index.js
new file mode 100644
index 0000000000..238f9c2da1
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/index.js
@@ -0,0 +1 @@
+export { default } from './Show.js';
diff --git a/packages/learn/src/templates/Challenges/views/project/ns.json b/packages/learn/src/templates/Challenges/views/project/ns.json
new file mode 100644
index 0000000000..a8138abf72
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/ns.json
@@ -0,0 +1 @@
+"project"
diff --git a/packages/learn/src/templates/Challenges/views/project/redux/index.js b/packages/learn/src/templates/Challenges/views/project/redux/index.js
new file mode 100644
index 0000000000..3946866b41
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/redux/index.js
@@ -0,0 +1,27 @@
+// import {
+//   createAction,
+//   createTypes,
+//   handleActions
+// } from 'berkeleys-redux-utils';
+// import ns from '../ns.json';
+
+// export const types = createTypes(['showProjectSubmit'], ns);
+
+// export const showProjectSubmit = createAction(types.showProjectSubmit);
+
+// const initialState = {
+//   // project is ready to submit
+//   isSubmitting: false
+// };
+// export const submittingSelector = state => state[ns].isSubmitting;
+
+// export default handleActions(
+//   () => ({
+//     [types.showProjectSubmit]: state => ({
+//       ...state,
+//       isSubmitting: true
+//     })
+//   }),
+//   initialState,
+//   ns
+// );
diff --git a/packages/learn/src/templates/Challenges/views/project/redux/project-normalizer.js b/packages/learn/src/templates/Challenges/views/project/redux/project-normalizer.js
new file mode 100644
index 0000000000..623a9eb292
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/project/redux/project-normalizer.js
@@ -0,0 +1,11 @@
+// import { callIfDefined, formatUrl } from '../../../../../utils/form';
+
+// export default {
+//   NewFrontEndProject: {
+//     solution: callIfDefined(formatUrl)
+//   },
+//   NewBackEndProject: {
+//     githubLink: callIfDefined(formatUrl),
+//     solution: callIfDefined(formatUrl)
+//   }
+// };
diff --git a/packages/learn/src/templates/Challenges/views/quiz/Choice.jsx b/packages/learn/src/templates/Challenges/views/quiz/Choice.jsx
new file mode 100644
index 0000000000..86de3796e8
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/quiz/Choice.jsx
@@ -0,0 +1,83 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import { createSelector } from 'reselect';
+
+import {
+  selectChoice,
+  incrementCorrect
+} from './redux';
+
+const mapStateToProps = createSelector(
+  () => ({})
+);
+
+function mapDispatchToProps(dispatch) {
+  return () => bindActionCreators({
+    selectChoice,
+    incrementCorrect
+  }, dispatch);
+}
+
+const propTypes = {
+  choice: PropTypes.string,
+  choiceIndex: PropTypes.number,
+  incrementCorrect: PropTypes.func,
+  isChoiceSelected: PropTypes.bool,
+  isCorrectChoice: PropTypes.bool,
+  selectChoice: PropTypes.func,
+  selected: PropTypes.bool
+};
+
+export class Choice extends PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.selectChoice = this.selectChoice.bind(this);
+  }
+
+  selectChoice() {
+    if (this.props.isChoiceSelected) {
+      return;
+    }
+    if (this.props.isCorrectChoice) {
+      this.props.incrementCorrect();
+    }
+    this.props.selectChoice(this.props.choiceIndex);
+  }
+
+  render() {
+    const choiceClass = classnames({
+      choice: true,
+      selected: this.props.selected,
+      correct: this.props.isCorrectChoice,
+      reveal: this.props.isChoiceSelected
+    });
+
+    return (
+      <div
+        className={choiceClass}
+        onClick={this.selectChoice}
+        >
+        <div className='radio'>
+          <div className='inside' />
+        </div>
+
+        <div
+          className='text'
+          dangerouslySetInnerHTML={{__html: this.props.choice}}
+        />
+      </div>
+    );
+  }
+}
+
+Choice.displayName = 'Choice';
+Choice.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Choice);
diff --git a/packages/learn/src/templates/Challenges/views/quiz/Quiz.jsx b/packages/learn/src/templates/Challenges/views/quiz/Quiz.jsx
new file mode 100644
index 0000000000..b5e0b17334
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/quiz/Quiz.jsx
@@ -0,0 +1,241 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { Col, Row } from 'react-bootstrap';
+import Choice from './Choice.jsx';
+
+import {
+  currentIndexSelector,
+  selectedChoiceSelector,
+  nextQuestion,
+  selectChoice,
+  correctSelector,
+  incrementCorrect,
+  resetQuiz,
+  resetChoice
+} from './redux';
+
+import { submitChallenge, challengeMetaSelector } from '../../redux';
+import { challengeSelector } from '../../../../redux';
+
+const mapStateToProps = createSelector(
+  challengeSelector,
+  challengeMetaSelector,
+  currentIndexSelector,
+  selectedChoiceSelector,
+  correctSelector,
+  (
+    {
+      description = [],
+      title,
+      dashedName
+    },
+    meta,
+    currentIndex,
+    selectedChoice,
+    correct
+  ) => ({
+    dashedName,
+    title,
+    description,
+    meta,
+    currentIndex,
+    selectedChoice,
+    correct
+  })
+);
+
+function mapDispatchToProps(dispatch) {
+  return () => bindActionCreators({
+    nextQuestion,
+    selectChoice,
+    incrementCorrect,
+    resetQuiz,
+    resetChoice,
+    submitChallenge
+  }, dispatch);
+}
+
+const propTypes = {
+  correct: PropTypes.number,
+  currentIndex: PropTypes.number,
+  dashedName: PropTypes.string,
+  description: PropTypes.arrayOf(
+    PropTypes.shape({
+      answer: PropTypes.number,
+      choices: PropTypes.arrayOf(PropTypes.string),
+      explanation: PropTypes.string,
+      question: PropTypes.string,
+      subtitle: PropTypes.string
+    })
+  ),
+  meta: PropTypes.object,
+  nextQuestion: PropTypes.func,
+  resetChoice: PropTypes.func,
+  resetQuiz: PropTypes.func,
+  selectedChoice: PropTypes.number,
+  submitChallenge: PropTypes.func
+};
+
+export class QuizChallenge extends PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.nextQuestion = this.nextQuestion.bind(this);
+    this.submitChallenge = this.submitChallenge.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+      if (this.props.dashedName !== nextProps.dashedName) {
+        this.props.resetQuiz();
+      }
+  }
+
+  nextQuestion() {
+    this.props.resetChoice();
+    this.props.nextQuestion();
+  }
+
+  submitChallenge() {
+    this.props.resetQuiz();
+    this.props.submitChallenge();
+  }
+
+  renderTitle() {
+    return (
+      <Row className='quizTitle'>
+        <Col md={12}>
+          <h4>{this.props.meta.title}</h4>
+          <hr/>
+        </Col>
+      </Row>
+    );
+  }
+
+  renderResults() {
+    const isQuizPassed = this.props.correct === this.props.description.length;
+    return (
+      <div>
+        {this.renderTitle()}
+        <Row className='quizResults'>
+          <Col md={12}>
+            <h2>Quiz Results:</h2>
+
+            <p>
+              You got {this.props.correct} out of
+               {` ${this.props.description.length}`} correct!
+            </p>
+
+            {isQuizPassed === false ? (
+              <div>
+                <p>
+                  You will need to get all the questions
+                  correct in order to mark this quiz as completed.
+                </p>
+                <button
+                  className='btn btn-lg btn-primary'
+                  onClick={this.props.resetQuiz}
+                  > Try Again
+                </button>
+              </div>
+            ) : (
+              <button
+                className='btn btn-lg btn-primary'
+                onClick={this.submitChallenge}
+                > Finish Quiz
+              </button>
+            )}
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+
+  renderQuiz() {
+    const currentIndex = this.props.currentIndex;
+    const question = this.props.description[currentIndex];
+    const questionKey = this.props.dashedName + currentIndex.toString();
+    return (
+      <div key={questionKey} >
+        {this.renderTitle()}
+        <Row>
+          <Col md={6}>
+            <h2 className='textCenter'>
+              Question {currentIndex + 1} of {this.props.description.length}:
+            </h2>
+
+            <h3>
+              {question.subtitle}:
+            </h3>
+
+            <p dangerouslySetInnerHTML={{__html: question.question}} />
+          </Col>
+
+          <Col md={6}>
+            <h2 className='textCenter'>Choices</h2>
+
+            {question.choices.map((choice, i) => (
+              <Choice
+                choice={choice}
+                choiceIndex={i}
+                isChoiceSelected={this.props.selectedChoice !== null}
+                isCorrectChoice={question.answer === i}
+                key={choice}
+                selected={i === this.props.selectedChoice}
+              />
+            ))}
+          </Col>
+        </Row>
+
+        {this.props.selectedChoice !== null &&
+          <Row className='quizResults'>
+            <Col md={6} mdPush={3}>
+              <div className='messageDiv'>
+                {this.props.selectedChoice === question.answer
+                  ? <h2 className='correctAnswer'>
+                      Correct, great work!
+                    </h2>
+                  : <h2 className='wrongAnswer'>
+                      Sorry, that is not correct!
+                    </h2>}
+              </div>
+              {this.props.selectedChoice !== question.answer &&
+              <div className='explanation'>
+                <h2>Explanation:</h2>
+                <p dangerouslySetInnerHTML={{__html: question.explanation}} />
+              </div>}
+            </Col>
+
+            <Col md={12}>
+              <button
+                className='btn btn-lg btn-primary'
+                onClick={this.nextQuestion}
+                >
+                {currentIndex + 1 === this.props.description.length ?
+                  'View Results' : 'Next Question'}
+              </button>
+            </Col>
+          </Row>}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className='quiz'>{
+        this.props.currentIndex >= this.props.description.length ?
+        this.renderResults() : this.renderQuiz()}
+      </div>
+    );
+  }
+}
+
+QuizChallenge.displayName = 'QuizChallenge';
+QuizChallenge.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(QuizChallenge);
diff --git a/packages/learn/src/templates/Challenges/views/quiz/Show.jsx b/packages/learn/src/templates/Challenges/views/quiz/Show.jsx
new file mode 100644
index 0000000000..7937804521
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/quiz/Show.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { addNS } from 'berkeleys-redux-utils';
+
+import ns from './ns.json';
+import Main from './Quiz.jsx';
+import ChildContainer from '../../Child-Container.jsx';
+import { types } from '../../redux';
+import Panes from '../../../../Panes';
+import _Map from '../../../../Map';
+
+const propTypes = {};
+export const mapStateToPanes = addNS(
+  ns,
+  () => ({
+    [types.toggleMap]: 'Map',
+    [types.toggleMain]: 'Lesson'
+  })
+);
+
+const nameToComponent = {
+  Map: _Map,
+  Lesson: Main
+};
+
+const renderPane = name => {
+  const Comp = nameToComponent[name];
+  return Comp ? <Comp /> : <span>Pane { name } not found</span>;
+};
+
+export default function ShowQuiz() {
+  return (
+    <ChildContainer isFullWidth={ true }>
+      <Panes render={ renderPane }/>
+    </ChildContainer>
+  );
+}
+
+ShowQuiz.displayName = 'ShowQuiz';
+ShowQuiz.propTypes = propTypes;
diff --git a/packages/learn/src/templates/Challenges/views/quiz/index.js b/packages/learn/src/templates/Challenges/views/quiz/index.js
new file mode 100644
index 0000000000..53c86f5f0b
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/quiz/index.js
@@ -0,0 +1 @@
+export { default, mapStateToPanes } from './Show.jsx';
diff --git a/packages/learn/src/templates/Challenges/views/quiz/ns.json b/packages/learn/src/templates/Challenges/views/quiz/ns.json
new file mode 100644
index 0000000000..c2cb0377f5
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/quiz/ns.json
@@ -0,0 +1 @@
+"quiz"
diff --git a/packages/learn/src/templates/Challenges/views/quiz/quiz.less b/packages/learn/src/templates/Challenges/views/quiz/quiz.less
new file mode 100644
index 0000000000..7b1e960ff9
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/quiz/quiz.less
@@ -0,0 +1,93 @@
+// should match ./ns.json value and filename
+@ns: quiz;
+
+.quiz {
+  padding-left: 20px;
+  padding-right: 20px;
+
+  .quizTitle {
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .textCenter {
+    text-align: center;
+  }
+
+  .explanation p {
+    text-align: left;
+  }
+
+  .quizResults {
+    text-align: center;
+  }
+
+  .wrongAnswer {
+    color: red;
+  }
+
+  .correctAnswer {
+    color: green;
+  }
+
+  .choice.selected {
+    .radio {
+      .inside {
+        opacity: 1;
+      }
+    }
+  }
+
+  .choice:not(.reveal):hover > .radio {
+    .inside {
+      opacity: 1;
+    }
+  }
+
+  .choice {
+    position: relative;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+
+    .text {
+
+    }
+
+    .radio {
+      width: 24px;
+      height: 24px;
+      border-radius: 100%;
+      border: 4px solid #333;
+      float: left;
+      margin-right: 10px;
+
+      .inside {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        left: 2px;
+        top: 2px;
+        background-color: #333;
+        border-radius: 100%;
+        opacity: 0;
+      }
+    }
+  }
+
+  .choice:not(.reveal):hover {
+    background-color: rgba(0, 100, 0, 0.3);
+  }
+
+  .choice:not(.reveal) {
+    cursor: pointer;
+  }
+
+  .choice.reveal {
+    background-color: rgba(255, 65, 77, 0.3);
+  }
+
+  .choice.reveal.correct {
+    background-color: rgba(0, 100, 0, 0.3);
+  }
+}
diff --git a/packages/learn/src/templates/Challenges/views/quiz/redux/index.js b/packages/learn/src/templates/Challenges/views/quiz/redux/index.js
new file mode 100644
index 0000000000..da53535acd
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/views/quiz/redux/index.js
@@ -0,0 +1,72 @@
+// import {
+//   createAction,
+//   createTypes,
+//   handleActions
+// } from 'berkeleys-redux-utils';
+// import noop from 'lodash/noop';
+
+// import ns from '../ns.json';
+
+// export const types = createTypes(
+//   [
+//     'nextQuestion',
+//     'selectChoice',
+//     'incrementCorrect',
+//     'resetQuiz',
+//     'resetChoice'
+//   ],
+//   ns
+// );
+
+// export const nextQuestion = createAction(types.nextQuestion, noop);
+
+// export const selectChoice = createAction(
+//   types.selectChoice,
+//   selectedChoice => ({ selectedChoice })
+// );
+
+// export const incrementCorrect = createAction(types.incrementCorrect, noop);
+
+// export const resetQuiz = createAction(types.resetQuiz, noop);
+
+// export const resetChoice = createAction(types.resetChoice, noop);
+
+// const initialState = {
+//   currentIndex: 0,
+//   selectedChoice: null,
+//   correct: 0
+// };
+
+// export const getNS = state => state[ns];
+// export const currentIndexSelector = state => getNS(state).currentIndex;
+// export const selectedChoiceSelector = state => getNS(state).selectedChoice;
+// export const correctSelector = state => getNS(state).correct;
+
+// export default handleActions(
+//   () => ({
+//     [types.nextQuestion]: state => ({
+//       ...state,
+//       currentIndex: state.currentIndex + 1
+//     }),
+//     [types.selectChoice]: (state, { payload }) => ({
+//       ...state,
+//       selectedChoice: payload.selectedChoice
+//     }),
+//     [types.incrementCorrect]: state => ({
+//       ...state,
+//       correct: state.correct + 1
+//     }),
+//     [types.resetQuiz]: state => ({
+//       ...state,
+//       currentIndex: 0,
+//       correct: 0,
+//       selectedChoice: null
+//     }),
+//     [types.resetChoice]: state => ({
+//       ...state,
+//       selectedChoice: null
+//     })
+//   }),
+//   initialState,
+//   ns
+// );
diff --git a/packages/learn/static/bootstrap3/config.json b/packages/learn/static/bootstrap3/config.json
new file mode 100644
index 0000000000..1d02de76e7
--- /dev/null
+++ b/packages/learn/static/bootstrap3/config.json
@@ -0,0 +1,408 @@
+{
+  "vars": {
+    "@gray-base": "#333",
+    "@gray-darker": "lighten(@gray-base, 13.5%)",
+    "@gray-dark": "lighten(@gray-base, 20%)",
+    "@gray": "lighten(@gray-base, 33.5%)",
+    "@gray-light": "lighten(@gray-base, 46.7%)",
+    "@gray-lighter": "lighten(@gray-base, 93.5%)",
+    "@brand-primary": "#006400",
+    "@brand-success": "#5cb85c",
+    "@brand-info": "#5bc0de",
+    "@brand-warning": "#f0ad4e",
+    "@brand-danger": "#d9534f",
+    "@body-bg": "#fff",
+    "@text-color": "@gray-dark",
+    "@link-color": "@brand-primary",
+    "@link-hover-color": "darken(@link-color, 15%)",
+    "@link-hover-decoration": "underline",
+    "@font-family-sans-serif": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
+    "@font-family-serif": "Georgia, \"Times New Roman\", Times, serif",
+    "@font-family-monospace": "Menlo, Monaco, Consolas, \"Courier New\", monospace",
+    "@font-family-base": "@font-family-sans-serif",
+    "@font-size-base": "14px",
+    "@font-size-large": "ceil((@font-size-base * 1.25))",
+    "@font-size-small": "ceil((@font-size-base * 0.85))",
+    "@font-size-h1": "floor((@font-size-base * 2.6))",
+    "@font-size-h2": "floor((@font-size-base * 2.15))",
+    "@font-size-h3": "ceil((@font-size-base * 1.7))",
+    "@font-size-h4": "ceil((@font-size-base * 1.25))",
+    "@font-size-h5": "@font-size-base",
+    "@font-size-h6": "ceil((@font-size-base * 0.85))",
+    "@line-height-base": "1.428571429",
+    "@line-height-computed": "floor((@font-size-base * @line-height-base))",
+    "@headings-font-family": "inherit",
+    "@headings-font-weight": "500",
+    "@headings-line-height": "1.1",
+    "@headings-color": "inherit",
+    "@icon-font-path": "\"../fonts/\"",
+    "@icon-font-name": "\"glyphicons-halflings-regular\"",
+    "@icon-font-svg-id": "\"glyphicons_halflingsregular\"",
+    "@padding-base-vertical": "6px",
+    "@padding-base-horizontal": "12px",
+    "@padding-large-vertical": "10px",
+    "@padding-large-horizontal": "16px",
+    "@padding-small-vertical": "5px",
+    "@padding-small-horizontal": "10px",
+    "@padding-xs-vertical": "1px",
+    "@padding-xs-horizontal": "5px",
+    "@line-height-large": "1.3333333",
+    "@line-height-small": "1.5",
+    "@border-radius-base": "4px",
+    "@border-radius-large": "6px",
+    "@border-radius-small": "3px",
+    "@component-active-color": "#fff",
+    "@component-active-bg": "@brand-primary",
+    "@caret-width-base": "4px",
+    "@caret-width-large": "5px",
+    "@table-cell-padding": "8px",
+    "@table-condensed-cell-padding": "5px",
+    "@table-bg": "transparent",
+    "@table-bg-accent": "#f9f9f9",
+    "@table-bg-hover": "#f5f5f5",
+    "@table-bg-active": "@table-bg-hover",
+    "@table-border-color": "#ddd",
+    "@btn-font-weight": "normal",
+    "@btn-default-color": "#333",
+    "@btn-default-bg": "#fff",
+    "@btn-default-border": "#ccc",
+    "@btn-primary-color": "#fff",
+    "@btn-primary-bg": "@brand-primary",
+    "@btn-primary-border": "darken(@btn-primary-bg, 5%)",
+    "@btn-success-color": "#fff",
+    "@btn-success-bg": "@brand-success",
+    "@btn-success-border": "darken(@btn-success-bg, 5%)",
+    "@btn-info-color": "#fff",
+    "@btn-info-bg": "@brand-info",
+    "@btn-info-border": "darken(@btn-info-bg, 5%)",
+    "@btn-warning-color": "#fff",
+    "@btn-warning-bg": "@brand-warning",
+    "@btn-warning-border": "darken(@btn-warning-bg, 5%)",
+    "@btn-danger-color": "#fff",
+    "@btn-danger-bg": "@brand-danger",
+    "@btn-danger-border": "darken(@btn-danger-bg, 5%)",
+    "@btn-link-disabled-color": "@gray-light",
+    "@btn-border-radius-base": "@border-radius-base",
+    "@btn-border-radius-large": "@border-radius-large",
+    "@btn-border-radius-small": "@border-radius-small",
+    "@input-bg": "#fff",
+    "@input-bg-disabled": "@gray-lighter",
+    "@input-color": "@gray",
+    "@input-border": "#ccc",
+    "@input-border-radius": "@border-radius-base",
+    "@input-border-radius-large": "@border-radius-large",
+    "@input-border-radius-small": "@border-radius-small",
+    "@input-border-focus": "#66afe9",
+    "@input-color-placeholder": "#999",
+    "@input-height-base": "(@line-height-computed + (@padding-base-vertical * 2) + 2)",
+    "@input-height-large": "(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)",
+    "@input-height-small": "(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)",
+    "@form-group-margin-bottom": "15px",
+    "@legend-color": "@gray-dark",
+    "@legend-border-color": "#e5e5e5",
+    "@input-group-addon-bg": "@gray-lighter",
+    "@input-group-addon-border-color": "@input-border",
+    "@cursor-disabled": "not-allowed",
+    "@dropdown-bg": "#fff",
+    "@dropdown-border": "rgba(0,0,0,.15)",
+    "@dropdown-fallback-border": "#ccc",
+    "@dropdown-divider-bg": "#e5e5e5",
+    "@dropdown-link-color": "@gray-dark",
+    "@dropdown-link-hover-color": "darken(@gray-dark, 5%)",
+    "@dropdown-link-hover-bg": "#f5f5f5",
+    "@dropdown-link-active-color": "@component-active-color",
+    "@dropdown-link-active-bg": "@component-active-bg",
+    "@dropdown-link-disabled-color": "@gray-light",
+    "@dropdown-header-color": "@gray-light",
+    "@dropdown-caret-color": "#000",
+    "@screen-xs": "480px",
+    "@screen-xs-min": "@screen-xs",
+    "@screen-phone": "@screen-xs-min",
+    "@screen-sm": "768px",
+    "@screen-sm-min": "@screen-sm",
+    "@screen-tablet": "@screen-sm-min",
+    "@screen-md": "992px",
+    "@screen-md-min": "@screen-md",
+    "@screen-desktop": "@screen-md-min",
+    "@screen-lg": "1200px",
+    "@screen-lg-min": "@screen-lg",
+    "@screen-lg-desktop": "@screen-lg-min",
+    "@screen-xs-max": "(@screen-sm-min - 1)",
+    "@screen-sm-max": "(@screen-md-min - 1)",
+    "@screen-md-max": "(@screen-lg-min - 1)",
+    "@grid-columns": "12",
+    "@grid-gutter-width": "30px",
+    "@grid-float-breakpoint": "@screen-sm-min",
+    "@grid-float-breakpoint-max": "(@grid-float-breakpoint - 1)",
+    "@container-tablet": "(720px + @grid-gutter-width)",
+    "@container-sm": "@container-tablet",
+    "@container-desktop": "(940px + @grid-gutter-width)",
+    "@container-md": "@container-desktop",
+    "@container-large-desktop": "(1140px + @grid-gutter-width)",
+    "@container-lg": "@container-large-desktop",
+    "@navbar-height": "40px",
+    "@navbar-margin-bottom": "@line-height-computed",
+    "@navbar-border-radius": "@border-radius-base",
+    "@navbar-padding-horizontal": "floor((@grid-gutter-width / 2))",
+    "@navbar-padding-vertical": "((@navbar-height - @line-height-computed) / 2)",
+    "@navbar-collapse-max-height": "340px",
+    "@navbar-default-color": "#777",
+    "@navbar-default-bg": "#f8f8f8",
+    "@navbar-default-border": "darken(@navbar-default-bg, 6.5%)",
+    "@navbar-default-link-color": "#777",
+    "@navbar-default-link-hover-color": "#333",
+    "@navbar-default-link-hover-bg": "transparent",
+    "@navbar-default-link-active-color": "#555",
+    "@navbar-default-link-active-bg": "darken(@navbar-default-bg, 6.5%)",
+    "@navbar-default-link-disabled-color": "#ccc",
+    "@navbar-default-link-disabled-bg": "transparent",
+    "@navbar-default-brand-color": "@navbar-default-link-color",
+    "@navbar-default-brand-hover-color": "darken(@navbar-default-brand-color, 10%)",
+    "@navbar-default-brand-hover-bg": "transparent",
+    "@navbar-default-toggle-hover-bg": "#ddd",
+    "@navbar-default-toggle-icon-bar-bg": "#888",
+    "@navbar-default-toggle-border-color": "#ddd",
+    "@navbar-inverse-color": "lighten(@gray-light, 15%)",
+    "@navbar-inverse-bg": "#222",
+    "@navbar-inverse-border": "darken(@navbar-inverse-bg, 10%)",
+    "@navbar-inverse-link-color": "lighten(@gray-light, 15%)",
+    "@navbar-inverse-link-hover-color": "#fff",
+    "@navbar-inverse-link-hover-bg": "transparent",
+    "@navbar-inverse-link-active-color": "@navbar-inverse-link-hover-color",
+    "@navbar-inverse-link-active-bg": "darken(@navbar-inverse-bg, 10%)",
+    "@navbar-inverse-link-disabled-color": "#444",
+    "@navbar-inverse-link-disabled-bg": "transparent",
+    "@navbar-inverse-brand-color": "@navbar-inverse-link-color",
+    "@navbar-inverse-brand-hover-color": "#fff",
+    "@navbar-inverse-brand-hover-bg": "transparent",
+    "@navbar-inverse-toggle-hover-bg": "#333",
+    "@navbar-inverse-toggle-icon-bar-bg": "#fff",
+    "@navbar-inverse-toggle-border-color": "#333",
+    "@nav-link-padding": "10px 15px",
+    "@nav-link-hover-bg": "@gray-lighter",
+    "@nav-disabled-link-color": "@gray-light",
+    "@nav-disabled-link-hover-color": "@gray-light",
+    "@nav-tabs-border-color": "#ddd",
+    "@nav-tabs-link-hover-border-color": "@gray-lighter",
+    "@nav-tabs-active-link-hover-bg": "@body-bg",
+    "@nav-tabs-active-link-hover-color": "@gray",
+    "@nav-tabs-active-link-hover-border-color": "#ddd",
+    "@nav-tabs-justified-link-border-color": "#ddd",
+    "@nav-tabs-justified-active-link-border-color": "@body-bg",
+    "@nav-pills-border-radius": "@border-radius-base",
+    "@nav-pills-active-link-hover-bg": "@component-active-bg",
+    "@nav-pills-active-link-hover-color": "@component-active-color",
+    "@pagination-color": "@link-color",
+    "@pagination-bg": "#fff",
+    "@pagination-border": "#ddd",
+    "@pagination-hover-color": "@link-hover-color",
+    "@pagination-hover-bg": "@gray-lighter",
+    "@pagination-hover-border": "#ddd",
+    "@pagination-active-color": "#fff",
+    "@pagination-active-bg": "@brand-primary",
+    "@pagination-active-border": "@brand-primary",
+    "@pagination-disabled-color": "@gray-light",
+    "@pagination-disabled-bg": "#fff",
+    "@pagination-disabled-border": "#ddd",
+    "@pager-bg": "@pagination-bg",
+    "@pager-border": "@pagination-border",
+    "@pager-border-radius": "15px",
+    "@pager-hover-bg": "@pagination-hover-bg",
+    "@pager-active-bg": "@pagination-active-bg",
+    "@pager-active-color": "@pagination-active-color",
+    "@pager-disabled-color": "@pagination-disabled-color",
+    "@jumbotron-padding": "30px",
+    "@jumbotron-color": "inherit",
+    "@jumbotron-bg": "@gray-lighter",
+    "@jumbotron-heading-color": "inherit",
+    "@jumbotron-font-size": "ceil((@font-size-base * 1.5))",
+    "@jumbotron-heading-font-size": "ceil((@font-size-base * 4.5))",
+    "@state-success-text": "#3c763d",
+    "@state-success-bg": "#dff0d8",
+    "@state-success-border": "darken(spin(@state-success-bg, -10), 5%)",
+    "@state-info-text": "#31708f",
+    "@state-info-bg": "#d9edf7",
+    "@state-info-border": "darken(spin(@state-info-bg, -10), 7%)",
+    "@state-warning-text": "#8a6d3b",
+    "@state-warning-bg": "#fcf8e3",
+    "@state-warning-border": "darken(spin(@state-warning-bg, -10), 5%)",
+    "@state-danger-text": "#a94442",
+    "@state-danger-bg": "#f2dede",
+    "@state-danger-border": "darken(spin(@state-danger-bg, -10), 5%)",
+    "@tooltip-max-width": "200px",
+    "@tooltip-color": "#fff",
+    "@tooltip-bg": "#000",
+    "@tooltip-opacity": ".9",
+    "@tooltip-arrow-width": "5px",
+    "@tooltip-arrow-color": "@tooltip-bg",
+    "@popover-bg": "#fff",
+    "@popover-max-width": "276px",
+    "@popover-border-color": "rgba(0,0,0,.2)",
+    "@popover-fallback-border-color": "#ccc",
+    "@popover-title-bg": "darken(@popover-bg, 3%)",
+    "@popover-arrow-width": "10px",
+    "@popover-arrow-color": "@popover-bg",
+    "@popover-arrow-outer-width": "(@popover-arrow-width + 1)",
+    "@popover-arrow-outer-color": "fadein(@popover-border-color, 5%)",
+    "@popover-arrow-outer-fallback-color": "darken(@popover-fallback-border-color, 20%)",
+    "@label-default-bg": "@gray-light",
+    "@label-primary-bg": "@brand-primary",
+    "@label-success-bg": "@brand-success",
+    "@label-info-bg": "@brand-info",
+    "@label-warning-bg": "@brand-warning",
+    "@label-danger-bg": "@brand-danger",
+    "@label-color": "#fff",
+    "@label-link-hover-color": "#fff",
+    "@modal-inner-padding": "15px",
+    "@modal-title-padding": "15px",
+    "@modal-title-line-height": "@line-height-base",
+    "@modal-content-bg": "#fff",
+    "@modal-content-border-color": "rgba(0,0,0,.2)",
+    "@modal-content-fallback-border-color": "#999",
+    "@modal-backdrop-bg": "#000",
+    "@modal-backdrop-opacity": ".5",
+    "@modal-header-border-color": "#e5e5e5",
+    "@modal-footer-border-color": "@modal-header-border-color",
+    "@modal-lg": "900px",
+    "@modal-md": "600px",
+    "@modal-sm": "300px",
+    "@alert-padding": "15px",
+    "@alert-border-radius": "@border-radius-base",
+    "@alert-link-font-weight": "bold",
+    "@alert-success-bg": "@state-success-bg",
+    "@alert-success-text": "@state-success-text",
+    "@alert-success-border": "@state-success-border",
+    "@alert-info-bg": "@state-info-bg",
+    "@alert-info-text": "@state-info-text",
+    "@alert-info-border": "@state-info-border",
+    "@alert-warning-bg": "@state-warning-bg",
+    "@alert-warning-text": "@state-warning-text",
+    "@alert-warning-border": "@state-warning-border",
+    "@alert-danger-bg": "@state-danger-bg",
+    "@alert-danger-text": "@state-danger-text",
+    "@alert-danger-border": "@state-danger-border",
+    "@progress-bg": "#f5f5f5",
+    "@progress-bar-color": "#fff",
+    "@progress-border-radius": "@border-radius-base",
+    "@progress-bar-bg": "@brand-primary",
+    "@progress-bar-success-bg": "@brand-success",
+    "@progress-bar-warning-bg": "@brand-warning",
+    "@progress-bar-danger-bg": "@brand-danger",
+    "@progress-bar-info-bg": "@brand-info",
+    "@list-group-bg": "#fff",
+    "@list-group-border": "#ddd",
+    "@list-group-border-radius": "@border-radius-base",
+    "@list-group-hover-bg": "#f5f5f5",
+    "@list-group-active-color": "@component-active-color",
+    "@list-group-active-bg": "@component-active-bg",
+    "@list-group-active-border": "@list-group-active-bg",
+    "@list-group-active-text-color": "lighten(@list-group-active-bg, 40%)",
+    "@list-group-disabled-color": "@gray-light",
+    "@list-group-disabled-bg": "@gray-lighter",
+    "@list-group-disabled-text-color": "@list-group-disabled-color",
+    "@list-group-link-color": "#555",
+    "@list-group-link-hover-color": "@list-group-link-color",
+    "@list-group-link-heading-color": "#333",
+    "@panel-bg": "#fff",
+    "@panel-body-padding": "15px",
+    "@panel-heading-padding": "10px 15px",
+    "@panel-footer-padding": "@panel-heading-padding",
+    "@panel-border-radius": "@border-radius-base",
+    "@panel-inner-border": "#ddd",
+    "@panel-footer-bg": "#f5f5f5",
+    "@panel-default-text": "@gray-dark",
+    "@panel-default-border": "#ddd",
+    "@panel-default-heading-bg": "#f5f5f5",
+    "@panel-primary-text": "#fff",
+    "@panel-primary-border": "@brand-primary",
+    "@panel-primary-heading-bg": "@brand-primary",
+    "@panel-success-text": "@state-success-text",
+    "@panel-success-border": "@state-success-border",
+    "@panel-success-heading-bg": "@state-success-bg",
+    "@panel-info-text": "@state-info-text",
+    "@panel-info-border": "@state-info-border",
+    "@panel-info-heading-bg": "@state-info-bg",
+    "@panel-warning-text": "@state-warning-text",
+    "@panel-warning-border": "@state-warning-border",
+    "@panel-warning-heading-bg": "@state-warning-bg",
+    "@panel-danger-text": "@state-danger-text",
+    "@panel-danger-border": "@state-danger-border",
+    "@panel-danger-heading-bg": "@state-danger-bg",
+    "@thumbnail-padding": "4px",
+    "@thumbnail-bg": "@body-bg",
+    "@thumbnail-border": "#ddd",
+    "@thumbnail-border-radius": "@border-radius-base",
+    "@thumbnail-caption-color": "@text-color",
+    "@thumbnail-caption-padding": "9px",
+    "@well-bg": "#f5f5f5",
+    "@well-border": "darken(@well-bg, 7%)",
+    "@badge-color": "#fff",
+    "@badge-link-hover-color": "#fff",
+    "@badge-bg": "@gray-light",
+    "@badge-active-color": "@link-color",
+    "@badge-active-bg": "#fff",
+    "@badge-font-weight": "bold",
+    "@badge-line-height": "1",
+    "@badge-border-radius": "10px",
+    "@breadcrumb-padding-vertical": "8px",
+    "@breadcrumb-padding-horizontal": "15px",
+    "@breadcrumb-bg": "#f5f5f5",
+    "@breadcrumb-color": "#ccc",
+    "@breadcrumb-active-color": "@gray-light",
+    "@breadcrumb-separator": "\"/\"",
+    "@carousel-text-shadow": "0 1px 2px rgba(0,0,0,.6)",
+    "@carousel-control-color": "#fff",
+    "@carousel-control-width": "15%",
+    "@carousel-control-opacity": ".5",
+    "@carousel-control-font-size": "20px",
+    "@carousel-indicator-active-bg": "#fff",
+    "@carousel-indicator-border-color": "#fff",
+    "@carousel-caption-color": "#fff",
+    "@close-font-weight": "bold",
+    "@close-color": "#000",
+    "@close-text-shadow": "0 1px 0 #fff",
+    "@code-color": "#c7254e",
+    "@code-bg": "#f9f2f4",
+    "@kbd-color": "#fff",
+    "@kbd-bg": "#333",
+    "@pre-bg": "#f5f5f5",
+    "@pre-color": "@gray-dark",
+    "@pre-border-color": "#ccc",
+    "@pre-scrollable-max-height": "340px",
+    "@component-offset-horizontal": "180px",
+    "@text-muted": "@gray-light",
+    "@abbr-border-color": "@gray-light",
+    "@headings-small-color": "@gray-light",
+    "@blockquote-small-color": "@gray-light",
+    "@blockquote-font-size": "(@font-size-base * 1.25)",
+    "@blockquote-border-color": "@gray-lighter",
+    "@page-header-border-color": "@gray-lighter",
+    "@dl-horizontal-offset": "@component-offset-horizontal",
+    "@dl-horizontal-breakpoint": "@grid-float-breakpoint",
+    "@hr-border": "@gray-lighter"
+  },
+  "css": [
+    "print.less",
+    "type.less",
+    "code.less",
+    "grid.less",
+    "tables.less",
+    "forms.less",
+    "buttons.less",
+    "responsive-utilities.less",
+    "button-groups.less",
+    "input-groups.less",
+    "navs.less",
+    "navbar.less",
+    "labels.less",
+    "alerts.less",
+    "progress-bars.less",
+    "media.less",
+    "list-group.less",
+    "panels.less",
+    "responsive-embed.less",
+    "close.less"
+  ],
+  "js": [],
+  "customizerUrl": "<none>"
+}
\ No newline at end of file
diff --git a/packages/learn/static/bootstrap3/css/bootstrap-theme.css b/packages/learn/static/bootstrap3/css/bootstrap-theme.css
new file mode 100644
index 0000000000..2d375ab009
--- /dev/null
+++ b/packages/learn/static/bootstrap3/css/bootstrap-theme.css
@@ -0,0 +1,596 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (<none>)
+ * Config saved to config.json and <none>
+ */
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-default.disabled,
+.btn-primary.disabled,
+.btn-success.disabled,
+.btn-info.disabled,
+.btn-warning.disabled,
+.btn-danger.disabled,
+.btn-default[disabled],
+.btn-primary[disabled],
+.btn-success[disabled],
+.btn-info[disabled],
+.btn-warning[disabled],
+.btn-danger[disabled],
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-primary,
+fieldset[disabled] .btn-success,
+fieldset[disabled] .btn-info,
+fieldset[disabled] .btn-warning,
+fieldset[disabled] .btn-danger {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+.btn-default {
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0e0));
+  background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  text-shadow: 0 1px 0 #fff;
+  border-color: #ccc;
+}
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-default.disabled,
+.btn-default[disabled],
+fieldset[disabled] .btn-default,
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #006400 0%, #002700 100%);
+  background-image: -o-linear-gradient(top, #006400 0%, #002700 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#006400), to(#002700));
+  background-image: linear-gradient(to bottom, #006400 0%, #002700 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff002700', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #001d00;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #002700;
+  background-position: 0 -15px;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #002700;
+  border-color: #001d00;
+}
+.btn-primary.disabled,
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
+  background-color: #002700;
+  background-image: none;
+}
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-success.disabled,
+.btn-success[disabled],
+fieldset[disabled] .btn-success,
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled.focus,
+.btn-success[disabled].focus,
+fieldset[disabled] .btn-success.focus,
+.btn-success.disabled:active,
+.btn-success[disabled]:active,
+fieldset[disabled] .btn-success:active,
+.btn-success.disabled.active,
+.btn-success[disabled].active,
+fieldset[disabled] .btn-success.active {
+  background-color: #419641;
+  background-image: none;
+}
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-info.disabled,
+.btn-info[disabled],
+fieldset[disabled] .btn-info,
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled.focus,
+.btn-info[disabled].focus,
+fieldset[disabled] .btn-info.focus,
+.btn-info.disabled:active,
+.btn-info[disabled]:active,
+fieldset[disabled] .btn-info:active,
+.btn-info.disabled.active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info.active {
+  background-color: #2aabd2;
+  background-image: none;
+}
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-warning.disabled,
+.btn-warning[disabled],
+fieldset[disabled] .btn-warning,
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled.focus,
+.btn-warning[disabled].focus,
+fieldset[disabled] .btn-warning.focus,
+.btn-warning.disabled:active,
+.btn-warning[disabled]:active,
+fieldset[disabled] .btn-warning:active,
+.btn-warning.disabled.active,
+.btn-warning[disabled].active,
+fieldset[disabled] .btn-warning.active {
+  background-color: #eb9316;
+  background-image: none;
+}
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-danger.disabled,
+.btn-danger[disabled],
+fieldset[disabled] .btn-danger,
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled.focus,
+.btn-danger[disabled].focus,
+fieldset[disabled] .btn-danger.focus,
+.btn-danger.disabled:active,
+.btn-danger[disabled]:active,
+fieldset[disabled] .btn-danger:active,
+.btn-danger.disabled.active,
+.btn-danger[disabled].active,
+fieldset[disabled] .btn-danger.active {
+  background-color: #c12e2a;
+  background-image: none;
+}
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-color: #e8e8e8;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-image: -webkit-linear-gradient(top, #006400 0%, #004a00 100%);
+  background-image: -o-linear-gradient(top, #006400 0%, #004a00 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#006400), to(#004a00));
+  background-image: linear-gradient(to bottom, #006400 0%, #004a00 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff004a00', GradientType=0);
+  background-color: #004a00;
+}
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
+  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
+  background-image: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222222));
+  background-image: linear-gradient(to bottom, #3c3c3c 0%, #222222 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border-radius: 4px;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+}
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #006400 0%, #004a00 100%);
+    background-image: -o-linear-gradient(top, #006400 0%, #004a00 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#006400), to(#004a00));
+    background-image: linear-gradient(to bottom, #006400 0%, #004a00 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff004a00', GradientType=0);
+  }
+}
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  border-color: #b2dba1;
+}
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  border-color: #9acfea;
+}
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  border-color: #f5e79e;
+}
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
+  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  border-color: #dca7a7;
+}
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+}
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #006400 0%, #003100 100%);
+  background-image: -o-linear-gradient(top, #006400 0%, #003100 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#006400), to(#003100));
+  background-image: linear-gradient(to bottom, #006400 0%, #003100 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff003100', GradientType=0);
+}
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+}
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+}
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+}
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #003100;
+  background-image: -webkit-linear-gradient(top, #006400 0%, #003e00 100%);
+  background-image: -o-linear-gradient(top, #006400 0%, #003e00 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#006400), to(#003e00));
+  background-image: linear-gradient(to bottom, #006400 0%, #003e00 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff003e00', GradientType=0);
+  border-color: #003e00;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
+}
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+}
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #006400 0%, #004a00 100%);
+  background-image: -o-linear-gradient(top, #006400 0%, #004a00 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#006400), to(#004a00));
+  background-image: linear-gradient(to bottom, #006400 0%, #004a00 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff004a00', GradientType=0);
+}
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+}
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+}
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+}
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
+  background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+}
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
+  background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  border-color: #dcdcdc;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+}
diff --git a/packages/learn/static/bootstrap3/css/bootstrap-theme.min.css b/packages/learn/static/bootstrap3/css/bootstrap-theme.min.css
new file mode 100644
index 0000000000..75945a17e7
--- /dev/null
+++ b/packages/learn/static/bootstrap3/css/bootstrap-theme.min.css
@@ -0,0 +1,14 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (<none>)
+ * Config saved to config.json and <none>
+ *//*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger{text-shadow:0 -1px 0 rgba(0,0,0,0.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075)}.btn-default:active,.btn-primary:active,.btn-success:active,.btn-info:active,.btn-warning:active,.btn-danger:active,.btn-default.active,.btn-primary.active,.btn-success.active,.btn-info.active,.btn-warning.active,.btn-danger.active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn-default.disabled,.btn-primary.disabled,.btn-success.disabled,.btn-info.disabled,.btn-warning.disabled,.btn-danger.disabled,.btn-default[disabled],.btn-primary[disabled],.btn-success[disabled],.btn-info[disabled],.btn-warning[disabled],.btn-danger[disabled],fieldset[disabled] .btn-default,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-success,fieldset[disabled] .btn-info,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-danger{-webkit-box-shadow:none;box-shadow:none}.btn-default .badge,.btn-primary .badge,.btn-success .badge,.btn-info .badge,.btn-warning .badge,.btn-danger .badge{text-shadow:none}.btn:active,.btn.active{background-image:none}.btn-default{background-image:-webkit-linear-gradient(top, #fff 0, #e0e0e0 100%);background-image:-o-linear-gradient(top, #fff 0, #e0e0e0 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(#e0e0e0));background-image:linear-gradient(to bottom, #fff 0, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#dbdbdb;text-shadow:0 1px 0 #fff;border-color:#ccc}.btn-default:hover,.btn-default:focus{background-color:#e0e0e0;background-position:0 -15px}.btn-default:active,.btn-default.active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active{background-color:#e0e0e0;background-image:none}.btn-primary{background-image:-webkit-linear-gradient(top, #006400 0, #002700 100%);background-image:-o-linear-gradient(top, #006400 0, #002700 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), to(#002700));background-image:linear-gradient(to bottom, #006400 0, #002700 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff002700', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#001d00}.btn-primary:hover,.btn-primary:focus{background-color:#002700;background-position:0 -15px}.btn-primary:active,.btn-primary.active{background-color:#002700;border-color:#001d00}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#002700;background-image:none}.btn-success{background-image:-webkit-linear-gradient(top, #5cb85c 0, #419641 100%);background-image:-o-linear-gradient(top, #5cb85c 0, #419641 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5cb85c), to(#419641));background-image:linear-gradient(to bottom, #5cb85c 0, #419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:hover,.btn-success:focus{background-color:#419641;background-position:0 -15px}.btn-success:active,.btn-success.active{background-color:#419641;border-color:#3e8f3e}.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#419641;background-image:none}.btn-info{background-image:-webkit-linear-gradient(top, #5bc0de 0, #2aabd2 100%);background-image:-o-linear-gradient(top, #5bc0de 0, #2aabd2 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5bc0de), to(#2aabd2));background-image:linear-gradient(to bottom, #5bc0de 0, #2aabd2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#28a4c9}.btn-info:hover,.btn-info:focus{background-color:#2aabd2;background-position:0 -15px}.btn-info:active,.btn-info.active{background-color:#2aabd2;border-color:#28a4c9}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#2aabd2;background-image:none}.btn-warning{background-image:-webkit-linear-gradient(top, #f0ad4e 0, #eb9316 100%);background-image:-o-linear-gradient(top, #f0ad4e 0, #eb9316 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f0ad4e), to(#eb9316));background-image:linear-gradient(to bottom, #f0ad4e 0, #eb9316 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#e38d13}.btn-warning:hover,.btn-warning:focus{background-color:#eb9316;background-position:0 -15px}.btn-warning:active,.btn-warning.active{background-color:#eb9316;border-color:#e38d13}.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#eb9316;background-image:none}.btn-danger{background-image:-webkit-linear-gradient(top, #d9534f 0, #c12e2a 100%);background-image:-o-linear-gradient(top, #d9534f 0, #c12e2a 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #d9534f), to(#c12e2a));background-image:linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#b92c28}.btn-danger:hover,.btn-danger:focus{background-color:#c12e2a;background-position:0 -15px}.btn-danger:active,.btn-danger.active{background-color:#c12e2a;border-color:#b92c28}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#c12e2a;background-image:none}.thumbnail,.img-thumbnail{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.075);box-shadow:0 1px 2px rgba(0,0,0,0.075)}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-image:-webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);background-image:-o-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5f5), to(#e8e8e8));background-image:linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-color:#e8e8e8}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{background-image:-webkit-linear-gradient(top, #006400 0, #004a00 100%);background-image:-o-linear-gradient(top, #006400 0, #004a00 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), to(#004a00));background-image:linear-gradient(to bottom, #006400 0, #004a00 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff004a00', GradientType=0);background-color:#004a00}.navbar-default{background-image:-webkit-linear-gradient(top, #fff 0, #f8f8f8 100%);background-image:-o-linear-gradient(top, #fff 0, #f8f8f8 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(#f8f8f8));background-image:linear-gradient(to bottom, #fff 0, #f8f8f8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 5px rgba(0,0,0,0.075);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 5px rgba(0,0,0,0.075)}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.active>a{background-image:-webkit-linear-gradient(top, #dbdbdb 0, #e2e2e2 100%);background-image:-o-linear-gradient(top, #dbdbdb 0, #e2e2e2 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #dbdbdb), to(#e2e2e2));background-image:linear-gradient(to bottom, #dbdbdb 0, #e2e2e2 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,0.075);box-shadow:inset 0 3px 9px rgba(0,0,0,0.075)}.navbar-brand,.navbar-nav>li>a{text-shadow:0 1px 0 rgba(255,255,255,0.25)}.navbar-inverse{background-image:-webkit-linear-gradient(top, #3c3c3c 0, #222 100%);background-image:-o-linear-gradient(top, #3c3c3c 0, #222 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3c3c3c), to(#222));background-image:linear-gradient(to bottom, #3c3c3c 0, #222 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-radius:4px}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.active>a{background-image:-webkit-linear-gradient(top, #080808 0, #0f0f0f 100%);background-image:-o-linear-gradient(top, #080808 0, #0f0f0f 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #080808), to(#0f0f0f));background-image:linear-gradient(to bottom, #080808 0, #0f0f0f 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,0.25);box-shadow:inset 0 3px 9px rgba(0,0,0,0.25)}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.navbar-static-top,.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}@media (max-width:767px){.navbar .navbar-nav .open .dropdown-menu>.active>a,.navbar .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar .navbar-nav .open .dropdown-menu>.active>a:focus{color:#fff;background-image:-webkit-linear-gradient(top, #006400 0, #004a00 100%);background-image:-o-linear-gradient(top, #006400 0, #004a00 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), to(#004a00));background-image:linear-gradient(to bottom, #006400 0, #004a00 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff004a00', GradientType=0)}}.alert{text-shadow:0 1px 0 rgba(255,255,255,0.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 1px 2px rgba(0,0,0,0.05)}.alert-success{background-image:-webkit-linear-gradient(top, #dff0d8 0, #c8e5bc 100%);background-image:-o-linear-gradient(top, #dff0d8 0, #c8e5bc 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #dff0d8), to(#c8e5bc));background-image:linear-gradient(to bottom, #dff0d8 0, #c8e5bc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);border-color:#b2dba1}.alert-info{background-image:-webkit-linear-gradient(top, #d9edf7 0, #b9def0 100%);background-image:-o-linear-gradient(top, #d9edf7 0, #b9def0 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #d9edf7), to(#b9def0));background-image:linear-gradient(to bottom, #d9edf7 0, #b9def0 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);border-color:#9acfea}.alert-warning{background-image:-webkit-linear-gradient(top, #fcf8e3 0, #f8efc0 100%);background-image:-o-linear-gradient(top, #fcf8e3 0, #f8efc0 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fcf8e3), to(#f8efc0));background-image:linear-gradient(to bottom, #fcf8e3 0, #f8efc0 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);border-color:#f5e79e}.alert-danger{background-image:-webkit-linear-gradient(top, #f2dede 0, #e7c3c3 100%);background-image:-o-linear-gradient(top, #f2dede 0, #e7c3c3 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2dede), to(#e7c3c3));background-image:linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);border-color:#dca7a7}.progress{background-image:-webkit-linear-gradient(top, #ebebeb 0, #f5f5f5 100%);background-image:-o-linear-gradient(top, #ebebeb 0, #f5f5f5 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ebebeb), to(#f5f5f5));background-image:linear-gradient(to bottom, #ebebeb 0, #f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0)}.progress-bar{background-image:-webkit-linear-gradient(top, #006400 0, #003100 100%);background-image:-o-linear-gradient(top, #006400 0, #003100 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), to(#003100));background-image:linear-gradient(to bottom, #006400 0, #003100 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff003100', GradientType=0)}.progress-bar-success{background-image:-webkit-linear-gradient(top, #5cb85c 0, #449d44 100%);background-image:-o-linear-gradient(top, #5cb85c 0, #449d44 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5cb85c), to(#449d44));background-image:linear-gradient(to bottom, #5cb85c 0, #449d44 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0)}.progress-bar-info{background-image:-webkit-linear-gradient(top, #5bc0de 0, #31b0d5 100%);background-image:-o-linear-gradient(top, #5bc0de 0, #31b0d5 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5bc0de), to(#31b0d5));background-image:linear-gradient(to bottom, #5bc0de 0, #31b0d5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0)}.progress-bar-warning{background-image:-webkit-linear-gradient(top, #f0ad4e 0, #ec971f 100%);background-image:-o-linear-gradient(top, #f0ad4e 0, #ec971f 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f0ad4e), to(#ec971f));background-image:linear-gradient(to bottom, #f0ad4e 0, #ec971f 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0)}.progress-bar-danger{background-image:-webkit-linear-gradient(top, #d9534f 0, #c9302c 100%);background-image:-o-linear-gradient(top, #d9534f 0, #c9302c 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #d9534f), to(#c9302c));background-image:linear-gradient(to bottom, #d9534f 0, #c9302c 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0)}.progress-bar-striped{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.list-group{border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.075);box-shadow:0 1px 2px rgba(0,0,0,0.075)}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{text-shadow:0 -1px 0 #003100;background-image:-webkit-linear-gradient(top, #006400 0, #003e00 100%);background-image:-o-linear-gradient(top, #006400 0, #003e00 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), to(#003e00));background-image:linear-gradient(to bottom, #006400 0, #003e00 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff003e00', GradientType=0);border-color:#003e00}.list-group-item.active .badge,.list-group-item.active:hover .badge,.list-group-item.active:focus .badge{text-shadow:none}.panel{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.05);box-shadow:0 1px 2px rgba(0,0,0,0.05)}.panel-default>.panel-heading{background-image:-webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);background-image:-o-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5f5), to(#e8e8e8));background-image:linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)}.panel-primary>.panel-heading{background-image:-webkit-linear-gradient(top, #006400 0, #004a00 100%);background-image:-o-linear-gradient(top, #006400 0, #004a00 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), to(#004a00));background-image:linear-gradient(to bottom, #006400 0, #004a00 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006400', endColorstr='#ff004a00', GradientType=0)}.panel-success>.panel-heading{background-image:-webkit-linear-gradient(top, #dff0d8 0, #d0e9c6 100%);background-image:-o-linear-gradient(top, #dff0d8 0, #d0e9c6 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #dff0d8), to(#d0e9c6));background-image:linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0)}.panel-info>.panel-heading{background-image:-webkit-linear-gradient(top, #d9edf7 0, #c4e3f3 100%);background-image:-o-linear-gradient(top, #d9edf7 0, #c4e3f3 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #d9edf7), to(#c4e3f3));background-image:linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0)}.panel-warning>.panel-heading{background-image:-webkit-linear-gradient(top, #fcf8e3 0, #faf2cc 100%);background-image:-o-linear-gradient(top, #fcf8e3 0, #faf2cc 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fcf8e3), to(#faf2cc));background-image:linear-gradient(to bottom, #fcf8e3 0, #faf2cc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0)}.panel-danger>.panel-heading{background-image:-webkit-linear-gradient(top, #f2dede 0, #ebcccc 100%);background-image:-o-linear-gradient(top, #f2dede 0, #ebcccc 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2dede), to(#ebcccc));background-image:linear-gradient(to bottom, #f2dede 0, #ebcccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0)}.well{background-image:-webkit-linear-gradient(top, #e8e8e8 0, #f5f5f5 100%);background-image:-o-linear-gradient(top, #e8e8e8 0, #f5f5f5 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), to(#f5f5f5));background-image:linear-gradient(to bottom, #e8e8e8 0, #f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);border-color:#dcdcdc;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.05),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 3px rgba(0,0,0,0.05),0 1px 0 rgba(255,255,255,0.1)}
\ No newline at end of file
diff --git a/packages/learn/static/bootstrap3/css/bootstrap.css b/packages/learn/static/bootstrap3/css/bootstrap.css
new file mode 100644
index 0000000000..c0891614c2
--- /dev/null
+++ b/packages/learn/static/bootstrap3/css/bootstrap.css
@@ -0,0 +1,5209 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (<none>)
+ * Config saved to config.json and <none>
+ */
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  background-color: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: bold;
+}
+dfn {
+  font-style: italic;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  height: 0;
+}
+pre {
+  overflow: auto;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+button {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+input {
+  line-height: normal;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+}
+optgroup {
+  font-weight: bold;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+td,
+th {
+  padding: 0;
+}
+/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
+@media print {
+  *,
+  *:before,
+  *:after {
+    background: transparent !important;
+    color: #000 !important;
+    -webkit-box-shadow: none !important;
+            box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  a[href^="#"]:after,
+  a[href^="javascript:"]:after {
+    content: "";
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+  .navbar {
+    display: none;
+  }
+  .btn > .caret,
+  .dropup > .btn > .caret {
+    border-top-color: #000 !important;
+  }
+  .label {
+    border: 1px solid #000;
+  }
+  .table {
+    border-collapse: collapse !important;
+  }
+  .table td,
+  .table th {
+    background-color: #fff !important;
+  }
+  .table-bordered th,
+  .table-bordered td {
+    border: 1px solid #ddd !important;
+  }
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html {
+  font-size: 10px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #666666;
+  background-color: #ffffff;
+}
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+a {
+  color: #006400;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  color: #001800;
+  text-decoration: underline;
+}
+a:focus {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+figure {
+  margin: 0;
+}
+img {
+  vertical-align: middle;
+}
+.img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.img-rounded {
+  border-radius: 6px;
+}
+.img-thumbnail {
+  padding: 4px;
+  line-height: 1.42857143;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+.img-circle {
+  border-radius: 50%;
+}
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #ffffff;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+}
+[role="button"] {
+  cursor: pointer;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small,
+.h1 small,
+.h2 small,
+.h3 small,
+.h4 small,
+.h5 small,
+.h6 small,
+h1 .small,
+h2 .small,
+h3 .small,
+h4 .small,
+h5 .small,
+h6 .small,
+.h1 .small,
+.h2 .small,
+.h3 .small,
+.h4 .small,
+.h5 .small,
+.h6 .small {
+  font-weight: normal;
+  line-height: 1;
+  color: #aaaaaa;
+}
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+h1 small,
+.h1 small,
+h2 small,
+.h2 small,
+h3 small,
+.h3 small,
+h1 .small,
+.h1 .small,
+h2 .small,
+.h2 .small,
+h3 .small,
+.h3 .small {
+  font-size: 65%;
+}
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+h4 small,
+.h4 small,
+h5 small,
+.h5 small,
+h6 small,
+.h6 small,
+h4 .small,
+.h4 .small,
+h5 .small,
+.h5 .small,
+h6 .small,
+.h6 .small {
+  font-size: 75%;
+}
+h1,
+.h1 {
+  font-size: 36px;
+}
+h2,
+.h2 {
+  font-size: 30px;
+}
+h3,
+.h3 {
+  font-size: 24px;
+}
+h4,
+.h4 {
+  font-size: 18px;
+}
+h5,
+.h5 {
+  font-size: 14px;
+}
+h6,
+.h6 {
+  font-size: 12px;
+}
+p {
+  margin: 0 0 10px;
+}
+.lead {
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.4;
+}
+@media (min-width: 768px) {
+  .lead {
+    font-size: 21px;
+  }
+}
+small,
+.small {
+  font-size: 85%;
+}
+mark,
+.mark {
+  background-color: #fcf8e3;
+  padding: .2em;
+}
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
+.text-justify {
+  text-align: justify;
+}
+.text-nowrap {
+  white-space: nowrap;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+.text-muted {
+  color: #aaaaaa;
+}
+.text-primary {
+  color: #006400;
+}
+a.text-primary:hover,
+a.text-primary:focus {
+  color: #003100;
+}
+.text-success {
+  color: #3c763d;
+}
+a.text-success:hover,
+a.text-success:focus {
+  color: #2b542c;
+}
+.text-info {
+  color: #31708f;
+}
+a.text-info:hover,
+a.text-info:focus {
+  color: #245269;
+}
+.text-warning {
+  color: #8a6d3b;
+}
+a.text-warning:hover,
+a.text-warning:focus {
+  color: #66512c;
+}
+.text-danger {
+  color: #a94442;
+}
+a.text-danger:hover,
+a.text-danger:focus {
+  color: #843534;
+}
+.bg-primary {
+  color: #fff;
+  background-color: #006400;
+}
+a.bg-primary:hover,
+a.bg-primary:focus {
+  background-color: #003100;
+}
+.bg-success {
+  background-color: #dff0d8;
+}
+a.bg-success:hover,
+a.bg-success:focus {
+  background-color: #c1e2b3;
+}
+.bg-info {
+  background-color: #d9edf7;
+}
+a.bg-info:hover,
+a.bg-info:focus {
+  background-color: #afd9ee;
+}
+.bg-warning {
+  background-color: #fcf8e3;
+}
+a.bg-warning:hover,
+a.bg-warning:focus {
+  background-color: #f7ecb5;
+}
+.bg-danger {
+  background-color: #f2dede;
+}
+a.bg-danger:hover,
+a.bg-danger:focus {
+  background-color: #e4b9b9;
+}
+.page-header {
+  padding-bottom: 9px;
+  margin: 40px 0 20px;
+  border-bottom: 1px solid #ffffff;
+}
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+  margin-bottom: 0;
+}
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+  margin-left: -5px;
+}
+.list-inline > li {
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+dl {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+dt,
+dd {
+  line-height: 1.42857143;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 0;
+}
+@media (min-width: 768px) {
+  .dl-horizontal dt {
+    float: left;
+    width: 160px;
+    clear: left;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dl-horizontal dd {
+    margin-left: 180px;
+  }
+}
+abbr[title],
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted #aaaaaa;
+}
+.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+blockquote {
+  padding: 10px 20px;
+  margin: 0 0 20px;
+  font-size: 17.5px;
+  border-left: 5px solid #ffffff;
+}
+blockquote p:last-child,
+blockquote ul:last-child,
+blockquote ol:last-child {
+  margin-bottom: 0;
+}
+blockquote footer,
+blockquote small,
+blockquote .small {
+  display: block;
+  font-size: 80%;
+  line-height: 1.42857143;
+  color: #aaaaaa;
+}
+blockquote footer:before,
+blockquote small:before,
+blockquote .small:before {
+  content: '\2014 \00A0';
+}
+.blockquote-reverse,
+blockquote.pull-right {
+  padding-right: 15px;
+  padding-left: 0;
+  border-right: 5px solid #ffffff;
+  border-left: 0;
+  text-align: right;
+}
+.blockquote-reverse footer:before,
+blockquote.pull-right footer:before,
+.blockquote-reverse small:before,
+blockquote.pull-right small:before,
+.blockquote-reverse .small:before,
+blockquote.pull-right .small:before {
+  content: '';
+}
+.blockquote-reverse footer:after,
+blockquote.pull-right footer:after,
+.blockquote-reverse small:after,
+blockquote.pull-right small:after,
+.blockquote-reverse .small:after,
+blockquote.pull-right .small:after {
+  content: '\00A0 \2014';
+}
+address {
+  margin-bottom: 20px;
+  font-style: normal;
+  line-height: 1.42857143;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 4px;
+}
+kbd {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #ffffff;
+  background-color: #333333;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+kbd kbd {
+  padding: 0;
+  font-size: 100%;
+  font-weight: bold;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #666666;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+}
+pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border-radius: 0;
+}
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media (min-width: 768px) {
+  .container {
+    width: 750px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    width: 970px;
+  }
+}
+@media (min-width: 1200px) {
+  .container {
+    width: 1170px;
+  }
+}
+.container-fluid {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.row {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
+  float: left;
+}
+.col-xs-12 {
+  width: 100%;
+}
+.col-xs-11 {
+  width: 91.66666667%;
+}
+.col-xs-10 {
+  width: 83.33333333%;
+}
+.col-xs-9 {
+  width: 75%;
+}
+.col-xs-8 {
+  width: 66.66666667%;
+}
+.col-xs-7 {
+  width: 58.33333333%;
+}
+.col-xs-6 {
+  width: 50%;
+}
+.col-xs-5 {
+  width: 41.66666667%;
+}
+.col-xs-4 {
+  width: 33.33333333%;
+}
+.col-xs-3 {
+  width: 25%;
+}
+.col-xs-2 {
+  width: 16.66666667%;
+}
+.col-xs-1 {
+  width: 8.33333333%;
+}
+.col-xs-pull-12 {
+  right: 100%;
+}
+.col-xs-pull-11 {
+  right: 91.66666667%;
+}
+.col-xs-pull-10 {
+  right: 83.33333333%;
+}
+.col-xs-pull-9 {
+  right: 75%;
+}
+.col-xs-pull-8 {
+  right: 66.66666667%;
+}
+.col-xs-pull-7 {
+  right: 58.33333333%;
+}
+.col-xs-pull-6 {
+  right: 50%;
+}
+.col-xs-pull-5 {
+  right: 41.66666667%;
+}
+.col-xs-pull-4 {
+  right: 33.33333333%;
+}
+.col-xs-pull-3 {
+  right: 25%;
+}
+.col-xs-pull-2 {
+  right: 16.66666667%;
+}
+.col-xs-pull-1 {
+  right: 8.33333333%;
+}
+.col-xs-pull-0 {
+  right: auto;
+}
+.col-xs-push-12 {
+  left: 100%;
+}
+.col-xs-push-11 {
+  left: 91.66666667%;
+}
+.col-xs-push-10 {
+  left: 83.33333333%;
+}
+.col-xs-push-9 {
+  left: 75%;
+}
+.col-xs-push-8 {
+  left: 66.66666667%;
+}
+.col-xs-push-7 {
+  left: 58.33333333%;
+}
+.col-xs-push-6 {
+  left: 50%;
+}
+.col-xs-push-5 {
+  left: 41.66666667%;
+}
+.col-xs-push-4 {
+  left: 33.33333333%;
+}
+.col-xs-push-3 {
+  left: 25%;
+}
+.col-xs-push-2 {
+  left: 16.66666667%;
+}
+.col-xs-push-1 {
+  left: 8.33333333%;
+}
+.col-xs-push-0 {
+  left: auto;
+}
+.col-xs-offset-12 {
+  margin-left: 100%;
+}
+.col-xs-offset-11 {
+  margin-left: 91.66666667%;
+}
+.col-xs-offset-10 {
+  margin-left: 83.33333333%;
+}
+.col-xs-offset-9 {
+  margin-left: 75%;
+}
+.col-xs-offset-8 {
+  margin-left: 66.66666667%;
+}
+.col-xs-offset-7 {
+  margin-left: 58.33333333%;
+}
+.col-xs-offset-6 {
+  margin-left: 50%;
+}
+.col-xs-offset-5 {
+  margin-left: 41.66666667%;
+}
+.col-xs-offset-4 {
+  margin-left: 33.33333333%;
+}
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+.col-xs-offset-2 {
+  margin-left: 16.66666667%;
+}
+.col-xs-offset-1 {
+  margin-left: 8.33333333%;
+}
+.col-xs-offset-0 {
+  margin-left: 0%;
+}
+@media (min-width: 768px) {
+  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+    float: left;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+  .col-sm-pull-12 {
+    right: 100%;
+  }
+  .col-sm-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-sm-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-sm-pull-9 {
+    right: 75%;
+  }
+  .col-sm-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-sm-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-sm-pull-6 {
+    right: 50%;
+  }
+  .col-sm-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-sm-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-sm-pull-3 {
+    right: 25%;
+  }
+  .col-sm-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-sm-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-sm-pull-0 {
+    right: auto;
+  }
+  .col-sm-push-12 {
+    left: 100%;
+  }
+  .col-sm-push-11 {
+    left: 91.66666667%;
+  }
+  .col-sm-push-10 {
+    left: 83.33333333%;
+  }
+  .col-sm-push-9 {
+    left: 75%;
+  }
+  .col-sm-push-8 {
+    left: 66.66666667%;
+  }
+  .col-sm-push-7 {
+    left: 58.33333333%;
+  }
+  .col-sm-push-6 {
+    left: 50%;
+  }
+  .col-sm-push-5 {
+    left: 41.66666667%;
+  }
+  .col-sm-push-4 {
+    left: 33.33333333%;
+  }
+  .col-sm-push-3 {
+    left: 25%;
+  }
+  .col-sm-push-2 {
+    left: 16.66666667%;
+  }
+  .col-sm-push-1 {
+    left: 8.33333333%;
+  }
+  .col-sm-push-0 {
+    left: auto;
+  }
+  .col-sm-offset-12 {
+    margin-left: 100%;
+  }
+  .col-sm-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-sm-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-sm-offset-9 {
+    margin-left: 75%;
+  }
+  .col-sm-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-sm-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+  .col-sm-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-sm-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+  .col-sm-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-sm-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-sm-offset-0 {
+    margin-left: 0%;
+  }
+}
+@media (min-width: 992px) {
+  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: left;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+  .col-md-pull-12 {
+    right: 100%;
+  }
+  .col-md-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-md-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-md-pull-9 {
+    right: 75%;
+  }
+  .col-md-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-md-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-md-pull-6 {
+    right: 50%;
+  }
+  .col-md-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-md-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-md-pull-3 {
+    right: 25%;
+  }
+  .col-md-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-md-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-md-pull-0 {
+    right: auto;
+  }
+  .col-md-push-12 {
+    left: 100%;
+  }
+  .col-md-push-11 {
+    left: 91.66666667%;
+  }
+  .col-md-push-10 {
+    left: 83.33333333%;
+  }
+  .col-md-push-9 {
+    left: 75%;
+  }
+  .col-md-push-8 {
+    left: 66.66666667%;
+  }
+  .col-md-push-7 {
+    left: 58.33333333%;
+  }
+  .col-md-push-6 {
+    left: 50%;
+  }
+  .col-md-push-5 {
+    left: 41.66666667%;
+  }
+  .col-md-push-4 {
+    left: 33.33333333%;
+  }
+  .col-md-push-3 {
+    left: 25%;
+  }
+  .col-md-push-2 {
+    left: 16.66666667%;
+  }
+  .col-md-push-1 {
+    left: 8.33333333%;
+  }
+  .col-md-push-0 {
+    left: auto;
+  }
+  .col-md-offset-12 {
+    margin-left: 100%;
+  }
+  .col-md-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-md-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .col-md-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-md-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .col-md-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-md-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .col-md-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-md-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-md-offset-0 {
+    margin-left: 0%;
+  }
+}
+@media (min-width: 1200px) {
+  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+    float: left;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666667%;
+  }
+  .col-lg-10 {
+    width: 83.33333333%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666667%;
+  }
+  .col-lg-7 {
+    width: 58.33333333%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.66666667%;
+  }
+  .col-lg-1 {
+    width: 8.33333333%;
+  }
+  .col-lg-pull-12 {
+    right: 100%;
+  }
+  .col-lg-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-lg-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-lg-pull-9 {
+    right: 75%;
+  }
+  .col-lg-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-lg-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-lg-pull-6 {
+    right: 50%;
+  }
+  .col-lg-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-lg-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-lg-pull-3 {
+    right: 25%;
+  }
+  .col-lg-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-lg-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-lg-pull-0 {
+    right: auto;
+  }
+  .col-lg-push-12 {
+    left: 100%;
+  }
+  .col-lg-push-11 {
+    left: 91.66666667%;
+  }
+  .col-lg-push-10 {
+    left: 83.33333333%;
+  }
+  .col-lg-push-9 {
+    left: 75%;
+  }
+  .col-lg-push-8 {
+    left: 66.66666667%;
+  }
+  .col-lg-push-7 {
+    left: 58.33333333%;
+  }
+  .col-lg-push-6 {
+    left: 50%;
+  }
+  .col-lg-push-5 {
+    left: 41.66666667%;
+  }
+  .col-lg-push-4 {
+    left: 33.33333333%;
+  }
+  .col-lg-push-3 {
+    left: 25%;
+  }
+  .col-lg-push-2 {
+    left: 16.66666667%;
+  }
+  .col-lg-push-1 {
+    left: 8.33333333%;
+  }
+  .col-lg-push-0 {
+    left: auto;
+  }
+  .col-lg-offset-12 {
+    margin-left: 100%;
+  }
+  .col-lg-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-lg-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .col-lg-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-lg-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .col-lg-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-lg-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .col-lg-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-lg-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-lg-offset-0 {
+    margin-left: 0%;
+  }
+}
+table {
+  background-color: transparent;
+}
+caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #aaaaaa;
+  text-align: left;
+}
+th {
+  text-align: left;
+}
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+}
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.42857143;
+  vertical-align: top;
+  border-top: 1px solid #dddddd;
+}
+.table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dddddd;
+}
+.table > caption + thead > tr:first-child > th,
+.table > colgroup + thead > tr:first-child > th,
+.table > thead:first-child > tr:first-child > th,
+.table > caption + thead > tr:first-child > td,
+.table > colgroup + thead > tr:first-child > td,
+.table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+.table > tbody + tbody {
+  border-top: 2px solid #dddddd;
+}
+.table .table {
+  background-color: #ffffff;
+}
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 5px;
+}
+.table-bordered {
+  border: 1px solid #dddddd;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid #dddddd;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+  border-bottom-width: 2px;
+}
+.table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+.table-hover > tbody > tr:hover {
+  background-color: #f5f5f5;
+}
+table col[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-column;
+}
+table td[class*="col-"],
+table th[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-cell;
+}
+.table > thead > tr > td.active,
+.table > tbody > tr > td.active,
+.table > tfoot > tr > td.active,
+.table > thead > tr > th.active,
+.table > tbody > tr > th.active,
+.table > tfoot > tr > th.active,
+.table > thead > tr.active > td,
+.table > tbody > tr.active > td,
+.table > tfoot > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr.active > th,
+.table > tfoot > tr.active > th {
+  background-color: #f5f5f5;
+}
+.table-hover > tbody > tr > td.active:hover,
+.table-hover > tbody > tr > th.active:hover,
+.table-hover > tbody > tr.active:hover > td,
+.table-hover > tbody > tr:hover > .active,
+.table-hover > tbody > tr.active:hover > th {
+  background-color: #e8e8e8;
+}
+.table > thead > tr > td.success,
+.table > tbody > tr > td.success,
+.table > tfoot > tr > td.success,
+.table > thead > tr > th.success,
+.table > tbody > tr > th.success,
+.table > tfoot > tr > th.success,
+.table > thead > tr.success > td,
+.table > tbody > tr.success > td,
+.table > tfoot > tr.success > td,
+.table > thead > tr.success > th,
+.table > tbody > tr.success > th,
+.table > tfoot > tr.success > th {
+  background-color: #dff0d8;
+}
+.table-hover > tbody > tr > td.success:hover,
+.table-hover > tbody > tr > th.success:hover,
+.table-hover > tbody > tr.success:hover > td,
+.table-hover > tbody > tr:hover > .success,
+.table-hover > tbody > tr.success:hover > th {
+  background-color: #d0e9c6;
+}
+.table > thead > tr > td.info,
+.table > tbody > tr > td.info,
+.table > tfoot > tr > td.info,
+.table > thead > tr > th.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > tbody > tr.info > td,
+.table > tfoot > tr.info > td,
+.table > thead > tr.info > th,
+.table > tbody > tr.info > th,
+.table > tfoot > tr.info > th {
+  background-color: #d9edf7;
+}
+.table-hover > tbody > tr > td.info:hover,
+.table-hover > tbody > tr > th.info:hover,
+.table-hover > tbody > tr.info:hover > td,
+.table-hover > tbody > tr:hover > .info,
+.table-hover > tbody > tr.info:hover > th {
+  background-color: #c4e3f3;
+}
+.table > thead > tr > td.warning,
+.table > tbody > tr > td.warning,
+.table > tfoot > tr > td.warning,
+.table > thead > tr > th.warning,
+.table > tbody > tr > th.warning,
+.table > tfoot > tr > th.warning,
+.table > thead > tr.warning > td,
+.table > tbody > tr.warning > td,
+.table > tfoot > tr.warning > td,
+.table > thead > tr.warning > th,
+.table > tbody > tr.warning > th,
+.table > tfoot > tr.warning > th {
+  background-color: #fcf8e3;
+}
+.table-hover > tbody > tr > td.warning:hover,
+.table-hover > tbody > tr > th.warning:hover,
+.table-hover > tbody > tr.warning:hover > td,
+.table-hover > tbody > tr:hover > .warning,
+.table-hover > tbody > tr.warning:hover > th {
+  background-color: #faf2cc;
+}
+.table > thead > tr > td.danger,
+.table > tbody > tr > td.danger,
+.table > tfoot > tr > td.danger,
+.table > thead > tr > th.danger,
+.table > tbody > tr > th.danger,
+.table > tfoot > tr > th.danger,
+.table > thead > tr.danger > td,
+.table > tbody > tr.danger > td,
+.table > tfoot > tr.danger > td,
+.table > thead > tr.danger > th,
+.table > tbody > tr.danger > th,
+.table > tfoot > tr.danger > th {
+  background-color: #f2dede;
+}
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td,
+.table-hover > tbody > tr:hover > .danger,
+.table-hover > tbody > tr.danger:hover > th {
+  background-color: #ebcccc;
+}
+.table-responsive {
+  overflow-x: auto;
+  min-height: 0.01%;
+}
+@media screen and (max-width: 767px) {
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 15px;
+    overflow-y: hidden;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid #dddddd;
+  }
+  .table-responsive > .table {
+    margin-bottom: 0;
+  }
+  .table-responsive > .table > thead > tr > th,
+  .table-responsive > .table > tbody > tr > th,
+  .table-responsive > .table > tfoot > tr > th,
+  .table-responsive > .table > thead > tr > td,
+  .table-responsive > .table > tbody > tr > td,
+  .table-responsive > .table > tfoot > tr > td {
+    white-space: nowrap;
+  }
+  .table-responsive > .table-bordered {
+    border: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:first-child,
+  .table-responsive > .table-bordered > tbody > tr > th:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+  .table-responsive > .table-bordered > thead > tr > td:first-child,
+  .table-responsive > .table-bordered > tbody > tr > td:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+    border-left: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:last-child,
+  .table-responsive > .table-bordered > tbody > tr > th:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+  .table-responsive > .table-bordered > thead > tr > td:last-child,
+  .table-responsive > .table-bordered > tbody > tr > td:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+    border-right: 0;
+  }
+  .table-responsive > .table-bordered > tbody > tr:last-child > th,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+  .table-responsive > .table-bordered > tbody > tr:last-child > td,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+    border-bottom: 0;
+  }
+}
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  min-width: 0;
+}
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 21px;
+  line-height: inherit;
+  color: #666666;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+label {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+input[type="search"] {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9;
+  line-height: normal;
+}
+input[type="file"] {
+  display: block;
+}
+input[type="range"] {
+  display: block;
+  width: 100%;
+}
+select[multiple],
+select[size] {
+  height: auto;
+}
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+output {
+  display: block;
+  padding-top: 7px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #888888;
+}
+.form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #888888;
+  background-color: #ffffff;
+  background-image: none;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+.form-control:focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.form-control::-moz-placeholder {
+  color: #999999;
+  opacity: 1;
+}
+.form-control:-ms-input-placeholder {
+  color: #999999;
+}
+.form-control::-webkit-input-placeholder {
+  color: #999999;
+}
+.form-control::-ms-expand {
+  border: 0;
+  background-color: transparent;
+}
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  background-color: #ffffff;
+  opacity: 1;
+}
+.form-control[disabled],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+}
+textarea.form-control {
+  height: auto;
+}
+input[type="search"] {
+  -webkit-appearance: none;
+}
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="date"].form-control,
+  input[type="time"].form-control,
+  input[type="datetime-local"].form-control,
+  input[type="month"].form-control {
+    line-height: 34px;
+  }
+  input[type="date"].input-sm,
+  input[type="time"].input-sm,
+  input[type="datetime-local"].input-sm,
+  input[type="month"].input-sm,
+  .input-group-sm input[type="date"],
+  .input-group-sm input[type="time"],
+  .input-group-sm input[type="datetime-local"],
+  .input-group-sm input[type="month"] {
+    line-height: 30px;
+  }
+  input[type="date"].input-lg,
+  input[type="time"].input-lg,
+  input[type="datetime-local"].input-lg,
+  input[type="month"].input-lg,
+  .input-group-lg input[type="date"],
+  .input-group-lg input[type="time"],
+  .input-group-lg input[type="datetime-local"],
+  .input-group-lg input[type="month"] {
+    line-height: 46px;
+  }
+}
+.form-group {
+  margin-bottom: 15px;
+}
+.radio,
+.checkbox {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.radio label,
+.checkbox label {
+  min-height: 20px;
+  padding-left: 20px;
+  margin-bottom: 0;
+  font-weight: normal;
+  cursor: pointer;
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px \9;
+}
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: -5px;
+}
+.radio-inline,
+.checkbox-inline {
+  position: relative;
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px;
+}
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"].disabled,
+input[type="checkbox"].disabled,
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"] {
+  cursor: not-allowed;
+}
+.radio-inline.disabled,
+.checkbox-inline.disabled,
+fieldset[disabled] .radio-inline,
+fieldset[disabled] .checkbox-inline {
+  cursor: not-allowed;
+}
+.radio.disabled label,
+.checkbox.disabled label,
+fieldset[disabled] .radio label,
+fieldset[disabled] .checkbox label {
+  cursor: not-allowed;
+}
+.form-control-static {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  margin-bottom: 0;
+  min-height: 34px;
+}
+.form-control-static.input-lg,
+.form-control-static.input-sm {
+  padding-left: 0;
+  padding-right: 0;
+}
+.input-sm {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+select.input-sm {
+  height: 30px;
+  line-height: 30px;
+}
+textarea.input-sm,
+select[multiple].input-sm {
+  height: auto;
+}
+.form-group-sm .form-control {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.form-group-sm select.form-control {
+  height: 30px;
+  line-height: 30px;
+}
+.form-group-sm textarea.form-control,
+.form-group-sm select[multiple].form-control {
+  height: auto;
+}
+.form-group-sm .form-control-static {
+  height: 30px;
+  min-height: 32px;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.input-lg {
+  height: 46px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 6px;
+}
+select.input-lg {
+  height: 46px;
+  line-height: 46px;
+}
+textarea.input-lg,
+select[multiple].input-lg {
+  height: auto;
+}
+.form-group-lg .form-control {
+  height: 46px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 6px;
+}
+.form-group-lg select.form-control {
+  height: 46px;
+  line-height: 46px;
+}
+.form-group-lg textarea.form-control,
+.form-group-lg select[multiple].form-control {
+  height: auto;
+}
+.form-group-lg .form-control-static {
+  height: 46px;
+  min-height: 38px;
+  padding: 11px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+}
+.has-feedback {
+  position: relative;
+}
+.has-feedback .form-control {
+  padding-right: 42.5px;
+}
+.form-control-feedback {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  display: block;
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  pointer-events: none;
+}
+.input-lg + .form-control-feedback,
+.input-group-lg + .form-control-feedback,
+.form-group-lg .form-control + .form-control-feedback {
+  width: 46px;
+  height: 46px;
+  line-height: 46px;
+}
+.input-sm + .form-control-feedback,
+.input-group-sm + .form-control-feedback,
+.form-group-sm .form-control + .form-control-feedback {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+.has-success .help-block,
+.has-success .control-label,
+.has-success .radio,
+.has-success .checkbox,
+.has-success .radio-inline,
+.has-success .checkbox-inline,
+.has-success.radio label,
+.has-success.checkbox label,
+.has-success.radio-inline label,
+.has-success.checkbox-inline label {
+  color: #3c763d;
+}
+.has-success .form-control {
+  border-color: #3c763d;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-success .form-control:focus {
+  border-color: #2b542c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+}
+.has-success .input-group-addon {
+  color: #3c763d;
+  border-color: #3c763d;
+  background-color: #dff0d8;
+}
+.has-success .form-control-feedback {
+  color: #3c763d;
+}
+.has-warning .help-block,
+.has-warning .control-label,
+.has-warning .radio,
+.has-warning .checkbox,
+.has-warning .radio-inline,
+.has-warning .checkbox-inline,
+.has-warning.radio label,
+.has-warning.checkbox label,
+.has-warning.radio-inline label,
+.has-warning.checkbox-inline label {
+  color: #8a6d3b;
+}
+.has-warning .form-control {
+  border-color: #8a6d3b;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-warning .form-control:focus {
+  border-color: #66512c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+}
+.has-warning .input-group-addon {
+  color: #8a6d3b;
+  border-color: #8a6d3b;
+  background-color: #fcf8e3;
+}
+.has-warning .form-control-feedback {
+  color: #8a6d3b;
+}
+.has-error .help-block,
+.has-error .control-label,
+.has-error .radio,
+.has-error .checkbox,
+.has-error .radio-inline,
+.has-error .checkbox-inline,
+.has-error.radio label,
+.has-error.checkbox label,
+.has-error.radio-inline label,
+.has-error.checkbox-inline label {
+  color: #a94442;
+}
+.has-error .form-control {
+  border-color: #a94442;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-error .form-control:focus {
+  border-color: #843534;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+.has-error .input-group-addon {
+  color: #a94442;
+  border-color: #a94442;
+  background-color: #f2dede;
+}
+.has-error .form-control-feedback {
+  color: #a94442;
+}
+.has-feedback label ~ .form-control-feedback {
+  top: 25px;
+}
+.has-feedback label.sr-only ~ .form-control-feedback {
+  top: 0;
+}
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #a6a6a6;
+}
+@media (min-width: 768px) {
+  .form-inline .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .form-inline .form-control {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+  }
+  .form-inline .form-control-static {
+    display: inline-block;
+  }
+  .form-inline .input-group {
+    display: inline-table;
+    vertical-align: middle;
+  }
+  .form-inline .input-group .input-group-addon,
+  .form-inline .input-group .input-group-btn,
+  .form-inline .input-group .form-control {
+    width: auto;
+  }
+  .form-inline .input-group > .form-control {
+    width: 100%;
+  }
+  .form-inline .control-label {
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .form-inline .radio,
+  .form-inline .checkbox {
+    display: inline-block;
+    margin-top: 0;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .form-inline .radio label,
+  .form-inline .checkbox label {
+    padding-left: 0;
+  }
+  .form-inline .radio input[type="radio"],
+  .form-inline .checkbox input[type="checkbox"] {
+    position: relative;
+    margin-left: 0;
+  }
+  .form-inline .has-feedback .form-control-feedback {
+    top: 0;
+  }
+}
+.form-horizontal .radio,
+.form-horizontal .checkbox,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 7px;
+}
+.form-horizontal .radio,
+.form-horizontal .checkbox {
+  min-height: 27px;
+}
+.form-horizontal .form-group {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+@media (min-width: 768px) {
+  .form-horizontal .control-label {
+    text-align: right;
+    margin-bottom: 0;
+    padding-top: 7px;
+  }
+}
+.form-horizontal .has-feedback .form-control-feedback {
+  right: 15px;
+}
+@media (min-width: 768px) {
+  .form-horizontal .form-group-lg .control-label {
+    padding-top: 11px;
+    font-size: 18px;
+  }
+}
+@media (min-width: 768px) {
+  .form-horizontal .form-group-sm .control-label {
+    padding-top: 6px;
+    font-size: 12px;
+  }
+}
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: normal;
+  text-align: center;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus,
+.btn.focus,
+.btn:active.focus,
+.btn.active.focus {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.btn:hover,
+.btn:focus,
+.btn.focus {
+  color: #333333;
+  text-decoration: none;
+}
+.btn:active,
+.btn.active {
+  outline: 0;
+  background-image: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+  cursor: not-allowed;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+a.btn.disabled,
+fieldset[disabled] a.btn {
+  pointer-events: none;
+}
+.btn-default {
+  color: #333333;
+  background-color: #ffffff;
+  border-color: #cccccc;
+}
+.btn-default:focus,
+.btn-default.focus {
+  color: #333333;
+  background-color: #e6e6e6;
+  border-color: #8c8c8c;
+}
+.btn-default:hover {
+  color: #333333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.btn-default:active,
+.btn-default.active,
+.open > .dropdown-toggle.btn-default {
+  color: #333333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.btn-default:active:hover,
+.btn-default.active:hover,
+.open > .dropdown-toggle.btn-default:hover,
+.btn-default:active:focus,
+.btn-default.active:focus,
+.open > .dropdown-toggle.btn-default:focus,
+.btn-default:active.focus,
+.btn-default.active.focus,
+.open > .dropdown-toggle.btn-default.focus {
+  color: #333333;
+  background-color: #d4d4d4;
+  border-color: #8c8c8c;
+}
+.btn-default:active,
+.btn-default.active,
+.open > .dropdown-toggle.btn-default {
+  background-image: none;
+}
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus {
+  background-color: #ffffff;
+  border-color: #cccccc;
+}
+.btn-default .badge {
+  color: #ffffff;
+  background-color: #333333;
+}
+.btn-primary {
+  color: #ffffff;
+  background-color: #006400;
+  border-color: #004a00;
+}
+.btn-primary:focus,
+.btn-primary.focus {
+  color: #ffffff;
+  background-color: #003100;
+  border-color: #000000;
+}
+.btn-primary:hover {
+  color: #ffffff;
+  background-color: #003100;
+  border-color: #000d00;
+}
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+  color: #ffffff;
+  background-color: #003100;
+  border-color: #000d00;
+}
+.btn-primary:active:hover,
+.btn-primary.active:hover,
+.open > .dropdown-toggle.btn-primary:hover,
+.btn-primary:active:focus,
+.btn-primary.active:focus,
+.open > .dropdown-toggle.btn-primary:focus,
+.btn-primary:active.focus,
+.btn-primary.active.focus,
+.open > .dropdown-toggle.btn-primary.focus {
+  color: #ffffff;
+  background-color: #000d00;
+  border-color: #000000;
+}
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+  background-image: none;
+}
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus {
+  background-color: #006400;
+  border-color: #004a00;
+}
+.btn-primary .badge {
+  color: #006400;
+  background-color: #ffffff;
+}
+.btn-success {
+  color: #ffffff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+.btn-success:focus,
+.btn-success.focus {
+  color: #ffffff;
+  background-color: #449d44;
+  border-color: #255625;
+}
+.btn-success:hover {
+  color: #ffffff;
+  background-color: #449d44;
+  border-color: #398439;
+}
+.btn-success:active,
+.btn-success.active,
+.open > .dropdown-toggle.btn-success {
+  color: #ffffff;
+  background-color: #449d44;
+  border-color: #398439;
+}
+.btn-success:active:hover,
+.btn-success.active:hover,
+.open > .dropdown-toggle.btn-success:hover,
+.btn-success:active:focus,
+.btn-success.active:focus,
+.open > .dropdown-toggle.btn-success:focus,
+.btn-success:active.focus,
+.btn-success.active.focus,
+.open > .dropdown-toggle.btn-success.focus {
+  color: #ffffff;
+  background-color: #398439;
+  border-color: #255625;
+}
+.btn-success:active,
+.btn-success.active,
+.open > .dropdown-toggle.btn-success {
+  background-image: none;
+}
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled.focus,
+.btn-success[disabled].focus,
+fieldset[disabled] .btn-success.focus {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+.btn-success .badge {
+  color: #5cb85c;
+  background-color: #ffffff;
+}
+.btn-info {
+  color: #ffffff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.btn-info:focus,
+.btn-info.focus {
+  color: #ffffff;
+  background-color: #31b0d5;
+  border-color: #1b6d85;
+}
+.btn-info:hover {
+  color: #ffffff;
+  background-color: #31b0d5;
+  border-color: #269abc;
+}
+.btn-info:active,
+.btn-info.active,
+.open > .dropdown-toggle.btn-info {
+  color: #ffffff;
+  background-color: #31b0d5;
+  border-color: #269abc;
+}
+.btn-info:active:hover,
+.btn-info.active:hover,
+.open > .dropdown-toggle.btn-info:hover,
+.btn-info:active:focus,
+.btn-info.active:focus,
+.open > .dropdown-toggle.btn-info:focus,
+.btn-info:active.focus,
+.btn-info.active.focus,
+.open > .dropdown-toggle.btn-info.focus {
+  color: #ffffff;
+  background-color: #269abc;
+  border-color: #1b6d85;
+}
+.btn-info:active,
+.btn-info.active,
+.open > .dropdown-toggle.btn-info {
+  background-image: none;
+}
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled.focus,
+.btn-info[disabled].focus,
+fieldset[disabled] .btn-info.focus {
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.btn-info .badge {
+  color: #5bc0de;
+  background-color: #ffffff;
+}
+.btn-warning {
+  color: #ffffff;
+  background-color: #f0ad4e;
+  border-color: #eea236;
+}
+.btn-warning:focus,
+.btn-warning.focus {
+  color: #ffffff;
+  background-color: #ec971f;
+  border-color: #985f0d;
+}
+.btn-warning:hover {
+  color: #ffffff;
+  background-color: #ec971f;
+  border-color: #d58512;
+}
+.btn-warning:active,
+.btn-warning.active,
+.open > .dropdown-toggle.btn-warning {
+  color: #ffffff;
+  background-color: #ec971f;
+  border-color: #d58512;
+}
+.btn-warning:active:hover,
+.btn-warning.active:hover,
+.open > .dropdown-toggle.btn-warning:hover,
+.btn-warning:active:focus,
+.btn-warning.active:focus,
+.open > .dropdown-toggle.btn-warning:focus,
+.btn-warning:active.focus,
+.btn-warning.active.focus,
+.open > .dropdown-toggle.btn-warning.focus {
+  color: #ffffff;
+  background-color: #d58512;
+  border-color: #985f0d;
+}
+.btn-warning:active,
+.btn-warning.active,
+.open > .dropdown-toggle.btn-warning {
+  background-image: none;
+}
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled.focus,
+.btn-warning[disabled].focus,
+fieldset[disabled] .btn-warning.focus {
+  background-color: #f0ad4e;
+  border-color: #eea236;
+}
+.btn-warning .badge {
+  color: #f0ad4e;
+  background-color: #ffffff;
+}
+.btn-danger {
+  color: #ffffff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+.btn-danger:focus,
+.btn-danger.focus {
+  color: #ffffff;
+  background-color: #c9302c;
+  border-color: #761c19;
+}
+.btn-danger:hover {
+  color: #ffffff;
+  background-color: #c9302c;
+  border-color: #ac2925;
+}
+.btn-danger:active,
+.btn-danger.active,
+.open > .dropdown-toggle.btn-danger {
+  color: #ffffff;
+  background-color: #c9302c;
+  border-color: #ac2925;
+}
+.btn-danger:active:hover,
+.btn-danger.active:hover,
+.open > .dropdown-toggle.btn-danger:hover,
+.btn-danger:active:focus,
+.btn-danger.active:focus,
+.open > .dropdown-toggle.btn-danger:focus,
+.btn-danger:active.focus,
+.btn-danger.active.focus,
+.open > .dropdown-toggle.btn-danger.focus {
+  color: #ffffff;
+  background-color: #ac2925;
+  border-color: #761c19;
+}
+.btn-danger:active,
+.btn-danger.active,
+.open > .dropdown-toggle.btn-danger {
+  background-image: none;
+}
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled.focus,
+.btn-danger[disabled].focus,
+fieldset[disabled] .btn-danger.focus {
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+.btn-danger .badge {
+  color: #d9534f;
+  background-color: #ffffff;
+}
+.btn-link {
+  color: #006400;
+  font-weight: normal;
+  border-radius: 0;
+}
+.btn-link,
+.btn-link:active,
+.btn-link.active,
+.btn-link[disabled],
+fieldset[disabled] .btn-link {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.btn-link,
+.btn-link:hover,
+.btn-link:focus,
+.btn-link:active {
+  border-color: transparent;
+}
+.btn-link:hover,
+.btn-link:focus {
+  color: #001800;
+  text-decoration: underline;
+  background-color: transparent;
+}
+.btn-link[disabled]:hover,
+fieldset[disabled] .btn-link:hover,
+.btn-link[disabled]:focus,
+fieldset[disabled] .btn-link:focus {
+  color: #aaaaaa;
+  text-decoration: none;
+}
+.btn-lg,
+.btn-group-lg > .btn {
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 6px;
+}
+.btn-sm,
+.btn-group-sm > .btn {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.btn-xs,
+.btn-group-xs > .btn {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.btn-block {
+  display: block;
+  width: 100%;
+}
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+  width: 100%;
+}
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+.fade.in {
+  opacity: 1;
+}
+.collapse {
+  display: none;
+}
+.collapse.in {
+  display: block;
+}
+tr.collapse.in {
+  display: table-row;
+}
+tbody.collapse.in {
+  display: table-row-group;
+}
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition-property: height, visibility;
+  -o-transition-property: height, visibility;
+     transition-property: height, visibility;
+  -webkit-transition-duration: 0.35s;
+  -o-transition-duration: 0.35s;
+     transition-duration: 0.35s;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+     transition-timing-function: ease;
+}
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: 4px dashed;
+  border-top: 4px solid \9;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+}
+.dropup,
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle:focus {
+  outline: 0;
+}
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+}
+.dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+}
+.dropdown-menu > li > a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #666666;
+  white-space: nowrap;
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  text-decoration: none;
+  color: #595959;
+  background-color: #f5f5f5;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  color: #ffffff;
+  text-decoration: none;
+  outline: 0;
+  background-color: #006400;
+}
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  color: #aaaaaa;
+}
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  cursor: not-allowed;
+}
+.open > .dropdown-menu {
+  display: block;
+}
+.open > a {
+  outline: 0;
+}
+.dropdown-menu-right {
+  left: auto;
+  right: 0;
+}
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+.dropdown-header {
+  display: block;
+  padding: 3px 20px;
+  font-size: 12px;
+  line-height: 1.42857143;
+  color: #aaaaaa;
+  white-space: nowrap;
+}
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 990;
+}
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+.dropup .caret,
+.navbar-fixed-bottom .dropdown .caret {
+  border-top: 0;
+  border-bottom: 4px dashed;
+  border-bottom: 4px solid \9;
+  content: "";
+}
+.dropup .dropdown-menu,
+.navbar-fixed-bottom .dropdown .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-bottom: 2px;
+}
+@media (min-width: 768px) {
+  .navbar-right .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  .navbar-right .dropdown-menu-left {
+    left: 0;
+    right: auto;
+  }
+}
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+  position: relative;
+  float: left;
+}
+.btn-group > .btn:hover,
+.btn-group-vertical > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group-vertical > .btn:focus,
+.btn-group > .btn:active,
+.btn-group-vertical > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn.active {
+  z-index: 2;
+}
+.btn-group .btn + .btn,
+.btn-group .btn + .btn-group,
+.btn-group .btn-group + .btn,
+.btn-group .btn-group + .btn-group {
+  margin-left: -1px;
+}
+.btn-toolbar {
+  margin-left: -5px;
+}
+.btn-toolbar .btn,
+.btn-toolbar .btn-group,
+.btn-toolbar .input-group {
+  float: left;
+}
+.btn-toolbar > .btn,
+.btn-toolbar > .btn-group,
+.btn-toolbar > .input-group {
+  margin-left: 5px;
+}
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+.btn-group > .btn:first-child {
+  margin-left: 0;
+}
+.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.btn-group > .btn-group {
+  float: left;
+}
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+.btn-group > .btn + .dropdown-toggle {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.btn-group > .btn-lg + .dropdown-toggle {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.btn-group.open .dropdown-toggle {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-group.open .dropdown-toggle.btn-link {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.btn .caret {
+  margin-left: 0;
+}
+.btn-lg .caret {
+  border-width: 5px 5px 0;
+  border-bottom-width: 0;
+}
+.dropup .btn-lg .caret {
+  border-width: 0 5px 5px;
+}
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group,
+.btn-group-vertical > .btn-group > .btn {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+}
+.btn-group-vertical > .btn-group > .btn {
+  float: none;
+}
+.btn-group-vertical > .btn + .btn,
+.btn-group-vertical > .btn + .btn-group,
+.btn-group-vertical > .btn-group + .btn,
+.btn-group-vertical > .btn-group + .btn-group {
+  margin-top: -1px;
+  margin-left: 0;
+}
+.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.btn-group-vertical > .btn:first-child:not(:last-child) {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btn-group-vertical > .btn:last-child:not(:first-child) {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+.btn-group-justified {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+.btn-group-justified > .btn,
+.btn-group-justified > .btn-group {
+  float: none;
+  display: table-cell;
+  width: 1%;
+}
+.btn-group-justified > .btn-group .btn {
+  width: 100%;
+}
+.btn-group-justified > .btn-group .dropdown-menu {
+  left: auto;
+}
+[data-toggle="buttons"] > .btn input[type="radio"],
+[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
+[data-toggle="buttons"] > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+}
+.input-group {
+  position: relative;
+  display: table;
+  border-collapse: separate;
+}
+.input-group[class*="col-"] {
+  float: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+.input-group .form-control {
+  position: relative;
+  z-index: 2;
+  float: left;
+  width: 100%;
+  margin-bottom: 0;
+}
+.input-group .form-control:focus {
+  z-index: 3;
+}
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
+  height: 46px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 6px;
+}
+select.input-group-lg > .form-control,
+select.input-group-lg > .input-group-addon,
+select.input-group-lg > .input-group-btn > .btn {
+  height: 46px;
+  line-height: 46px;
+}
+textarea.input-group-lg > .form-control,
+textarea.input-group-lg > .input-group-addon,
+textarea.input-group-lg > .input-group-btn > .btn,
+select[multiple].input-group-lg > .form-control,
+select[multiple].input-group-lg > .input-group-addon,
+select[multiple].input-group-lg > .input-group-btn > .btn {
+  height: auto;
+}
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+select.input-group-sm > .form-control,
+select.input-group-sm > .input-group-addon,
+select.input-group-sm > .input-group-btn > .btn {
+  height: 30px;
+  line-height: 30px;
+}
+textarea.input-group-sm > .form-control,
+textarea.input-group-sm > .input-group-addon,
+textarea.input-group-sm > .input-group-btn > .btn,
+select[multiple].input-group-sm > .form-control,
+select[multiple].input-group-sm > .input-group-addon,
+select[multiple].input-group-sm > .input-group-btn > .btn {
+  height: auto;
+}
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: table-cell;
+}
+.input-group-addon:not(:first-child):not(:last-child),
+.input-group-btn:not(:first-child):not(:last-child),
+.input-group .form-control:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.input-group-addon {
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1;
+  color: #888888;
+  text-align: center;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+}
+.input-group-addon.input-sm {
+  padding: 5px 10px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+.input-group-addon.input-lg {
+  padding: 10px 16px;
+  font-size: 18px;
+  border-radius: 6px;
+}
+.input-group-addon input[type="radio"],
+.input-group-addon input[type="checkbox"] {
+  margin-top: 0;
+}
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+.input-group-btn {
+  position: relative;
+  font-size: 0;
+  white-space: nowrap;
+}
+.input-group-btn > .btn {
+  position: relative;
+}
+.input-group-btn > .btn + .btn {
+  margin-left: -1px;
+}
+.input-group-btn > .btn:hover,
+.input-group-btn > .btn:focus,
+.input-group-btn > .btn:active {
+  z-index: 2;
+}
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group {
+  margin-right: -1px;
+}
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group {
+  z-index: 2;
+  margin-left: -1px;
+}
+.nav {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+.nav > li {
+  position: relative;
+  display: block;
+}
+.nav > li > a {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+}
+.nav > li > a:hover,
+.nav > li > a:focus {
+  text-decoration: none;
+  background-color: #ffffff;
+}
+.nav > li.disabled > a {
+  color: #aaaaaa;
+}
+.nav > li.disabled > a:hover,
+.nav > li.disabled > a:focus {
+  color: #aaaaaa;
+  text-decoration: none;
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+  background-color: #ffffff;
+  border-color: #006400;
+}
+.nav .nav-divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+}
+.nav > li > a > img {
+  max-width: none;
+}
+.nav-tabs {
+  border-bottom: 1px solid #dddddd;
+}
+.nav-tabs > li {
+  float: left;
+  margin-bottom: -1px;
+}
+.nav-tabs > li > a {
+  margin-right: 2px;
+  line-height: 1.42857143;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+}
+.nav-tabs > li > a:hover {
+  border-color: #ffffff #ffffff #dddddd;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+  color: #888888;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+.nav-tabs.nav-justified {
+  width: 100%;
+  border-bottom: 0;
+}
+.nav-tabs.nav-justified > li {
+  float: none;
+}
+.nav-tabs.nav-justified > li > a {
+  text-align: center;
+  margin-bottom: 5px;
+}
+.nav-tabs.nav-justified > .dropdown .dropdown-menu {
+  top: auto;
+  left: auto;
+}
+@media (min-width: 768px) {
+  .nav-tabs.nav-justified > li {
+    display: table-cell;
+    width: 1%;
+  }
+  .nav-tabs.nav-justified > li > a {
+    margin-bottom: 0;
+  }
+}
+.nav-tabs.nav-justified > li > a {
+  margin-right: 0;
+  border-radius: 4px;
+}
+.nav-tabs.nav-justified > .active > a,
+.nav-tabs.nav-justified > .active > a:hover,
+.nav-tabs.nav-justified > .active > a:focus {
+  border: 1px solid #dddddd;
+}
+@media (min-width: 768px) {
+  .nav-tabs.nav-justified > li > a {
+    border-bottom: 1px solid #dddddd;
+    border-radius: 4px 4px 0 0;
+  }
+  .nav-tabs.nav-justified > .active > a,
+  .nav-tabs.nav-justified > .active > a:hover,
+  .nav-tabs.nav-justified > .active > a:focus {
+    border-bottom-color: #ffffff;
+  }
+}
+.nav-pills > li {
+  float: left;
+}
+.nav-pills > li > a {
+  border-radius: 4px;
+}
+.nav-pills > li + li {
+  margin-left: 2px;
+}
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  color: #ffffff;
+  background-color: #006400;
+}
+.nav-stacked > li {
+  float: none;
+}
+.nav-stacked > li + li {
+  margin-top: 2px;
+  margin-left: 0;
+}
+.nav-justified {
+  width: 100%;
+}
+.nav-justified > li {
+  float: none;
+}
+.nav-justified > li > a {
+  text-align: center;
+  margin-bottom: 5px;
+}
+.nav-justified > .dropdown .dropdown-menu {
+  top: auto;
+  left: auto;
+}
+@media (min-width: 768px) {
+  .nav-justified > li {
+    display: table-cell;
+    width: 1%;
+  }
+  .nav-justified > li > a {
+    margin-bottom: 0;
+  }
+}
+.nav-tabs-justified {
+  border-bottom: 0;
+}
+.nav-tabs-justified > li > a {
+  margin-right: 0;
+  border-radius: 4px;
+}
+.nav-tabs-justified > .active > a,
+.nav-tabs-justified > .active > a:hover,
+.nav-tabs-justified > .active > a:focus {
+  border: 1px solid #dddddd;
+}
+@media (min-width: 768px) {
+  .nav-tabs-justified > li > a {
+    border-bottom: 1px solid #dddddd;
+    border-radius: 4px 4px 0 0;
+  }
+  .nav-tabs-justified > .active > a,
+  .nav-tabs-justified > .active > a:hover,
+  .nav-tabs-justified > .active > a:focus {
+    border-bottom-color: #ffffff;
+  }
+}
+.tab-content > .tab-pane {
+  display: none;
+}
+.tab-content > .active {
+  display: block;
+}
+.nav-tabs .dropdown-menu {
+  margin-top: -1px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+.navbar {
+  position: relative;
+  min-height: 40px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+}
+@media (min-width: 768px) {
+  .navbar {
+    border-radius: 4px;
+  }
+}
+@media (min-width: 768px) {
+  .navbar-header {
+    float: left;
+  }
+}
+.navbar-collapse {
+  overflow-x: visible;
+  padding-right: 15px;
+  padding-left: 15px;
+  border-top: 1px solid transparent;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-overflow-scrolling: touch;
+}
+.navbar-collapse.in {
+  overflow-y: auto;
+}
+@media (min-width: 768px) {
+  .navbar-collapse {
+    width: auto;
+    border-top: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+  }
+  .navbar-collapse.collapse {
+    display: block !important;
+    height: auto !important;
+    padding-bottom: 0;
+    overflow: visible !important;
+  }
+  .navbar-collapse.in {
+    overflow-y: visible;
+  }
+  .navbar-fixed-top .navbar-collapse,
+  .navbar-static-top .navbar-collapse,
+  .navbar-fixed-bottom .navbar-collapse {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+.navbar-fixed-top .navbar-collapse,
+.navbar-fixed-bottom .navbar-collapse {
+  max-height: 340px;
+}
+@media (max-device-width: 480px) and (orientation: landscape) {
+  .navbar-fixed-top .navbar-collapse,
+  .navbar-fixed-bottom .navbar-collapse {
+    max-height: 200px;
+  }
+}
+.container > .navbar-header,
+.container-fluid > .navbar-header,
+.container > .navbar-collapse,
+.container-fluid > .navbar-collapse {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+@media (min-width: 768px) {
+  .container > .navbar-header,
+  .container-fluid > .navbar-header,
+  .container > .navbar-collapse,
+  .container-fluid > .navbar-collapse {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+.navbar-static-top {
+  z-index: 1000;
+  border-width: 0 0 1px;
+}
+@media (min-width: 768px) {
+  .navbar-static-top {
+    border-radius: 0;
+  }
+}
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+@media (min-width: 768px) {
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    border-radius: 0;
+  }
+}
+.navbar-fixed-top {
+  top: 0;
+  border-width: 0 0 1px;
+}
+.navbar-fixed-bottom {
+  bottom: 0;
+  margin-bottom: 0;
+  border-width: 1px 0 0;
+}
+.navbar-brand {
+  float: left;
+  padding: 10px 15px;
+  font-size: 18px;
+  line-height: 20px;
+  height: 40px;
+}
+.navbar-brand:hover,
+.navbar-brand:focus {
+  text-decoration: none;
+}
+.navbar-brand > img {
+  display: block;
+}
+@media (min-width: 768px) {
+  .navbar > .container .navbar-brand,
+  .navbar > .container-fluid .navbar-brand {
+    margin-left: -15px;
+  }
+}
+.navbar-toggle {
+  position: relative;
+  float: right;
+  margin-right: 15px;
+  padding: 9px 10px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  background-color: transparent;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.navbar-toggle:focus {
+  outline: 0;
+}
+.navbar-toggle .icon-bar {
+  display: block;
+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+}
+.navbar-toggle .icon-bar + .icon-bar {
+  margin-top: 4px;
+}
+@media (min-width: 768px) {
+  .navbar-toggle {
+    display: none;
+  }
+}
+.navbar-nav {
+  margin: 5px -15px;
+}
+.navbar-nav > li > a {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  line-height: 20px;
+}
+@media (max-width: 767px) {
+  .navbar-nav .open .dropdown-menu {
+    position: static;
+    float: none;
+    width: auto;
+    margin-top: 0;
+    background-color: transparent;
+    border: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+  }
+  .navbar-nav .open .dropdown-menu > li > a,
+  .navbar-nav .open .dropdown-menu .dropdown-header {
+    padding: 5px 15px 5px 25px;
+  }
+  .navbar-nav .open .dropdown-menu > li > a {
+    line-height: 20px;
+  }
+  .navbar-nav .open .dropdown-menu > li > a:hover,
+  .navbar-nav .open .dropdown-menu > li > a:focus {
+    background-image: none;
+  }
+}
+@media (min-width: 768px) {
+  .navbar-nav {
+    float: left;
+    margin: 0;
+  }
+  .navbar-nav > li {
+    float: left;
+  }
+  .navbar-nav > li > a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}
+.navbar-form {
+  margin-left: -15px;
+  margin-right: -15px;
+  padding: 10px 15px;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+@media (min-width: 768px) {
+  .navbar-form .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .navbar-form .form-control {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+  }
+  .navbar-form .form-control-static {
+    display: inline-block;
+  }
+  .navbar-form .input-group {
+    display: inline-table;
+    vertical-align: middle;
+  }
+  .navbar-form .input-group .input-group-addon,
+  .navbar-form .input-group .input-group-btn,
+  .navbar-form .input-group .form-control {
+    width: auto;
+  }
+  .navbar-form .input-group > .form-control {
+    width: 100%;
+  }
+  .navbar-form .control-label {
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .navbar-form .radio,
+  .navbar-form .checkbox {
+    display: inline-block;
+    margin-top: 0;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .navbar-form .radio label,
+  .navbar-form .checkbox label {
+    padding-left: 0;
+  }
+  .navbar-form .radio input[type="radio"],
+  .navbar-form .checkbox input[type="checkbox"] {
+    position: relative;
+    margin-left: 0;
+  }
+  .navbar-form .has-feedback .form-control-feedback {
+    top: 0;
+  }
+}
+@media (max-width: 767px) {
+  .navbar-form .form-group {
+    margin-bottom: 5px;
+  }
+  .navbar-form .form-group:last-child {
+    margin-bottom: 0;
+  }
+}
+@media (min-width: 768px) {
+  .navbar-form {
+    width: auto;
+    border: 0;
+    margin-left: 0;
+    margin-right: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+}
+.navbar-nav > li > .dropdown-menu {
+  margin-top: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
+  margin-bottom: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.navbar-btn {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+.navbar-btn.btn-sm {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.navbar-btn.btn-xs {
+  margin-top: 9px;
+  margin-bottom: 9px;
+}
+.navbar-text {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+@media (min-width: 768px) {
+  .navbar-text {
+    float: left;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+}
+@media (min-width: 768px) {
+  .navbar-left {
+    float: left !important;
+  }
+  .navbar-right {
+    float: right !important;
+    margin-right: -15px;
+  }
+  .navbar-right ~ .navbar-right {
+    margin-right: 0;
+  }
+}
+.navbar-default {
+  background-color: #f8f8f8;
+  border-color: #e7e7e7;
+}
+.navbar-default .navbar-brand {
+  color: #777777;
+}
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color: #5e5e5e;
+  background-color: transparent;
+}
+.navbar-default .navbar-text {
+  color: #777777;
+}
+.navbar-default .navbar-nav > li > a {
+  color: #777777;
+}
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+  color: #333333;
+  background-color: transparent;
+}
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color: #555555;
+  background-color: #e7e7e7;
+}
+.navbar-default .navbar-nav > .disabled > a,
+.navbar-default .navbar-nav > .disabled > a:hover,
+.navbar-default .navbar-nav > .disabled > a:focus {
+  color: #cccccc;
+  background-color: transparent;
+}
+.navbar-default .navbar-toggle {
+  border-color: #dddddd;
+}
+.navbar-default .navbar-toggle:hover,
+.navbar-default .navbar-toggle:focus {
+  background-color: #dddddd;
+}
+.navbar-default .navbar-toggle .icon-bar {
+  background-color: #888888;
+}
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+  border-color: #e7e7e7;
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus {
+  background-color: #e7e7e7;
+  color: #555555;
+}
+@media (max-width: 767px) {
+  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+    color: #777777;
+  }
+  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
+  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+    color: #333333;
+    background-color: transparent;
+  }
+  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #555555;
+    background-color: #e7e7e7;
+  }
+  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
+  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+    color: #cccccc;
+    background-color: transparent;
+  }
+}
+.navbar-default .navbar-link {
+  color: #777777;
+}
+.navbar-default .navbar-link:hover {
+  color: #333333;
+}
+.navbar-default .btn-link {
+  color: #777777;
+}
+.navbar-default .btn-link:hover,
+.navbar-default .btn-link:focus {
+  color: #333333;
+}
+.navbar-default .btn-link[disabled]:hover,
+fieldset[disabled] .navbar-default .btn-link:hover,
+.navbar-default .btn-link[disabled]:focus,
+fieldset[disabled] .navbar-default .btn-link:focus {
+  color: #cccccc;
+}
+.navbar-inverse {
+  background-color: #222222;
+  border-color: #080808;
+}
+.navbar-inverse .navbar-brand {
+  color: #d0d0d0;
+}
+.navbar-inverse .navbar-brand:hover,
+.navbar-inverse .navbar-brand:focus {
+  color: #ffffff;
+  background-color: transparent;
+}
+.navbar-inverse .navbar-text {
+  color: #d0d0d0;
+}
+.navbar-inverse .navbar-nav > li > a {
+  color: #d0d0d0;
+}
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > li > a:focus {
+  color: #ffffff;
+  background-color: transparent;
+}
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+  color: #ffffff;
+  background-color: #080808;
+}
+.navbar-inverse .navbar-nav > .disabled > a,
+.navbar-inverse .navbar-nav > .disabled > a:hover,
+.navbar-inverse .navbar-nav > .disabled > a:focus {
+  color: #444444;
+  background-color: transparent;
+}
+.navbar-inverse .navbar-toggle {
+  border-color: #333333;
+}
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  background-color: #333333;
+}
+.navbar-inverse .navbar-toggle .icon-bar {
+  background-color: #ffffff;
+}
+.navbar-inverse .navbar-collapse,
+.navbar-inverse .navbar-form {
+  border-color: #101010;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .open > a:hover,
+.navbar-inverse .navbar-nav > .open > a:focus {
+  background-color: #080808;
+  color: #ffffff;
+}
+@media (max-width: 767px) {
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
+    border-color: #080808;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
+    background-color: #080808;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
+    color: #d0d0d0;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
+    color: #ffffff;
+    background-color: transparent;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #ffffff;
+    background-color: #080808;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+    color: #444444;
+    background-color: transparent;
+  }
+}
+.navbar-inverse .navbar-link {
+  color: #d0d0d0;
+}
+.navbar-inverse .navbar-link:hover {
+  color: #ffffff;
+}
+.navbar-inverse .btn-link {
+  color: #d0d0d0;
+}
+.navbar-inverse .btn-link:hover,
+.navbar-inverse .btn-link:focus {
+  color: #ffffff;
+}
+.navbar-inverse .btn-link[disabled]:hover,
+fieldset[disabled] .navbar-inverse .btn-link:hover,
+.navbar-inverse .btn-link[disabled]:focus,
+fieldset[disabled] .navbar-inverse .btn-link:focus {
+  color: #444444;
+}
+.breadcrumb {
+  padding: 8px 15px;
+  margin-bottom: 20px;
+  list-style: none;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.breadcrumb > li {
+  display: inline-block;
+}
+.breadcrumb > li + li:before {
+  content: "/\00a0";
+  padding: 0 5px;
+  color: #cccccc;
+}
+.breadcrumb > .active {
+  color: #aaaaaa;
+}
+.label {
+  display: inline;
+  padding: .2em .6em .3em;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 1;
+  color: #ffffff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+}
+a.label:hover,
+a.label:focus {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+.label:empty {
+  display: none;
+}
+.btn .label {
+  position: relative;
+  top: -1px;
+}
+.label-default {
+  background-color: #aaaaaa;
+}
+.label-default[href]:hover,
+.label-default[href]:focus {
+  background-color: #919191;
+}
+.label-primary {
+  background-color: #006400;
+}
+.label-primary[href]:hover,
+.label-primary[href]:focus {
+  background-color: #003100;
+}
+.label-success {
+  background-color: #5cb85c;
+}
+.label-success[href]:hover,
+.label-success[href]:focus {
+  background-color: #449d44;
+}
+.label-info {
+  background-color: #5bc0de;
+}
+.label-info[href]:hover,
+.label-info[href]:focus {
+  background-color: #31b0d5;
+}
+.label-warning {
+  background-color: #f0ad4e;
+}
+.label-warning[href]:hover,
+.label-warning[href]:focus {
+  background-color: #ec971f;
+}
+.label-danger {
+  background-color: #d9534f;
+}
+.label-danger[href]:hover,
+.label-danger[href]:focus {
+  background-color: #c9302c;
+}
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.alert h4 {
+  margin-top: 0;
+  color: inherit;
+}
+.alert .alert-link {
+  font-weight: bold;
+}
+.alert > p,
+.alert > ul {
+  margin-bottom: 0;
+}
+.alert > p + p {
+  margin-top: 5px;
+}
+.alert-dismissable,
+.alert-dismissible {
+  padding-right: 35px;
+}
+.alert-dismissable .close,
+.alert-dismissible .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+}
+.alert-success {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #3c763d;
+}
+.alert-success hr {
+  border-top-color: #c9e2b3;
+}
+.alert-success .alert-link {
+  color: #2b542c;
+}
+.alert-info {
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  color: #31708f;
+}
+.alert-info hr {
+  border-top-color: #a6e1ec;
+}
+.alert-info .alert-link {
+  color: #245269;
+}
+.alert-warning {
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+  color: #8a6d3b;
+}
+.alert-warning hr {
+  border-top-color: #f7e1b5;
+}
+.alert-warning .alert-link {
+  color: #66512c;
+}
+.alert-danger {
+  background-color: #f2dede;
+  border-color: #ebccd1;
+  color: #a94442;
+}
+.alert-danger hr {
+  border-top-color: #e4b9c0;
+}
+.alert-danger .alert-link {
+  color: #843534;
+}
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-o-keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+.progress {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #006400;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  -o-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.progress-striped .progress-bar,
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  -webkit-background-size: 40px 40px;
+          background-size: 40px 40px;
+}
+.progress.active .progress-bar,
+.progress-bar.active {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  -o-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite;
+}
+.progress-bar-success {
+  background-color: #5cb85c;
+}
+.progress-striped .progress-bar-success {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-info {
+  background-color: #5bc0de;
+}
+.progress-striped .progress-bar-info {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-warning {
+  background-color: #f0ad4e;
+}
+.progress-striped .progress-bar-warning {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-danger {
+  background-color: #d9534f;
+}
+.progress-striped .progress-bar-danger {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.media {
+  margin-top: 15px;
+}
+.media:first-child {
+  margin-top: 0;
+}
+.media,
+.media-body {
+  zoom: 1;
+  overflow: hidden;
+}
+.media-body {
+  width: 10000px;
+}
+.media-object {
+  display: block;
+}
+.media-object.img-thumbnail {
+  max-width: none;
+}
+.media-right,
+.media > .pull-right {
+  padding-left: 10px;
+}
+.media-left,
+.media > .pull-left {
+  padding-right: 10px;
+}
+.media-left,
+.media-right,
+.media-body {
+  display: table-cell;
+  vertical-align: top;
+}
+.media-middle {
+  vertical-align: middle;
+}
+.media-bottom {
+  vertical-align: bottom;
+}
+.media-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.media-list {
+  padding-left: 0;
+  list-style: none;
+}
+.list-group {
+  margin-bottom: 20px;
+  padding-left: 0;
+}
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+}
+.list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.list-group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+a.list-group-item,
+button.list-group-item {
+  color: #555555;
+}
+a.list-group-item .list-group-item-heading,
+button.list-group-item .list-group-item-heading {
+  color: #333333;
+}
+a.list-group-item:hover,
+button.list-group-item:hover,
+a.list-group-item:focus,
+button.list-group-item:focus {
+  text-decoration: none;
+  color: #555555;
+  background-color: #f5f5f5;
+}
+button.list-group-item {
+  width: 100%;
+  text-align: left;
+}
+.list-group-item.disabled,
+.list-group-item.disabled:hover,
+.list-group-item.disabled:focus {
+  background-color: #ffffff;
+  color: #aaaaaa;
+  cursor: not-allowed;
+}
+.list-group-item.disabled .list-group-item-heading,
+.list-group-item.disabled:hover .list-group-item-heading,
+.list-group-item.disabled:focus .list-group-item-heading {
+  color: inherit;
+}
+.list-group-item.disabled .list-group-item-text,
+.list-group-item.disabled:hover .list-group-item-text,
+.list-group-item.disabled:focus .list-group-item-text {
+  color: #aaaaaa;
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  z-index: 2;
+  color: #ffffff;
+  background-color: #006400;
+  border-color: #006400;
+}
+.list-group-item.active .list-group-item-heading,
+.list-group-item.active:hover .list-group-item-heading,
+.list-group-item.active:focus .list-group-item-heading,
+.list-group-item.active .list-group-item-heading > small,
+.list-group-item.active:hover .list-group-item-heading > small,
+.list-group-item.active:focus .list-group-item-heading > small,
+.list-group-item.active .list-group-item-heading > .small,
+.list-group-item.active:hover .list-group-item-heading > .small,
+.list-group-item.active:focus .list-group-item-heading > .small {
+  color: inherit;
+}
+.list-group-item.active .list-group-item-text,
+.list-group-item.active:hover .list-group-item-text,
+.list-group-item.active:focus .list-group-item-text {
+  color: #31ff31;
+}
+.list-group-item-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+a.list-group-item-success,
+button.list-group-item-success {
+  color: #3c763d;
+}
+a.list-group-item-success .list-group-item-heading,
+button.list-group-item-success .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-success:hover,
+button.list-group-item-success:hover,
+a.list-group-item-success:focus,
+button.list-group-item-success:focus {
+  color: #3c763d;
+  background-color: #d0e9c6;
+}
+a.list-group-item-success.active,
+button.list-group-item-success.active,
+a.list-group-item-success.active:hover,
+button.list-group-item-success.active:hover,
+a.list-group-item-success.active:focus,
+button.list-group-item-success.active:focus {
+  color: #fff;
+  background-color: #3c763d;
+  border-color: #3c763d;
+}
+.list-group-item-info {
+  color: #31708f;
+  background-color: #d9edf7;
+}
+a.list-group-item-info,
+button.list-group-item-info {
+  color: #31708f;
+}
+a.list-group-item-info .list-group-item-heading,
+button.list-group-item-info .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-info:hover,
+button.list-group-item-info:hover,
+a.list-group-item-info:focus,
+button.list-group-item-info:focus {
+  color: #31708f;
+  background-color: #c4e3f3;
+}
+a.list-group-item-info.active,
+button.list-group-item-info.active,
+a.list-group-item-info.active:hover,
+button.list-group-item-info.active:hover,
+a.list-group-item-info.active:focus,
+button.list-group-item-info.active:focus {
+  color: #fff;
+  background-color: #31708f;
+  border-color: #31708f;
+}
+.list-group-item-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+}
+a.list-group-item-warning,
+button.list-group-item-warning {
+  color: #8a6d3b;
+}
+a.list-group-item-warning .list-group-item-heading,
+button.list-group-item-warning .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-warning:hover,
+button.list-group-item-warning:hover,
+a.list-group-item-warning:focus,
+button.list-group-item-warning:focus {
+  color: #8a6d3b;
+  background-color: #faf2cc;
+}
+a.list-group-item-warning.active,
+button.list-group-item-warning.active,
+a.list-group-item-warning.active:hover,
+button.list-group-item-warning.active:hover,
+a.list-group-item-warning.active:focus,
+button.list-group-item-warning.active:focus {
+  color: #fff;
+  background-color: #8a6d3b;
+  border-color: #8a6d3b;
+}
+.list-group-item-danger {
+  color: #a94442;
+  background-color: #f2dede;
+}
+a.list-group-item-danger,
+button.list-group-item-danger {
+  color: #a94442;
+}
+a.list-group-item-danger .list-group-item-heading,
+button.list-group-item-danger .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-danger:hover,
+button.list-group-item-danger:hover,
+a.list-group-item-danger:focus,
+button.list-group-item-danger:focus {
+  color: #a94442;
+  background-color: #ebcccc;
+}
+a.list-group-item-danger.active,
+button.list-group-item-danger.active,
+a.list-group-item-danger.active:hover,
+button.list-group-item-danger.active:hover,
+a.list-group-item-danger.active:focus,
+button.list-group-item-danger.active:focus {
+  color: #fff;
+  background-color: #a94442;
+  border-color: #a94442;
+}
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
+.panel {
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+.panel-body {
+  padding: 15px;
+}
+.panel-heading {
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.panel-heading > .dropdown .dropdown-toggle {
+  color: inherit;
+}
+.panel-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 16px;
+  color: inherit;
+}
+.panel-title > a,
+.panel-title > small,
+.panel-title > .small,
+.panel-title > small > a,
+.panel-title > .small > a {
+  color: inherit;
+}
+.panel-footer {
+  padding: 10px 15px;
+  background-color: #f5f5f5;
+  border-top: 1px solid #dddddd;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.panel > .list-group,
+.panel > .panel-collapse > .list-group {
+  margin-bottom: 0;
+}
+.panel > .list-group .list-group-item,
+.panel > .panel-collapse > .list-group .list-group-item {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+.panel > .list-group:first-child .list-group-item:first-child,
+.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
+  border-top: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.panel > .list-group:last-child .list-group-item:last-child,
+.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
+  border-bottom: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+.panel-heading + .list-group .list-group-item:first-child {
+  border-top-width: 0;
+}
+.list-group + .panel-footer {
+  border-top-width: 0;
+}
+.panel > .table,
+.panel > .table-responsive > .table,
+.panel > .panel-collapse > .table {
+  margin-bottom: 0;
+}
+.panel > .table caption,
+.panel > .table-responsive > .table caption,
+.panel > .panel-collapse > .table caption {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.panel > .table:first-child,
+.panel > .table-responsive:first-child > .table:first-child {
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
+.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
+  border-top-left-radius: 3px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
+.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
+  border-top-right-radius: 3px;
+}
+.panel > .table:last-child,
+.panel > .table-responsive:last-child > .table:last-child {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
+.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
+  border-bottom-left-radius: 3px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
+.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
+  border-bottom-right-radius: 3px;
+}
+.panel > .panel-body + .table,
+.panel > .panel-body + .table-responsive,
+.panel > .table + .panel-body,
+.panel > .table-responsive + .panel-body {
+  border-top: 1px solid #dddddd;
+}
+.panel > .table > tbody:first-child > tr:first-child th,
+.panel > .table > tbody:first-child > tr:first-child td {
+  border-top: 0;
+}
+.panel > .table-bordered,
+.panel > .table-responsive > .table-bordered {
+  border: 0;
+}
+.panel > .table-bordered > thead > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
+.panel > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-bordered > thead > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
+.panel > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-bordered > tfoot > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+  border-left: 0;
+}
+.panel > .table-bordered > thead > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
+.panel > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-bordered > thead > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
+.panel > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-bordered > tfoot > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+  border-right: 0;
+}
+.panel > .table-bordered > thead > tr:first-child > td,
+.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
+.panel > .table-bordered > tbody > tr:first-child > td,
+.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
+.panel > .table-bordered > thead > tr:first-child > th,
+.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
+.panel > .table-bordered > tbody > tr:first-child > th,
+.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
+  border-bottom: 0;
+}
+.panel > .table-bordered > tbody > tr:last-child > td,
+.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
+.panel > .table-bordered > tfoot > tr:last-child > td,
+.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
+.panel > .table-bordered > tbody > tr:last-child > th,
+.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
+.panel > .table-bordered > tfoot > tr:last-child > th,
+.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
+  border-bottom: 0;
+}
+.panel > .table-responsive {
+  border: 0;
+  margin-bottom: 0;
+}
+.panel-group {
+  margin-bottom: 20px;
+}
+.panel-group .panel {
+  margin-bottom: 0;
+  border-radius: 4px;
+}
+.panel-group .panel + .panel {
+  margin-top: 5px;
+}
+.panel-group .panel-heading {
+  border-bottom: 0;
+}
+.panel-group .panel-heading + .panel-collapse > .panel-body,
+.panel-group .panel-heading + .panel-collapse > .list-group {
+  border-top: 1px solid #dddddd;
+}
+.panel-group .panel-footer {
+  border-top: 0;
+}
+.panel-group .panel-footer + .panel-collapse .panel-body {
+  border-bottom: 1px solid #dddddd;
+}
+.panel-default {
+  border-color: #dddddd;
+}
+.panel-default > .panel-heading {
+  color: #666666;
+  background-color: #f5f5f5;
+  border-color: #dddddd;
+}
+.panel-default > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #dddddd;
+}
+.panel-default > .panel-heading .badge {
+  color: #f5f5f5;
+  background-color: #666666;
+}
+.panel-default > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #dddddd;
+}
+.panel-primary {
+  border-color: #006400;
+}
+.panel-primary > .panel-heading {
+  color: #ffffff;
+  background-color: #006400;
+  border-color: #006400;
+}
+.panel-primary > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #006400;
+}
+.panel-primary > .panel-heading .badge {
+  color: #006400;
+  background-color: #ffffff;
+}
+.panel-primary > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #006400;
+}
+.panel-success {
+  border-color: #d6e9c6;
+}
+.panel-success > .panel-heading {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+.panel-success > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #d6e9c6;
+}
+.panel-success > .panel-heading .badge {
+  color: #dff0d8;
+  background-color: #3c763d;
+}
+.panel-success > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #d6e9c6;
+}
+.panel-info {
+  border-color: #bce8f1;
+}
+.panel-info > .panel-heading {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.panel-info > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #bce8f1;
+}
+.panel-info > .panel-heading .badge {
+  color: #d9edf7;
+  background-color: #31708f;
+}
+.panel-info > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #bce8f1;
+}
+.panel-warning {
+  border-color: #faebcc;
+}
+.panel-warning > .panel-heading {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+.panel-warning > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #faebcc;
+}
+.panel-warning > .panel-heading .badge {
+  color: #fcf8e3;
+  background-color: #8a6d3b;
+}
+.panel-warning > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #faebcc;
+}
+.panel-danger {
+  border-color: #ebccd1;
+}
+.panel-danger > .panel-heading {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+.panel-danger > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #ebccd1;
+}
+.panel-danger > .panel-heading .badge {
+  color: #f2dede;
+  background-color: #a94442;
+}
+.panel-danger > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #ebccd1;
+}
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object,
+.embed-responsive video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  border: 0;
+}
+.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}
+.embed-responsive-4by3 {
+  padding-bottom: 75%;
+}
+.close {
+  float: right;
+  font-size: 21px;
+  font-weight: bold;
+  line-height: 1;
+  color: #000000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+}
+.close:hover,
+.close:focus {
+  color: #000000;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
+.modal-open {
+  overflow: hidden;
+}
+.modal {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1050;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+.modal.fade .modal-dialog {
+  -webkit-transform: translate(0, -25%);
+  -ms-transform: translate(0, -25%);
+  -o-transform: translate(0, -25%);
+  transform: translate(0, -25%);
+  -webkit-transition: -webkit-transform 0.3s ease-out;
+  -o-transition: -o-transform 0.3s ease-out;
+  transition: transform 0.3s ease-out;
+}
+.modal.in .modal-dialog {
+  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
+  -o-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 10px;
+}
+.modal-content {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #999999;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+  outline: 0;
+}
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  background-color: #000000;
+}
+.modal-backdrop.fade {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+.modal-backdrop.in {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.modal-header {
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
+}
+.modal-header .close {
+  margin-top: -2px;
+}
+.modal-title {
+  margin: 0;
+  line-height: 1.42857143;
+}
+.modal-body {
+  position: relative;
+  padding: 15px;
+}
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+.modal-footer .btn + .btn {
+  margin-left: 5px;
+  margin-bottom: 0;
+}
+.modal-footer .btn-group .btn + .btn {
+  margin-left: -1px;
+}
+.modal-footer .btn-block + .btn-block {
+  margin-left: 0;
+}
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+@media (min-width: 768px) {
+  .modal-dialog {
+    width: 600px;
+    margin: 30px auto;
+  }
+  .modal-content {
+    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  }
+  .modal-sm {
+    width: 300px;
+  }
+}
+@media (min-width: 992px) {
+  .modal-lg {
+    width: 900px;
+  }
+}
+.clearfix:before,
+.clearfix:after,
+.dl-horizontal dd:before,
+.dl-horizontal dd:after,
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after,
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after,
+.btn-toolbar:before,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after,
+.nav:before,
+.nav:after,
+.navbar:before,
+.navbar:after,
+.navbar-header:before,
+.navbar-header:after,
+.navbar-collapse:before,
+.navbar-collapse:after,
+.panel-body:before,
+.panel-body:after,
+.modal-header:before,
+.modal-header:after,
+.modal-footer:before,
+.modal-footer:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after,
+.dl-horizontal dd:after,
+.container:after,
+.container-fluid:after,
+.row:after,
+.form-horizontal .form-group:after,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:after,
+.nav:after,
+.navbar:after,
+.navbar-header:after,
+.navbar-collapse:after,
+.panel-body:after,
+.modal-header:after,
+.modal-footer:after {
+  clear: both;
+}
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+.hide {
+  display: none !important;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+.hidden {
+  display: none !important;
+}
+.affix {
+  position: fixed;
+}
+@-ms-viewport {
+  width: device-width;
+}
+.visible-xs,
+.visible-sm,
+.visible-md,
+.visible-lg {
+  display: none !important;
+}
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block {
+  display: none !important;
+}
+@media (max-width: 767px) {
+  .visible-xs {
+    display: block !important;
+  }
+  table.visible-xs {
+    display: table !important;
+  }
+  tr.visible-xs {
+    display: table-row !important;
+  }
+  th.visible-xs,
+  td.visible-xs {
+    display: table-cell !important;
+  }
+}
+@media (max-width: 767px) {
+  .visible-xs-block {
+    display: block !important;
+  }
+}
+@media (max-width: 767px) {
+  .visible-xs-inline {
+    display: inline !important;
+  }
+}
+@media (max-width: 767px) {
+  .visible-xs-inline-block {
+    display: inline-block !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-sm {
+    display: block !important;
+  }
+  table.visible-sm {
+    display: table !important;
+  }
+  tr.visible-sm {
+    display: table-row !important;
+  }
+  th.visible-sm,
+  td.visible-sm {
+    display: table-cell !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-sm-block {
+    display: block !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-sm-inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-sm-inline-block {
+    display: inline-block !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-md {
+    display: block !important;
+  }
+  table.visible-md {
+    display: table !important;
+  }
+  tr.visible-md {
+    display: table-row !important;
+  }
+  th.visible-md,
+  td.visible-md {
+    display: table-cell !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-md-block {
+    display: block !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-md-inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-md-inline-block {
+    display: inline-block !important;
+  }
+}
+@media (min-width: 1200px) {
+  .visible-lg {
+    display: block !important;
+  }
+  table.visible-lg {
+    display: table !important;
+  }
+  tr.visible-lg {
+    display: table-row !important;
+  }
+  th.visible-lg,
+  td.visible-lg {
+    display: table-cell !important;
+  }
+}
+@media (min-width: 1200px) {
+  .visible-lg-block {
+    display: block !important;
+  }
+}
+@media (min-width: 1200px) {
+  .visible-lg-inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 1200px) {
+  .visible-lg-inline-block {
+    display: inline-block !important;
+  }
+}
+@media (max-width: 767px) {
+  .hidden-xs {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .hidden-sm {
+    display: none !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hidden-md {
+    display: none !important;
+  }
+}
+@media (min-width: 1200px) {
+  .hidden-lg {
+    display: none !important;
+  }
+}
+.visible-print {
+  display: none !important;
+}
+@media print {
+  .visible-print {
+    display: block !important;
+  }
+  table.visible-print {
+    display: table !important;
+  }
+  tr.visible-print {
+    display: table-row !important;
+  }
+  th.visible-print,
+  td.visible-print {
+    display: table-cell !important;
+  }
+}
+.visible-print-block {
+  display: none !important;
+}
+@media print {
+  .visible-print-block {
+    display: block !important;
+  }
+}
+.visible-print-inline {
+  display: none !important;
+}
+@media print {
+  .visible-print-inline {
+    display: inline !important;
+  }
+}
+.visible-print-inline-block {
+  display: none !important;
+}
+@media print {
+  .visible-print-inline-block {
+    display: inline-block !important;
+  }
+}
+@media print {
+  .hidden-print {
+    display: none !important;
+  }
+}
diff --git a/packages/learn/static/bootstrap3/css/bootstrap.min.css b/packages/learn/static/bootstrap3/css/bootstrap.min.css
new file mode 100644
index 0000000000..6629765998
--- /dev/null
+++ b/packages/learn/static/bootstrap3/css/bootstrap.min.css
@@ -0,0 +1,14 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (<none>)
+ * Config saved to config.json and <none>
+ *//*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,*:before,*:after{background:transparent !important;color:#000 !important;-webkit-box-shadow:none !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000 !important}.label{border:1px solid #000}.table{border-collapse:collapse !important}.table td,.table th{background-color:#fff !important}.table-bordered th,.table-bordered td{border:1px solid #ddd !important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#666;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#006400;text-decoration:none}a:hover,a:focus{color:#001800;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #fff}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:normal;line-height:1;color:#aaa}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}small,.small{font-size:85%}mark,.mark{background-color:#fcf8e3;padding:.2em}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#aaa}.text-primary{color:#006400}a.text-primary:hover,a.text-primary:focus{color:#003100}.text-success{color:#3c763d}a.text-success:hover,a.text-success:focus{color:#2b542c}.text-info{color:#31708f}a.text-info:hover,a.text-info:focus{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:hover,a.text-warning:focus{color:#66512c}.text-danger{color:#a94442}a.text-danger:hover,a.text-danger:focus{color:#843534}.bg-primary{color:#fff;background-color:#006400}a.bg-primary:hover,a.bg-primary:focus{background-color:#003100}.bg-success{background-color:#dff0d8}a.bg-success:hover,a.bg-success:focus{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:hover,a.bg-info:focus{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:hover,a.bg-warning:focus{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:hover,a.bg-danger:focus{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #fff}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-left:5px;padding-right:5px}dl{margin-top:0;margin-bottom:20px}dt,dd{line-height:1.42857143}dt{font-weight:bold}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #aaa}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #fff}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{display:block;font-size:80%;line-height:1.42857143;color:#aaa}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;border-right:5px solid #fff;border-left:0;text-align:right}.blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content:''}.blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25)}kbd kbd{padding:0;font-size:100%;font-weight:bold;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#666;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#aaa;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*="col-"]{position:static;float:none;display:table-column}table td[class*="col-"],table th[class*="col-"]{position:static;float:none;display:table-cell}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5}.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr.active:hover>th{background-color:#e8e8e8}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:#dff0d8}.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr.success:hover>th{background-color:#d0e9c6}.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th{background-color:#d9edf7}.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr.info:hover>th{background-color:#c4e3f3}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:#fcf8e3}.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr.warning:hover>th{background-color:#faf2cc}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:#f2dede}.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr.danger:hover>th{background-color:#ebcccc}.table-responsive{overflow-x:auto;min-height:0.01%}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>thead>tr>th:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.table-responsive>.table-bordered>thead>tr>th:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>th,.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>td{border-bottom:0}}fieldset{padding:0;margin:0;border:0;min-width:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#666;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:bold}input[type="search"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type="file"]{display:block}input[type="range"]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#888}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#888;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{border:0;background-color:transparent}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#fff;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type="search"]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type="date"].form-control,input[type="time"].form-control,input[type="datetime-local"].form-control,input[type="month"].form-control{line-height:34px}input[type="date"].input-sm,input[type="time"].input-sm,input[type="datetime-local"].input-sm,input[type="month"].input-sm,.input-group-sm input[type="date"],.input-group-sm input[type="time"],.input-group-sm input[type="datetime-local"],.input-group-sm input[type="month"]{line-height:30px}input[type="date"].input-lg,input[type="time"].input-lg,input[type="datetime-local"].input-lg,input[type="month"].input-lg,.input-group-lg input[type="date"],.input-group-lg input[type="time"],.input-group-lg input[type="datetime-local"],.input-group-lg input[type="month"]{line-height:46px}}.form-group{margin-bottom:15px}.radio,.checkbox{position:relative;display:block;margin-top:10px;margin-bottom:10px}.radio label,.checkbox label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:normal;cursor:pointer}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{position:absolute;margin-left:-20px;margin-top:4px \9}.radio+.radio,.checkbox+.checkbox{margin-top:-5px}.radio-inline,.checkbox-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;vertical-align:middle;font-weight:normal;cursor:pointer}.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{margin-top:0;margin-left:10px}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"].disabled,input[type="checkbox"].disabled,fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"]{cursor:not-allowed}.radio-inline.disabled,.checkbox-inline.disabled,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox-inline{cursor:not-allowed}.radio.disabled label,.checkbox.disabled label,fieldset[disabled] .radio label,fieldset[disabled] .checkbox label{cursor:not-allowed}.form-control-static{padding-top:7px;padding-bottom:7px;margin-bottom:0;min-height:34px}.form-control-static.input-lg,.form-control-static.input-sm{padding-left:0;padding-right:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}textarea.input-sm,select[multiple].input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm textarea.form-control,.form-group-sm select[multiple].form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}textarea.input-lg,select[multiple].input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg textarea.form-control,.form-group-lg select[multiple].form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.input-lg+.form-control-feedback,.input-group-lg+.form-control-feedback,.form-group-lg .form-control+.form-control-feedback{width:46px;height:46px;line-height:46px}.input-sm+.form-control-feedback,.input-group-sm+.form-control-feedback,.form-group-sm .form-control+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;border-color:#3c763d;background-color:#dff0d8}.has-success .form-control-feedback{color:#3c763d}.has-warning .help-block,.has-warning .control-label,.has-warning .radio,.has-warning .checkbox,.has-warning .radio-inline,.has-warning .checkbox-inline,.has-warning.radio label,.has-warning.checkbox label,.has-warning.radio-inline label,.has-warning.checkbox-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;border-color:#8a6d3b;background-color:#fcf8e3}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .help-block,.has-error .control-label,.has-error .radio,.has-error .checkbox,.has-error .radio-inline,.has-error .checkbox-inline,.has-error.radio label,.has-error.checkbox label,.has-error.radio-inline label,.has-error.checkbox-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;border-color:#a94442;background-color:#f2dede}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#a6a6a6}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn,.form-inline .input-group .form-control{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .radio,.form-inline .checkbox{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .radio label,.form-inline .checkbox label{padding-left:0}.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{margin-top:0;margin-bottom:0;padding-top:7px}.form-horizontal .radio,.form-horizontal .checkbox{min-height:27px}.form-horizontal .form-group{margin-left:-15px;margin-right:-15px}@media (min-width:768px){.form-horizontal .control-label{text-align:right;margin-bottom:0;padding-top:7px}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:focus,.btn-default.focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default:active:hover,.btn-default.active:hover,.open>.dropdown-toggle.btn-default:hover,.btn-default:active:focus,.btn-default.active:focus,.open>.dropdown-toggle.btn-default:focus,.btn-default:active.focus,.btn-default.active.focus,.open>.dropdown-toggle.btn-default.focus{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#006400;border-color:#004a00}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#003100;border-color:#000}.btn-primary:hover{color:#fff;background-color:#003100;border-color:#000d00}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#003100;border-color:#000d00}.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#fff;background-color:#000d00;border-color:#000}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus{background-color:#006400;border-color:#004a00}.btn-primary .badge{color:#006400;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success:active:hover,.btn-success.active:hover,.open>.dropdown-toggle.btn-success:hover,.btn-success:active:focus,.btn-success.active:focus,.open>.dropdown-toggle.btn-success:focus,.btn-success:active.focus,.btn-success.active.focus,.open>.dropdown-toggle.btn-success.focus{color:#fff;background-color:#398439;border-color:#255625}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info:active:hover,.btn-info.active:hover,.open>.dropdown-toggle.btn-info:hover,.btn-info:active:focus,.btn-info.active:focus,.open>.dropdown-toggle.btn-info:focus,.btn-info:active.focus,.btn-info.active.focus,.open>.dropdown-toggle.btn-info.focus{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning:active:hover,.btn-warning.active:hover,.open>.dropdown-toggle.btn-warning:hover,.btn-warning:active:focus,.btn-warning.active:focus,.open>.dropdown-toggle.btn-warning:focus,.btn-warning:active.focus,.btn-warning.active.focus,.open>.dropdown-toggle.btn-warning.focus{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger:active:hover,.btn-danger.active:hover,.open>.dropdown-toggle.btn-danger:hover,.btn-danger:active:focus,.btn-danger.active:focus,.open>.dropdown-toggle.btn-danger:focus,.btn-danger:active.focus,.btn-danger.active.focus,.open>.dropdown-toggle.btn-danger.focus{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{color:#006400;font-weight:normal;border-radius:0}.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#001800;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#aaa;text-decoration:none}.btn-lg,.btn-group-lg>.btn{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-sm,.btn-group-sm>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-xs,.btn-group-xs>.btn{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-property:height, visibility;-o-transition-property:height, visibility;transition-property:height, visibility;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid \9;border-right:4px solid transparent;border-left:4px solid transparent}.dropup,.dropdown{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;font-size:14px;text-align:left;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);-webkit-background-clip:padding-box;background-clip:padding-box}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.42857143;color:#666;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#595959;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;outline:0;background-color:#006400}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#aaa}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);cursor:not-allowed}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{left:auto;right:0}.dropdown-menu-left{left:0;right:auto}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#aaa;white-space:nowrap}.dropdown-backdrop{position:fixed;left:0;right:0;bottom:0;top:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px dashed;border-bottom:4px solid \9;content:""}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{left:auto;right:0}.navbar-right .dropdown-menu-left{left:0;right:auto}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-left:8px;padding-right:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-left:12px;padding-right:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-right-radius:0;border-top-left-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{float:none;display:table-cell;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle="buttons"]>.btn input[type="radio"],[data-toggle="buttons"]>.btn-group>.btn input[type="radio"],[data-toggle="buttons"]>.btn input[type="checkbox"],[data-toggle="buttons"]>.btn-group>.btn input[type="checkbox"]{position:absolute;clip:rect(0, 0, 0, 0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*="col-"]{float:none;padding-left:0;padding-right:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn,select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn,select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn{height:auto}.input-group-addon,.input-group-btn,.input-group .form-control{display:table-cell}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:normal;line-height:1;color:#888;text-align:center;background-color:#fff;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type="radio"],.input-group-addon input[type="checkbox"]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-top-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-bottom-left-radius:0;border-top-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:hover,.input-group-btn>.btn:focus,.input-group-btn>.btn:active{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{margin-bottom:0;padding-left:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#fff}.nav>li.disabled>a{color:#aaa}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus{color:#aaa;text-decoration:none;background-color:transparent;cursor:not-allowed}.nav .open>a,.nav .open>a:hover,.nav .open>a:focus{background-color:#fff;border-color:#006400}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#fff #fff #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#888;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{color:#fff;background-color:#006400}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}.navbar{position:relative;min-height:40px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{overflow-x:visible;padding-right:15px;padding-left:15px;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);-webkit-overflow-scrolling:touch}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block !important;height:auto !important;padding-bottom:0;overflow:visible !important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{padding-left:0;padding-right:0}}.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:200px}}.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;padding:10px 15px;font-size:18px;line-height:20px;height:40px}.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;margin-right:15px;padding:9px 10px;margin-top:3px;margin-bottom:3px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu .dropdown-header{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:hover,.navbar-nav .open .dropdown-menu>li>a:focus{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px}}.navbar-form{margin-left:-15px;margin-right:-15px;padding:10px 15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);margin-top:3px;margin-bottom:3px}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn,.navbar-form .input-group .form-control{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .radio,.navbar-form .checkbox{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .radio label,.navbar-form .checkbox label{padding-left:0}.navbar-form .radio input[type="radio"],.navbar-form .checkbox input[type="checkbox"]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;border:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:3px;margin-bottom:3px}.navbar-btn.btn-sm{margin-top:5px;margin-bottom:5px}.navbar-btn.btn-xs{margin-top:9px;margin-bottom:9px}.navbar-text{margin-top:10px;margin-bottom:10px}@media (min-width:768px){.navbar-text{float:left;margin-left:15px;margin-right:15px}}@media (min-width:768px){.navbar-left{float:left !important}.navbar-right{float:right !important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:hover,.navbar-default .navbar-nav>.disabled>a:focus{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background-color:#e7e7e7;color:#555}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:hover,.navbar-default .btn-link:focus{color:#333}.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:hover,.navbar-default .btn-link[disabled]:focus,fieldset[disabled] .navbar-default .btn-link:focus{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#d0d0d0}.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#d0d0d0}.navbar-inverse .navbar-nav>li>a{color:#d0d0d0}.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:hover,.navbar-inverse .navbar-nav>.disabled>a:focus{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{background-color:#080808;color:#fff}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#d0d0d0}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#d0d0d0}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#d0d0d0}.navbar-inverse .btn-link:hover,.navbar-inverse .btn-link:focus{color:#fff}.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:hover,.navbar-inverse .btn-link[disabled]:focus,fieldset[disabled] .navbar-inverse .btn-link:focus{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{content:"/\00a0";padding:0 5px;color:#ccc}.breadcrumb>.active{color:#aaa}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:bold;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:hover,a.label:focus{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#aaa}.label-default[href]:hover,.label-default[href]:focus{background-color:#919191}.label-primary{background-color:#006400}.label-primary[href]:hover,.label-primary[href]:focus{background-color:#003100}.label-success{background-color:#5cb85c}.label-success[href]:hover,.label-success[href]:focus{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:hover,.label-info[href]:focus{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#c9302c}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:bold}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{background-color:#d9edf7;border-color:#bce8f1;color:#31708f}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{background-color:#f2dede;border-color:#ebccd1;color:#a94442}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{overflow:hidden;height:20px;margin-bottom:20px;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}.progress-bar{float:left;width:0%;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#006400;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-striped .progress-bar,.progress-bar-striped{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress.active .progress-bar,.progress-bar.active{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{zoom:1;overflow:hidden}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-left,.media-right,.media-body{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{margin-bottom:20px;padding-left:0}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{text-decoration:none;color:#555;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item.disabled,.list-group-item.disabled:hover,.list-group-item.disabled:focus{background-color:#fff;color:#aaa;cursor:not-allowed}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text{color:#aaa}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{z-index:2;color:#fff;background-color:#006400;border-color:#006400}.list-group-item.active .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>.small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:hover .list-group-item-text,.list-group-item.active:focus .list-group-item-text{color:#31ff31}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:hover,button.list-group-item-success:hover,a.list-group-item-success:focus,button.list-group-item-success:focus{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,button.list-group-item-success.active,a.list-group-item-success.active:hover,button.list-group-item-success.active:hover,a.list-group-item-success.active:focus,button.list-group-item-success.active:focus{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:hover,button.list-group-item-info:hover,a.list-group-item-info:focus,button.list-group-item-info:focus{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,button.list-group-item-info.active,a.list-group-item-info.active:hover,button.list-group-item-info.active:hover,a.list-group-item-info.active:focus,button.list-group-item-info.active:focus{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:hover,button.list-group-item-warning:hover,a.list-group-item-warning:focus,button.list-group-item-warning:focus{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,button.list-group-item-warning.active,a.list-group-item-warning.active:hover,button.list-group-item-warning.active:hover,a.list-group-item-warning.active:focus,button.list-group-item-warning.active:focus{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:hover,button.list-group-item-danger:hover,a.list-group-item-danger:focus,button.list-group-item-danger:focus{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,button.list-group-item-danger.active,a.list-group-item-danger.active:hover,button.list-group-item-danger.active:hover,a.list-group-item-danger.active:focus,button.list-group-item-danger.active:focus{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:3px;border-top-left-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>a,.panel-title>small,.panel-title>.small,.panel-title>small>a,.panel-title>.small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-right-radius:3px;border-top-left-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-right-radius:0;border-top-left-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.table,.panel>.table-responsive>.table,.panel>.panel-collapse>.table{margin-bottom:0}.panel>.table caption,.panel>.table-responsive>.table caption,.panel>.panel-collapse>.table caption{padding-left:15px;padding-right:15px}.panel>.table:first-child,.panel>.table-responsive:first-child>.table:first-child{border-top-right-radius:3px;border-top-left-radius:3px}.panel>.table:first-child>thead:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table:last-child,.panel>.table-responsive:last-child>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child th,.panel>.table>tbody:first-child>tr:first-child td{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{border:0;margin-bottom:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.panel-body,.panel-group .panel-heading+.panel-collapse>.list-group{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#666;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#666}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#006400}.panel-primary>.panel-heading{color:#fff;background-color:#006400;border-color:#006400}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#006400}.panel-primary>.panel-heading .badge{color:#006400;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#006400}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal{display:none;overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transform:translate(0, -25%);-ms-transform:translate(0, -25%);-o-transform:translate(0, -25%);transform:translate(0, -25%);-webkit-transition:-webkit-transform 0.3s ease-out;-o-transition:-o-transform 0.3s ease-out;transition:transform 0.3s ease-out}.modal.in .modal-dialog{-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,0.5);box-shadow:0 3px 9px rgba(0,0,0,0.5);-webkit-background-clip:padding-box;background-clip:padding-box;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)}.modal-backdrop.in{opacity:.5;filter:alpha(opacity=50)}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-left:5px;margin-bottom:0}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.5);box-shadow:0 5px 15px rgba(0,0,0,0.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.panel-body:before,.panel-body:after,.modal-header:before,.modal-header:after,.modal-footer:before,.modal-footer:after{content:" ";display:table}.clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.panel-body:after,.modal-header:after,.modal-footer:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table !important}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table !important}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table !important}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table !important}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1200px){.visible-lg-block{display:block !important}}@media (min-width:1200px){.visible-lg-inline{display:inline !important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table !important}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}}
\ No newline at end of file
diff --git a/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.eot b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.eot
new file mode 100644
index 0000000000..b93a4953ff
Binary files /dev/null and b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.eot differ
diff --git a/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.svg b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.svg
new file mode 100644
index 0000000000..94fb5490a2
--- /dev/null
+++ b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.svg
@@ -0,0 +1,288 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata></metadata>
+<defs>
+<font id="glyphicons_halflingsregular" horiz-adv-x="1200" >
+<font-face units-per-em="1200" ascent="960" descent="-240" />
+<missing-glyph horiz-adv-x="500" />
+<glyph horiz-adv-x="0" />
+<glyph horiz-adv-x="400" />
+<glyph unicode=" " />
+<glyph unicode="*" d="M600 1100q15 0 34 -1.5t30 -3.5l11 -1q10 -2 17.5 -10.5t7.5 -18.5v-224l158 158q7 7 18 8t19 -6l106 -106q7 -8 6 -19t-8 -18l-158 -158h224q10 0 18.5 -7.5t10.5 -17.5q6 -41 6 -75q0 -15 -1.5 -34t-3.5 -30l-1 -11q-2 -10 -10.5 -17.5t-18.5 -7.5h-224l158 -158 q7 -7 8 -18t-6 -19l-106 -106q-8 -7 -19 -6t-18 8l-158 158v-224q0 -10 -7.5 -18.5t-17.5 -10.5q-41 -6 -75 -6q-15 0 -34 1.5t-30 3.5l-11 1q-10 2 -17.5 10.5t-7.5 18.5v224l-158 -158q-7 -7 -18 -8t-19 6l-106 106q-7 8 -6 19t8 18l158 158h-224q-10 0 -18.5 7.5 t-10.5 17.5q-6 41 -6 75q0 15 1.5 34t3.5 30l1 11q2 10 10.5 17.5t18.5 7.5h224l-158 158q-7 7 -8 18t6 19l106 106q8 7 19 6t18 -8l158 -158v224q0 10 7.5 18.5t17.5 10.5q41 6 75 6z" />
+<glyph unicode="+" d="M450 1100h200q21 0 35.5 -14.5t14.5 -35.5v-350h350q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-350v-350q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v350h-350q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5 h350v350q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xa0;" />
+<glyph unicode="&#xa5;" d="M825 1100h250q10 0 12.5 -5t-5.5 -13l-364 -364q-6 -6 -11 -18h268q10 0 13 -6t-3 -14l-120 -160q-6 -8 -18 -14t-22 -6h-125v-100h275q10 0 13 -6t-3 -14l-120 -160q-6 -8 -18 -14t-22 -6h-125v-174q0 -11 -7.5 -18.5t-18.5 -7.5h-148q-11 0 -18.5 7.5t-7.5 18.5v174 h-275q-10 0 -13 6t3 14l120 160q6 8 18 14t22 6h125v100h-275q-10 0 -13 6t3 14l120 160q6 8 18 14t22 6h118q-5 12 -11 18l-364 364q-8 8 -5.5 13t12.5 5h250q25 0 43 -18l164 -164q8 -8 18 -8t18 8l164 164q18 18 43 18z" />
+<glyph unicode="&#x2000;" horiz-adv-x="650" />
+<glyph unicode="&#x2001;" horiz-adv-x="1300" />
+<glyph unicode="&#x2002;" horiz-adv-x="650" />
+<glyph unicode="&#x2003;" horiz-adv-x="1300" />
+<glyph unicode="&#x2004;" horiz-adv-x="433" />
+<glyph unicode="&#x2005;" horiz-adv-x="325" />
+<glyph unicode="&#x2006;" horiz-adv-x="216" />
+<glyph unicode="&#x2007;" horiz-adv-x="216" />
+<glyph unicode="&#x2008;" horiz-adv-x="162" />
+<glyph unicode="&#x2009;" horiz-adv-x="260" />
+<glyph unicode="&#x200a;" horiz-adv-x="72" />
+<glyph unicode="&#x202f;" horiz-adv-x="260" />
+<glyph unicode="&#x205f;" horiz-adv-x="325" />
+<glyph unicode="&#x20ac;" d="M744 1198q242 0 354 -189q60 -104 66 -209h-181q0 45 -17.5 82.5t-43.5 61.5t-58 40.5t-60.5 24t-51.5 7.5q-19 0 -40.5 -5.5t-49.5 -20.5t-53 -38t-49 -62.5t-39 -89.5h379l-100 -100h-300q-6 -50 -6 -100h406l-100 -100h-300q9 -74 33 -132t52.5 -91t61.5 -54.5t59 -29 t47 -7.5q22 0 50.5 7.5t60.5 24.5t58 41t43.5 61t17.5 80h174q-30 -171 -128 -278q-107 -117 -274 -117q-206 0 -324 158q-36 48 -69 133t-45 204h-217l100 100h112q1 47 6 100h-218l100 100h134q20 87 51 153.5t62 103.5q117 141 297 141z" />
+<glyph unicode="&#x20bd;" d="M428 1200h350q67 0 120 -13t86 -31t57 -49.5t35 -56.5t17 -64.5t6.5 -60.5t0.5 -57v-16.5v-16.5q0 -36 -0.5 -57t-6.5 -61t-17 -65t-35 -57t-57 -50.5t-86 -31.5t-120 -13h-178l-2 -100h288q10 0 13 -6t-3 -14l-120 -160q-6 -8 -18 -14t-22 -6h-138v-175q0 -11 -5.5 -18 t-15.5 -7h-149q-10 0 -17.5 7.5t-7.5 17.5v175h-267q-10 0 -13 6t3 14l120 160q6 8 18 14t22 6h117v100h-267q-10 0 -13 6t3 14l120 160q6 8 18 14t22 6h117v475q0 10 7.5 17.5t17.5 7.5zM600 1000v-300h203q64 0 86.5 33t22.5 119q0 84 -22.5 116t-86.5 32h-203z" />
+<glyph unicode="&#x2212;" d="M250 700h800q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#x231b;" d="M1000 1200v-150q0 -21 -14.5 -35.5t-35.5 -14.5h-50v-100q0 -91 -49.5 -165.5t-130.5 -109.5q81 -35 130.5 -109.5t49.5 -165.5v-150h50q21 0 35.5 -14.5t14.5 -35.5v-150h-800v150q0 21 14.5 35.5t35.5 14.5h50v150q0 91 49.5 165.5t130.5 109.5q-81 35 -130.5 109.5 t-49.5 165.5v100h-50q-21 0 -35.5 14.5t-14.5 35.5v150h800zM400 1000v-100q0 -60 32.5 -109.5t87.5 -73.5q28 -12 44 -37t16 -55t-16 -55t-44 -37q-55 -24 -87.5 -73.5t-32.5 -109.5v-150h400v150q0 60 -32.5 109.5t-87.5 73.5q-28 12 -44 37t-16 55t16 55t44 37 q55 24 87.5 73.5t32.5 109.5v100h-400z" />
+<glyph unicode="&#x25fc;" horiz-adv-x="500" d="M0 0z" />
+<glyph unicode="&#x2601;" d="M503 1089q110 0 200.5 -59.5t134.5 -156.5q44 14 90 14q120 0 205 -86.5t85 -206.5q0 -121 -85 -207.5t-205 -86.5h-750q-79 0 -135.5 57t-56.5 137q0 69 42.5 122.5t108.5 67.5q-2 12 -2 37q0 153 108 260.5t260 107.5z" />
+<glyph unicode="&#x26fa;" d="M774 1193.5q16 -9.5 20.5 -27t-5.5 -33.5l-136 -187l467 -746h30q20 0 35 -18.5t15 -39.5v-42h-1200v42q0 21 15 39.5t35 18.5h30l468 746l-135 183q-10 16 -5.5 34t20.5 28t34 5.5t28 -20.5l111 -148l112 150q9 16 27 20.5t34 -5zM600 200h377l-182 112l-195 534v-646z " />
+<glyph unicode="&#x2709;" d="M25 1100h1150q10 0 12.5 -5t-5.5 -13l-564 -567q-8 -8 -18 -8t-18 8l-564 567q-8 8 -5.5 13t12.5 5zM18 882l264 -264q8 -8 8 -18t-8 -18l-264 -264q-8 -8 -13 -5.5t-5 12.5v550q0 10 5 12.5t13 -5.5zM918 618l264 264q8 8 13 5.5t5 -12.5v-550q0 -10 -5 -12.5t-13 5.5 l-264 264q-8 8 -8 18t8 18zM818 482l364 -364q8 -8 5.5 -13t-12.5 -5h-1150q-10 0 -12.5 5t5.5 13l364 364q8 8 18 8t18 -8l164 -164q8 -8 18 -8t18 8l164 164q8 8 18 8t18 -8z" />
+<glyph unicode="&#x270f;" d="M1011 1210q19 0 33 -13l153 -153q13 -14 13 -33t-13 -33l-99 -92l-214 214l95 96q13 14 32 14zM1013 800l-615 -614l-214 214l614 614zM317 96l-333 -112l110 335z" />
+<glyph unicode="&#xe001;" d="M700 650v-550h250q21 0 35.5 -14.5t14.5 -35.5v-50h-800v50q0 21 14.5 35.5t35.5 14.5h250v550l-500 550h1200z" />
+<glyph unicode="&#xe002;" d="M368 1017l645 163q39 15 63 0t24 -49v-831q0 -55 -41.5 -95.5t-111.5 -63.5q-79 -25 -147 -4.5t-86 75t25.5 111.5t122.5 82q72 24 138 8v521l-600 -155v-606q0 -42 -44 -90t-109 -69q-79 -26 -147 -5.5t-86 75.5t25.5 111.5t122.5 82.5q72 24 138 7v639q0 38 14.5 59 t53.5 34z" />
+<glyph unicode="&#xe003;" d="M500 1191q100 0 191 -39t156.5 -104.5t104.5 -156.5t39 -191l-1 -2l1 -5q0 -141 -78 -262l275 -274q23 -26 22.5 -44.5t-22.5 -42.5l-59 -58q-26 -20 -46.5 -20t-39.5 20l-275 274q-119 -77 -261 -77l-5 1l-2 -1q-100 0 -191 39t-156.5 104.5t-104.5 156.5t-39 191 t39 191t104.5 156.5t156.5 104.5t191 39zM500 1022q-88 0 -162 -43t-117 -117t-43 -162t43 -162t117 -117t162 -43t162 43t117 117t43 162t-43 162t-117 117t-162 43z" />
+<glyph unicode="&#xe005;" d="M649 949q48 68 109.5 104t121.5 38.5t118.5 -20t102.5 -64t71 -100.5t27 -123q0 -57 -33.5 -117.5t-94 -124.5t-126.5 -127.5t-150 -152.5t-146 -174q-62 85 -145.5 174t-150 152.5t-126.5 127.5t-93.5 124.5t-33.5 117.5q0 64 28 123t73 100.5t104 64t119 20 t120.5 -38.5t104.5 -104z" />
+<glyph unicode="&#xe006;" d="M407 800l131 353q7 19 17.5 19t17.5 -19l129 -353h421q21 0 24 -8.5t-14 -20.5l-342 -249l130 -401q7 -20 -0.5 -25.5t-24.5 6.5l-343 246l-342 -247q-17 -12 -24.5 -6.5t-0.5 25.5l130 400l-347 251q-17 12 -14 20.5t23 8.5h429z" />
+<glyph unicode="&#xe007;" d="M407 800l131 353q7 19 17.5 19t17.5 -19l129 -353h421q21 0 24 -8.5t-14 -20.5l-342 -249l130 -401q7 -20 -0.5 -25.5t-24.5 6.5l-343 246l-342 -247q-17 -12 -24.5 -6.5t-0.5 25.5l130 400l-347 251q-17 12 -14 20.5t23 8.5h429zM477 700h-240l197 -142l-74 -226 l193 139l195 -140l-74 229l192 140h-234l-78 211z" />
+<glyph unicode="&#xe008;" d="M600 1200q124 0 212 -88t88 -212v-250q0 -46 -31 -98t-69 -52v-75q0 -10 6 -21.5t15 -17.5l358 -230q9 -5 15 -16.5t6 -21.5v-93q0 -10 -7.5 -17.5t-17.5 -7.5h-1150q-10 0 -17.5 7.5t-7.5 17.5v93q0 10 6 21.5t15 16.5l358 230q9 6 15 17.5t6 21.5v75q-38 0 -69 52 t-31 98v250q0 124 88 212t212 88z" />
+<glyph unicode="&#xe009;" d="M25 1100h1150q10 0 17.5 -7.5t7.5 -17.5v-1050q0 -10 -7.5 -17.5t-17.5 -7.5h-1150q-10 0 -17.5 7.5t-7.5 17.5v1050q0 10 7.5 17.5t17.5 7.5zM100 1000v-100h100v100h-100zM875 1000h-550q-10 0 -17.5 -7.5t-7.5 -17.5v-350q0 -10 7.5 -17.5t17.5 -7.5h550 q10 0 17.5 7.5t7.5 17.5v350q0 10 -7.5 17.5t-17.5 7.5zM1000 1000v-100h100v100h-100zM100 800v-100h100v100h-100zM1000 800v-100h100v100h-100zM100 600v-100h100v100h-100zM1000 600v-100h100v100h-100zM875 500h-550q-10 0 -17.5 -7.5t-7.5 -17.5v-350q0 -10 7.5 -17.5 t17.5 -7.5h550q10 0 17.5 7.5t7.5 17.5v350q0 10 -7.5 17.5t-17.5 7.5zM100 400v-100h100v100h-100zM1000 400v-100h100v100h-100zM100 200v-100h100v100h-100zM1000 200v-100h100v100h-100z" />
+<glyph unicode="&#xe010;" d="M50 1100h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM650 1100h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400 q0 21 14.5 35.5t35.5 14.5zM50 500h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM650 500h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400 q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe011;" d="M50 1100h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM450 1100h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200 q0 21 14.5 35.5t35.5 14.5zM850 1100h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM50 700h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200 q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM450 700h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM850 700h200q21 0 35.5 -14.5t14.5 -35.5v-200 q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM50 300h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM450 300h200 q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM850 300h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5 t35.5 14.5z" />
+<glyph unicode="&#xe012;" d="M50 1100h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM450 1100h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5v200 q0 21 14.5 35.5t35.5 14.5zM50 700h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM450 700h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700 q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM50 300h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5zM450 300h700q21 0 35.5 -14.5t14.5 -35.5v-200 q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe013;" d="M465 477l571 571q8 8 18 8t17 -8l177 -177q8 -7 8 -17t-8 -18l-783 -784q-7 -8 -17.5 -8t-17.5 8l-384 384q-8 8 -8 18t8 17l177 177q7 8 17 8t18 -8l171 -171q7 -7 18 -7t18 7z" />
+<glyph unicode="&#xe014;" d="M904 1083l178 -179q8 -8 8 -18.5t-8 -17.5l-267 -268l267 -268q8 -7 8 -17.5t-8 -18.5l-178 -178q-8 -8 -18.5 -8t-17.5 8l-268 267l-268 -267q-7 -8 -17.5 -8t-18.5 8l-178 178q-8 8 -8 18.5t8 17.5l267 268l-267 268q-8 7 -8 17.5t8 18.5l178 178q8 8 18.5 8t17.5 -8 l268 -267l268 268q7 7 17.5 7t18.5 -7z" />
+<glyph unicode="&#xe015;" d="M507 1177q98 0 187.5 -38.5t154.5 -103.5t103.5 -154.5t38.5 -187.5q0 -141 -78 -262l300 -299q8 -8 8 -18.5t-8 -18.5l-109 -108q-7 -8 -17.5 -8t-18.5 8l-300 299q-119 -77 -261 -77q-98 0 -188 38.5t-154.5 103t-103 154.5t-38.5 188t38.5 187.5t103 154.5 t154.5 103.5t188 38.5zM506.5 1023q-89.5 0 -165.5 -44t-120 -120.5t-44 -166t44 -165.5t120 -120t165.5 -44t166 44t120.5 120t44 165.5t-44 166t-120.5 120.5t-166 44zM425 900h150q10 0 17.5 -7.5t7.5 -17.5v-75h75q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5 t-17.5 -7.5h-75v-75q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v75h-75q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5h75v75q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe016;" d="M507 1177q98 0 187.5 -38.5t154.5 -103.5t103.5 -154.5t38.5 -187.5q0 -141 -78 -262l300 -299q8 -8 8 -18.5t-8 -18.5l-109 -108q-7 -8 -17.5 -8t-18.5 8l-300 299q-119 -77 -261 -77q-98 0 -188 38.5t-154.5 103t-103 154.5t-38.5 188t38.5 187.5t103 154.5 t154.5 103.5t188 38.5zM506.5 1023q-89.5 0 -165.5 -44t-120 -120.5t-44 -166t44 -165.5t120 -120t165.5 -44t166 44t120.5 120t44 165.5t-44 166t-120.5 120.5t-166 44zM325 800h350q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-350q-10 0 -17.5 7.5 t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe017;" d="M550 1200h100q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM800 975v166q167 -62 272 -209.5t105 -331.5q0 -117 -45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5 t-184.5 123t-123 184.5t-45.5 224q0 184 105 331.5t272 209.5v-166q-103 -55 -165 -155t-62 -220q0 -116 57 -214.5t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5q0 120 -62 220t-165 155z" />
+<glyph unicode="&#xe018;" d="M1025 1200h150q10 0 17.5 -7.5t7.5 -17.5v-1150q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v1150q0 10 7.5 17.5t17.5 7.5zM725 800h150q10 0 17.5 -7.5t7.5 -17.5v-750q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v750 q0 10 7.5 17.5t17.5 7.5zM425 500h150q10 0 17.5 -7.5t7.5 -17.5v-450q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v450q0 10 7.5 17.5t17.5 7.5zM125 300h150q10 0 17.5 -7.5t7.5 -17.5v-250q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5 v250q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe019;" d="M600 1174q33 0 74 -5l38 -152l5 -1q49 -14 94 -39l5 -2l134 80q61 -48 104 -105l-80 -134l3 -5q25 -44 39 -93l1 -6l152 -38q5 -43 5 -73q0 -34 -5 -74l-152 -38l-1 -6q-15 -49 -39 -93l-3 -5l80 -134q-48 -61 -104 -105l-134 81l-5 -3q-44 -25 -94 -39l-5 -2l-38 -151 q-43 -5 -74 -5q-33 0 -74 5l-38 151l-5 2q-49 14 -94 39l-5 3l-134 -81q-60 48 -104 105l80 134l-3 5q-25 45 -38 93l-2 6l-151 38q-6 42 -6 74q0 33 6 73l151 38l2 6q13 48 38 93l3 5l-80 134q47 61 105 105l133 -80l5 2q45 25 94 39l5 1l38 152q43 5 74 5zM600 815 q-89 0 -152 -63t-63 -151.5t63 -151.5t152 -63t152 63t63 151.5t-63 151.5t-152 63z" />
+<glyph unicode="&#xe020;" d="M500 1300h300q41 0 70.5 -29.5t29.5 -70.5v-100h275q10 0 17.5 -7.5t7.5 -17.5v-75h-1100v75q0 10 7.5 17.5t17.5 7.5h275v100q0 41 29.5 70.5t70.5 29.5zM500 1200v-100h300v100h-300zM1100 900v-800q0 -41 -29.5 -70.5t-70.5 -29.5h-700q-41 0 -70.5 29.5t-29.5 70.5 v800h900zM300 800v-700h100v700h-100zM500 800v-700h100v700h-100zM700 800v-700h100v700h-100zM900 800v-700h100v700h-100z" />
+<glyph unicode="&#xe021;" d="M18 618l620 608q8 7 18.5 7t17.5 -7l608 -608q8 -8 5.5 -13t-12.5 -5h-175v-575q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v375h-300v-375q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v575h-175q-10 0 -12.5 5t5.5 13z" />
+<glyph unicode="&#xe022;" d="M600 1200v-400q0 -41 29.5 -70.5t70.5 -29.5h300v-650q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v1100q0 21 14.5 35.5t35.5 14.5h450zM1000 800h-250q-21 0 -35.5 14.5t-14.5 35.5v250z" />
+<glyph unicode="&#xe023;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5t-57 214.5t-155.5 155.5t-214.5 57zM525 900h50q10 0 17.5 -7.5t7.5 -17.5v-275h175q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v350q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe024;" d="M1300 0h-538l-41 400h-242l-41 -400h-538l431 1200h209l-21 -300h162l-20 300h208zM515 800l-27 -300h224l-27 300h-170z" />
+<glyph unicode="&#xe025;" d="M550 1200h200q21 0 35.5 -14.5t14.5 -35.5v-450h191q20 0 25.5 -11.5t-7.5 -27.5l-327 -400q-13 -16 -32 -16t-32 16l-327 400q-13 16 -7.5 27.5t25.5 11.5h191v450q0 21 14.5 35.5t35.5 14.5zM1125 400h50q10 0 17.5 -7.5t7.5 -17.5v-350q0 -10 -7.5 -17.5t-17.5 -7.5 h-1050q-10 0 -17.5 7.5t-7.5 17.5v350q0 10 7.5 17.5t17.5 7.5h50q10 0 17.5 -7.5t7.5 -17.5v-175h900v175q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe026;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5t-57 214.5t-155.5 155.5t-214.5 57zM525 900h150q10 0 17.5 -7.5t7.5 -17.5v-275h137q21 0 26 -11.5t-8 -27.5l-223 -275q-13 -16 -32 -16t-32 16l-223 275q-13 16 -8 27.5t26 11.5h137v275q0 10 7.5 17.5t17.5 7.5z " />
+<glyph unicode="&#xe027;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5t-57 214.5t-155.5 155.5t-214.5 57zM632 914l223 -275q13 -16 8 -27.5t-26 -11.5h-137v-275q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v275h-137q-21 0 -26 11.5t8 27.5l223 275q13 16 32 16 t32 -16z" />
+<glyph unicode="&#xe028;" d="M225 1200h750q10 0 19.5 -7t12.5 -17l186 -652q7 -24 7 -49v-425q0 -12 -4 -27t-9 -17q-12 -6 -37 -6h-1100q-12 0 -27 4t-17 8q-6 13 -6 38l1 425q0 25 7 49l185 652q3 10 12.5 17t19.5 7zM878 1000h-556q-10 0 -19 -7t-11 -18l-87 -450q-2 -11 4 -18t16 -7h150 q10 0 19.5 -7t11.5 -17l38 -152q2 -10 11.5 -17t19.5 -7h250q10 0 19.5 7t11.5 17l38 152q2 10 11.5 17t19.5 7h150q10 0 16 7t4 18l-87 450q-2 11 -11 18t-19 7z" />
+<glyph unicode="&#xe029;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5t-57 214.5t-155.5 155.5t-214.5 57zM540 820l253 -190q17 -12 17 -30t-17 -30l-253 -190q-16 -12 -28 -6.5t-12 26.5v400q0 21 12 26.5t28 -6.5z" />
+<glyph unicode="&#xe030;" d="M947 1060l135 135q7 7 12.5 5t5.5 -13v-362q0 -10 -7.5 -17.5t-17.5 -7.5h-362q-11 0 -13 5.5t5 12.5l133 133q-109 76 -238 76q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5h150q0 -117 -45.5 -224 t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5q192 0 347 -117z" />
+<glyph unicode="&#xe031;" d="M947 1060l135 135q7 7 12.5 5t5.5 -13v-361q0 -11 -7.5 -18.5t-18.5 -7.5h-361q-11 0 -13 5.5t5 12.5l134 134q-110 75 -239 75q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5h-150q0 117 45.5 224t123 184.5t184.5 123t224 45.5q192 0 347 -117zM1027 600h150 q0 -117 -45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5q-192 0 -348 118l-134 -134q-7 -8 -12.5 -5.5t-5.5 12.5v360q0 11 7.5 18.5t18.5 7.5h360q10 0 12.5 -5.5t-5.5 -12.5l-133 -133q110 -76 240 -76q116 0 214.5 57t155.5 155.5t57 214.5z" />
+<glyph unicode="&#xe032;" d="M125 1200h1050q10 0 17.5 -7.5t7.5 -17.5v-1150q0 -10 -7.5 -17.5t-17.5 -7.5h-1050q-10 0 -17.5 7.5t-7.5 17.5v1150q0 10 7.5 17.5t17.5 7.5zM1075 1000h-850q-10 0 -17.5 -7.5t-7.5 -17.5v-850q0 -10 7.5 -17.5t17.5 -7.5h850q10 0 17.5 7.5t7.5 17.5v850 q0 10 -7.5 17.5t-17.5 7.5zM325 900h50q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-50q-10 0 -17.5 7.5t-7.5 17.5v50q0 10 7.5 17.5t17.5 7.5zM525 900h450q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-450q-10 0 -17.5 7.5t-7.5 17.5v50 q0 10 7.5 17.5t17.5 7.5zM325 700h50q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-50q-10 0 -17.5 7.5t-7.5 17.5v50q0 10 7.5 17.5t17.5 7.5zM525 700h450q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-450q-10 0 -17.5 7.5t-7.5 17.5v50 q0 10 7.5 17.5t17.5 7.5zM325 500h50q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-50q-10 0 -17.5 7.5t-7.5 17.5v50q0 10 7.5 17.5t17.5 7.5zM525 500h450q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-450q-10 0 -17.5 7.5t-7.5 17.5v50 q0 10 7.5 17.5t17.5 7.5zM325 300h50q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-50q-10 0 -17.5 7.5t-7.5 17.5v50q0 10 7.5 17.5t17.5 7.5zM525 300h450q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-450q-10 0 -17.5 7.5t-7.5 17.5v50 q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe033;" d="M900 800v200q0 83 -58.5 141.5t-141.5 58.5h-300q-82 0 -141 -59t-59 -141v-200h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-600q0 -41 29.5 -70.5t70.5 -29.5h900q41 0 70.5 29.5t29.5 70.5v600q0 41 -29.5 70.5t-70.5 29.5h-100zM400 800v150q0 21 15 35.5t35 14.5h200 q20 0 35 -14.5t15 -35.5v-150h-300z" />
+<glyph unicode="&#xe034;" d="M125 1100h50q10 0 17.5 -7.5t7.5 -17.5v-1075h-100v1075q0 10 7.5 17.5t17.5 7.5zM1075 1052q4 0 9 -2q16 -6 16 -23v-421q0 -6 -3 -12q-33 -59 -66.5 -99t-65.5 -58t-56.5 -24.5t-52.5 -6.5q-26 0 -57.5 6.5t-52.5 13.5t-60 21q-41 15 -63 22.5t-57.5 15t-65.5 7.5 q-85 0 -160 -57q-7 -5 -15 -5q-6 0 -11 3q-14 7 -14 22v438q22 55 82 98.5t119 46.5q23 2 43 0.5t43 -7t32.5 -8.5t38 -13t32.5 -11q41 -14 63.5 -21t57 -14t63.5 -7q103 0 183 87q7 8 18 8z" />
+<glyph unicode="&#xe035;" d="M600 1175q116 0 227 -49.5t192.5 -131t131 -192.5t49.5 -227v-300q0 -10 -7.5 -17.5t-17.5 -7.5h-50q-10 0 -17.5 7.5t-7.5 17.5v300q0 127 -70.5 231.5t-184.5 161.5t-245 57t-245 -57t-184.5 -161.5t-70.5 -231.5v-300q0 -10 -7.5 -17.5t-17.5 -7.5h-50 q-10 0 -17.5 7.5t-7.5 17.5v300q0 116 49.5 227t131 192.5t192.5 131t227 49.5zM220 500h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14v460q0 8 6 14t14 6zM820 500h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14v460 q0 8 6 14t14 6z" />
+<glyph unicode="&#xe036;" d="M321 814l258 172q9 6 15 2.5t6 -13.5v-750q0 -10 -6 -13.5t-15 2.5l-258 172q-21 14 -46 14h-250q-10 0 -17.5 7.5t-7.5 17.5v350q0 10 7.5 17.5t17.5 7.5h250q25 0 46 14zM900 668l120 120q7 7 17 7t17 -7l34 -34q7 -7 7 -17t-7 -17l-120 -120l120 -120q7 -7 7 -17 t-7 -17l-34 -34q-7 -7 -17 -7t-17 7l-120 119l-120 -119q-7 -7 -17 -7t-17 7l-34 34q-7 7 -7 17t7 17l119 120l-119 120q-7 7 -7 17t7 17l34 34q7 8 17 8t17 -8z" />
+<glyph unicode="&#xe037;" d="M321 814l258 172q9 6 15 2.5t6 -13.5v-750q0 -10 -6 -13.5t-15 2.5l-258 172q-21 14 -46 14h-250q-10 0 -17.5 7.5t-7.5 17.5v350q0 10 7.5 17.5t17.5 7.5h250q25 0 46 14zM766 900h4q10 -1 16 -10q96 -129 96 -290q0 -154 -90 -281q-6 -9 -17 -10l-3 -1q-9 0 -16 6 l-29 23q-7 7 -8.5 16.5t4.5 17.5q72 103 72 229q0 132 -78 238q-6 8 -4.5 18t9.5 17l29 22q7 5 15 5z" />
+<glyph unicode="&#xe038;" d="M967 1004h3q11 -1 17 -10q135 -179 135 -396q0 -105 -34 -206.5t-98 -185.5q-7 -9 -17 -10h-3q-9 0 -16 6l-42 34q-8 6 -9 16t5 18q111 150 111 328q0 90 -29.5 176t-84.5 157q-6 9 -5 19t10 16l42 33q7 5 15 5zM321 814l258 172q9 6 15 2.5t6 -13.5v-750q0 -10 -6 -13.5 t-15 2.5l-258 172q-21 14 -46 14h-250q-10 0 -17.5 7.5t-7.5 17.5v350q0 10 7.5 17.5t17.5 7.5h250q25 0 46 14zM766 900h4q10 -1 16 -10q96 -129 96 -290q0 -154 -90 -281q-6 -9 -17 -10l-3 -1q-9 0 -16 6l-29 23q-7 7 -8.5 16.5t4.5 17.5q72 103 72 229q0 132 -78 238 q-6 8 -4.5 18.5t9.5 16.5l29 22q7 5 15 5z" />
+<glyph unicode="&#xe039;" d="M500 900h100v-100h-100v-100h-400v-100h-100v600h500v-300zM1200 700h-200v-100h200v-200h-300v300h-200v300h-100v200h600v-500zM100 1100v-300h300v300h-300zM800 1100v-300h300v300h-300zM300 900h-100v100h100v-100zM1000 900h-100v100h100v-100zM300 500h200v-500 h-500v500h200v100h100v-100zM800 300h200v-100h-100v-100h-200v100h-100v100h100v200h-200v100h300v-300zM100 400v-300h300v300h-300zM300 200h-100v100h100v-100zM1200 200h-100v100h100v-100zM700 0h-100v100h100v-100zM1200 0h-300v100h300v-100z" />
+<glyph unicode="&#xe040;" d="M100 200h-100v1000h100v-1000zM300 200h-100v1000h100v-1000zM700 200h-200v1000h200v-1000zM900 200h-100v1000h100v-1000zM1200 200h-200v1000h200v-1000zM400 0h-300v100h300v-100zM600 0h-100v91h100v-91zM800 0h-100v91h100v-91zM1100 0h-200v91h200v-91z" />
+<glyph unicode="&#xe041;" d="M500 1200l682 -682q8 -8 8 -18t-8 -18l-464 -464q-8 -8 -18 -8t-18 8l-682 682l1 475q0 10 7.5 17.5t17.5 7.5h474zM319.5 1024.5q-29.5 29.5 -71 29.5t-71 -29.5t-29.5 -71.5t29.5 -71.5t71 -29.5t71 29.5t29.5 71.5t-29.5 71.5z" />
+<glyph unicode="&#xe042;" d="M500 1200l682 -682q8 -8 8 -18t-8 -18l-464 -464q-8 -8 -18 -8t-18 8l-682 682l1 475q0 10 7.5 17.5t17.5 7.5h474zM800 1200l682 -682q8 -8 8 -18t-8 -18l-464 -464q-8 -8 -18 -8t-18 8l-56 56l424 426l-700 700h150zM319.5 1024.5q-29.5 29.5 -71 29.5t-71 -29.5 t-29.5 -71.5t29.5 -71.5t71 -29.5t71 29.5t29.5 71.5t-29.5 71.5z" />
+<glyph unicode="&#xe043;" d="M300 1200h825q75 0 75 -75v-900q0 -25 -18 -43l-64 -64q-8 -8 -13 -5.5t-5 12.5v950q0 10 -7.5 17.5t-17.5 7.5h-700q-25 0 -43 -18l-64 -64q-8 -8 -5.5 -13t12.5 -5h700q10 0 17.5 -7.5t7.5 -17.5v-950q0 -10 -7.5 -17.5t-17.5 -7.5h-850q-10 0 -17.5 7.5t-7.5 17.5v975 q0 25 18 43l139 139q18 18 43 18z" />
+<glyph unicode="&#xe044;" d="M250 1200h800q21 0 35.5 -14.5t14.5 -35.5v-1150l-450 444l-450 -445v1151q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe045;" d="M822 1200h-444q-11 0 -19 -7.5t-9 -17.5l-78 -301q-7 -24 7 -45l57 -108q6 -9 17.5 -15t21.5 -6h450q10 0 21.5 6t17.5 15l62 108q14 21 7 45l-83 301q-1 10 -9 17.5t-19 7.5zM1175 800h-150q-10 0 -21 -6.5t-15 -15.5l-78 -156q-4 -9 -15 -15.5t-21 -6.5h-550 q-10 0 -21 6.5t-15 15.5l-78 156q-4 9 -15 15.5t-21 6.5h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-650q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v150q0 10 7.5 17.5t17.5 7.5h750q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5 t7.5 17.5v650q0 10 -7.5 17.5t-17.5 7.5zM850 200h-500q-10 0 -19.5 -7t-11.5 -17l-38 -152q-2 -10 3.5 -17t15.5 -7h600q10 0 15.5 7t3.5 17l-38 152q-2 10 -11.5 17t-19.5 7z" />
+<glyph unicode="&#xe046;" d="M500 1100h200q56 0 102.5 -20.5t72.5 -50t44 -59t25 -50.5l6 -20h150q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5v600q0 41 29.5 70.5t70.5 29.5h150q2 8 6.5 21.5t24 48t45 61t72 48t102.5 21.5zM900 800v-100 h100v100h-100zM600 730q-95 0 -162.5 -67.5t-67.5 -162.5t67.5 -162.5t162.5 -67.5t162.5 67.5t67.5 162.5t-67.5 162.5t-162.5 67.5zM600 603q43 0 73 -30t30 -73t-30 -73t-73 -30t-73 30t-30 73t30 73t73 30z" />
+<glyph unicode="&#xe047;" d="M681 1199l385 -998q20 -50 60 -92q18 -19 36.5 -29.5t27.5 -11.5l10 -2v-66h-417v66q53 0 75 43.5t5 88.5l-82 222h-391q-58 -145 -92 -234q-11 -34 -6.5 -57t25.5 -37t46 -20t55 -6v-66h-365v66q56 24 84 52q12 12 25 30.5t20 31.5l7 13l399 1006h93zM416 521h340 l-162 457z" />
+<glyph unicode="&#xe048;" d="M753 641q5 -1 14.5 -4.5t36 -15.5t50.5 -26.5t53.5 -40t50.5 -54.5t35.5 -70t14.5 -87q0 -67 -27.5 -125.5t-71.5 -97.5t-98.5 -66.5t-108.5 -40.5t-102 -13h-500v89q41 7 70.5 32.5t29.5 65.5v827q0 24 -0.5 34t-3.5 24t-8.5 19.5t-17 13.5t-28 12.5t-42.5 11.5v71 l471 -1q57 0 115.5 -20.5t108 -57t80.5 -94t31 -124.5q0 -51 -15.5 -96.5t-38 -74.5t-45 -50.5t-38.5 -30.5zM400 700h139q78 0 130.5 48.5t52.5 122.5q0 41 -8.5 70.5t-29.5 55.5t-62.5 39.5t-103.5 13.5h-118v-350zM400 200h216q80 0 121 50.5t41 130.5q0 90 -62.5 154.5 t-156.5 64.5h-159v-400z" />
+<glyph unicode="&#xe049;" d="M877 1200l2 -57q-83 -19 -116 -45.5t-40 -66.5l-132 -839q-9 -49 13 -69t96 -26v-97h-500v97q186 16 200 98l173 832q3 17 3 30t-1.5 22.5t-9 17.5t-13.5 12.5t-21.5 10t-26 8.5t-33.5 10q-13 3 -19 5v57h425z" />
+<glyph unicode="&#xe050;" d="M1300 900h-50q0 21 -4 37t-9.5 26.5t-18 17.5t-22 11t-28.5 5.5t-31 2t-37 0.5h-200v-850q0 -22 25 -34.5t50 -13.5l25 -2v-100h-400v100q4 0 11 0.5t24 3t30 7t24 15t11 24.5v850h-200q-25 0 -37 -0.5t-31 -2t-28.5 -5.5t-22 -11t-18 -17.5t-9.5 -26.5t-4 -37h-50v300 h1000v-300zM175 1000h-75v-800h75l-125 -167l-125 167h75v800h-75l125 167z" />
+<glyph unicode="&#xe051;" d="M1100 900h-50q0 21 -4 37t-9.5 26.5t-18 17.5t-22 11t-28.5 5.5t-31 2t-37 0.5h-200v-650q0 -22 25 -34.5t50 -13.5l25 -2v-100h-400v100q4 0 11 0.5t24 3t30 7t24 15t11 24.5v650h-200q-25 0 -37 -0.5t-31 -2t-28.5 -5.5t-22 -11t-18 -17.5t-9.5 -26.5t-4 -37h-50v300 h1000v-300zM1167 50l-167 -125v75h-800v-75l-167 125l167 125v-75h800v75z" />
+<glyph unicode="&#xe052;" d="M50 1100h600q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-600q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 800h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5v100 q0 21 14.5 35.5t35.5 14.5zM50 500h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 200h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100 q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe053;" d="M250 1100h700q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 800h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v100 q0 21 14.5 35.5t35.5 14.5zM250 500h700q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 200h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100 q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe054;" d="M500 950v100q0 21 14.5 35.5t35.5 14.5h600q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-600q-21 0 -35.5 14.5t-14.5 35.5zM100 650v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000 q-21 0 -35.5 14.5t-14.5 35.5zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5zM0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100 q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5z" />
+<glyph unicode="&#xe055;" d="M50 1100h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 800h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v100 q0 21 14.5 35.5t35.5 14.5zM50 500h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 200h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100 q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe056;" d="M50 1100h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM350 1100h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v100 q0 21 14.5 35.5t35.5 14.5zM50 800h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM350 800h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-800 q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 500h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM350 500h800q21 0 35.5 -14.5t14.5 -35.5v-100 q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 200h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM350 200h800 q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe057;" d="M400 0h-100v1100h100v-1100zM550 1100h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM550 800h500q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-500 q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM267 550l-167 -125v75h-200v100h200v75zM550 500h300q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-300q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM550 200h600 q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-600q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe058;" d="M50 1100h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM900 0h-100v1100h100v-1100zM50 800h500q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-500 q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM1100 600h200v-100h-200v-75l-167 125l167 125v-75zM50 500h300q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-300q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5zM50 200h600 q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-600q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe059;" d="M75 1000h750q31 0 53 -22t22 -53v-650q0 -31 -22 -53t-53 -22h-750q-31 0 -53 22t-22 53v650q0 31 22 53t53 22zM1200 300l-300 300l300 300v-600z" />
+<glyph unicode="&#xe060;" d="M44 1100h1112q18 0 31 -13t13 -31v-1012q0 -18 -13 -31t-31 -13h-1112q-18 0 -31 13t-13 31v1012q0 18 13 31t31 13zM100 1000v-737l247 182l298 -131l-74 156l293 318l236 -288v500h-1000zM342 884q56 0 95 -39t39 -94.5t-39 -95t-95 -39.5t-95 39.5t-39 95t39 94.5 t95 39z" />
+<glyph unicode="&#xe062;" d="M648 1169q117 0 216 -60t156.5 -161t57.5 -218q0 -115 -70 -258q-69 -109 -158 -225.5t-143 -179.5l-54 -62q-9 8 -25.5 24.5t-63.5 67.5t-91 103t-98.5 128t-95.5 148q-60 132 -60 249q0 88 34 169.5t91.5 142t137 96.5t166.5 36zM652.5 974q-91.5 0 -156.5 -65 t-65 -157t65 -156.5t156.5 -64.5t156.5 64.5t65 156.5t-65 157t-156.5 65z" />
+<glyph unicode="&#xe063;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 173v854q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57z" />
+<glyph unicode="&#xe064;" d="M554 1295q21 -72 57.5 -143.5t76 -130t83 -118t82.5 -117t70 -116t49.5 -126t18.5 -136.5q0 -71 -25.5 -135t-68.5 -111t-99 -82t-118.5 -54t-125.5 -23q-84 5 -161.5 34t-139.5 78.5t-99 125t-37 164.5q0 69 18 136.5t49.5 126.5t69.5 116.5t81.5 117.5t83.5 119 t76.5 131t58.5 143zM344 710q-23 -33 -43.5 -70.5t-40.5 -102.5t-17 -123q1 -37 14.5 -69.5t30 -52t41 -37t38.5 -24.5t33 -15q21 -7 32 -1t13 22l6 34q2 10 -2.5 22t-13.5 19q-5 4 -14 12t-29.5 40.5t-32.5 73.5q-26 89 6 271q2 11 -6 11q-8 1 -15 -10z" />
+<glyph unicode="&#xe065;" d="M1000 1013l108 115q2 1 5 2t13 2t20.5 -1t25 -9.5t28.5 -21.5q22 -22 27 -43t0 -32l-6 -10l-108 -115zM350 1100h400q50 0 105 -13l-187 -187h-368q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v182l200 200v-332 q0 -165 -93.5 -257.5t-256.5 -92.5h-400q-165 0 -257.5 92.5t-92.5 257.5v400q0 165 92.5 257.5t257.5 92.5zM1009 803l-362 -362l-161 -50l55 170l355 355z" />
+<glyph unicode="&#xe066;" d="M350 1100h361q-164 -146 -216 -200h-195q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5l200 153v-103q0 -165 -92.5 -257.5t-257.5 -92.5h-400q-165 0 -257.5 92.5t-92.5 257.5v400q0 165 92.5 257.5t257.5 92.5z M824 1073l339 -301q8 -7 8 -17.5t-8 -17.5l-340 -306q-7 -6 -12.5 -4t-6.5 11v203q-26 1 -54.5 0t-78.5 -7.5t-92 -17.5t-86 -35t-70 -57q10 59 33 108t51.5 81.5t65 58.5t68.5 40.5t67 24.5t56 13.5t40 4.5v210q1 10 6.5 12.5t13.5 -4.5z" />
+<glyph unicode="&#xe067;" d="M350 1100h350q60 0 127 -23l-178 -177h-349q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v69l200 200v-219q0 -165 -92.5 -257.5t-257.5 -92.5h-400q-165 0 -257.5 92.5t-92.5 257.5v400q0 165 92.5 257.5t257.5 92.5z M643 639l395 395q7 7 17.5 7t17.5 -7l101 -101q7 -7 7 -17.5t-7 -17.5l-531 -532q-7 -7 -17.5 -7t-17.5 7l-248 248q-7 7 -7 17.5t7 17.5l101 101q7 7 17.5 7t17.5 -7l111 -111q8 -7 18 -7t18 7z" />
+<glyph unicode="&#xe068;" d="M318 918l264 264q8 8 18 8t18 -8l260 -264q7 -8 4.5 -13t-12.5 -5h-170v-200h200v173q0 10 5 12t13 -5l264 -260q8 -7 8 -17.5t-8 -17.5l-264 -265q-8 -7 -13 -5t-5 12v173h-200v-200h170q10 0 12.5 -5t-4.5 -13l-260 -264q-8 -8 -18 -8t-18 8l-264 264q-8 8 -5.5 13 t12.5 5h175v200h-200v-173q0 -10 -5 -12t-13 5l-264 265q-8 7 -8 17.5t8 17.5l264 260q8 7 13 5t5 -12v-173h200v200h-175q-10 0 -12.5 5t5.5 13z" />
+<glyph unicode="&#xe069;" d="M250 1100h100q21 0 35.5 -14.5t14.5 -35.5v-438l464 453q15 14 25.5 10t10.5 -25v-1000q0 -21 -10.5 -25t-25.5 10l-464 453v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v1000q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe070;" d="M50 1100h100q21 0 35.5 -14.5t14.5 -35.5v-438l464 453q15 14 25.5 10t10.5 -25v-438l464 453q15 14 25.5 10t10.5 -25v-1000q0 -21 -10.5 -25t-25.5 10l-464 453v-438q0 -21 -10.5 -25t-25.5 10l-464 453v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5 t-14.5 35.5v1000q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe071;" d="M1200 1050v-1000q0 -21 -10.5 -25t-25.5 10l-464 453v-438q0 -21 -10.5 -25t-25.5 10l-492 480q-15 14 -15 35t15 35l492 480q15 14 25.5 10t10.5 -25v-438l464 453q15 14 25.5 10t10.5 -25z" />
+<glyph unicode="&#xe072;" d="M243 1074l814 -498q18 -11 18 -26t-18 -26l-814 -498q-18 -11 -30.5 -4t-12.5 28v1000q0 21 12.5 28t30.5 -4z" />
+<glyph unicode="&#xe073;" d="M250 1000h200q21 0 35.5 -14.5t14.5 -35.5v-800q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v800q0 21 14.5 35.5t35.5 14.5zM650 1000h200q21 0 35.5 -14.5t14.5 -35.5v-800q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v800 q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe074;" d="M1100 950v-800q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v800q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5z" />
+<glyph unicode="&#xe075;" d="M500 612v438q0 21 10.5 25t25.5 -10l492 -480q15 -14 15 -35t-15 -35l-492 -480q-15 -14 -25.5 -10t-10.5 25v438l-464 -453q-15 -14 -25.5 -10t-10.5 25v1000q0 21 10.5 25t25.5 -10z" />
+<glyph unicode="&#xe076;" d="M1048 1102l100 1q20 0 35 -14.5t15 -35.5l5 -1000q0 -21 -14.5 -35.5t-35.5 -14.5l-100 -1q-21 0 -35.5 14.5t-14.5 35.5l-2 437l-463 -454q-14 -15 -24.5 -10.5t-10.5 25.5l-2 437l-462 -455q-15 -14 -25.5 -9.5t-10.5 24.5l-5 1000q0 21 10.5 25.5t25.5 -10.5l466 -450 l-2 438q0 20 10.5 24.5t25.5 -9.5l466 -451l-2 438q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe077;" d="M850 1100h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438l-464 -453q-15 -14 -25.5 -10t-10.5 25v1000q0 21 10.5 25t25.5 -10l464 -453v438q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe078;" d="M686 1081l501 -540q15 -15 10.5 -26t-26.5 -11h-1042q-22 0 -26.5 11t10.5 26l501 540q15 15 36 15t36 -15zM150 400h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe079;" d="M885 900l-352 -353l352 -353l-197 -198l-552 552l552 550z" />
+<glyph unicode="&#xe080;" d="M1064 547l-551 -551l-198 198l353 353l-353 353l198 198z" />
+<glyph unicode="&#xe081;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM650 900h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-150h-150 q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -21 14.5 -35.5t35.5 -14.5h150v-150q0 -21 14.5 -35.5t35.5 -14.5h100q21 0 35.5 14.5t14.5 35.5v150h150q21 0 35.5 14.5t14.5 35.5v100q0 21 -14.5 35.5t-35.5 14.5h-150v150q0 21 -14.5 35.5t-35.5 14.5z" />
+<glyph unicode="&#xe082;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM850 700h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -21 14.5 -35.5 t35.5 -14.5h500q21 0 35.5 14.5t14.5 35.5v100q0 21 -14.5 35.5t-35.5 14.5z" />
+<glyph unicode="&#xe083;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM741.5 913q-12.5 0 -21.5 -9l-120 -120l-120 120q-9 9 -21.5 9 t-21.5 -9l-141 -141q-9 -9 -9 -21.5t9 -21.5l120 -120l-120 -120q-9 -9 -9 -21.5t9 -21.5l141 -141q9 -9 21.5 -9t21.5 9l120 120l120 -120q9 -9 21.5 -9t21.5 9l141 141q9 9 9 21.5t-9 21.5l-120 120l120 120q9 9 9 21.5t-9 21.5l-141 141q-9 9 -21.5 9z" />
+<glyph unicode="&#xe084;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM546 623l-84 85q-7 7 -17.5 7t-18.5 -7l-139 -139q-7 -8 -7 -18t7 -18 l242 -241q7 -8 17.5 -8t17.5 8l375 375q7 7 7 17.5t-7 18.5l-139 139q-7 7 -17.5 7t-17.5 -7z" />
+<glyph unicode="&#xe085;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM588 941q-29 0 -59 -5.5t-63 -20.5t-58 -38.5t-41.5 -63t-16.5 -89.5 q0 -25 20 -25h131q30 -5 35 11q6 20 20.5 28t45.5 8q20 0 31.5 -10.5t11.5 -28.5q0 -23 -7 -34t-26 -18q-1 0 -13.5 -4t-19.5 -7.5t-20 -10.5t-22 -17t-18.5 -24t-15.5 -35t-8 -46q-1 -8 5.5 -16.5t20.5 -8.5h173q7 0 22 8t35 28t37.5 48t29.5 74t12 100q0 47 -17 83 t-42.5 57t-59.5 34.5t-64 18t-59 4.5zM675 400h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-150q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v150q0 10 -7.5 17.5t-17.5 7.5z" />
+<glyph unicode="&#xe086;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM675 1000h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-150q0 -10 7.5 -17.5 t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v150q0 10 -7.5 17.5t-17.5 7.5zM675 700h-250q-10 0 -17.5 -7.5t-7.5 -17.5v-50q0 -10 7.5 -17.5t17.5 -7.5h75v-200h-75q-10 0 -17.5 -7.5t-7.5 -17.5v-50q0 -10 7.5 -17.5t17.5 -7.5h350q10 0 17.5 7.5t7.5 17.5v50q0 10 -7.5 17.5 t-17.5 7.5h-75v275q0 10 -7.5 17.5t-17.5 7.5z" />
+<glyph unicode="&#xe087;" d="M525 1200h150q10 0 17.5 -7.5t7.5 -17.5v-194q103 -27 178.5 -102.5t102.5 -178.5h194q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-194q-27 -103 -102.5 -178.5t-178.5 -102.5v-194q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v194 q-103 27 -178.5 102.5t-102.5 178.5h-194q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5h194q27 103 102.5 178.5t178.5 102.5v194q0 10 7.5 17.5t17.5 7.5zM700 893v-168q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v168q-68 -23 -119 -74 t-74 -119h168q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-168q23 -68 74 -119t119 -74v168q0 10 7.5 17.5t17.5 7.5h150q10 0 17.5 -7.5t7.5 -17.5v-168q68 23 119 74t74 119h-168q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5h168 q-23 68 -74 119t-119 74z" />
+<glyph unicode="&#xe088;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5t-57 214.5t-155.5 155.5t-214.5 57zM759 823l64 -64q7 -7 7 -17.5t-7 -17.5l-124 -124l124 -124q7 -7 7 -17.5t-7 -17.5l-64 -64q-7 -7 -17.5 -7t-17.5 7l-124 124l-124 -124q-7 -7 -17.5 -7t-17.5 7l-64 64 q-7 7 -7 17.5t7 17.5l124 124l-124 124q-7 7 -7 17.5t7 17.5l64 64q7 7 17.5 7t17.5 -7l124 -124l124 124q7 7 17.5 7t17.5 -7z" />
+<glyph unicode="&#xe089;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5t-57 214.5t-155.5 155.5t-214.5 57zM782 788l106 -106q7 -7 7 -17.5t-7 -17.5l-320 -321q-8 -7 -18 -7t-18 7l-202 203q-8 7 -8 17.5t8 17.5l106 106q7 8 17.5 8t17.5 -8l79 -79l197 197q7 7 17.5 7t17.5 -7z" />
+<glyph unicode="&#xe090;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5q0 -120 65 -225 l587 587q-105 65 -225 65zM965 819l-584 -584q104 -62 219 -62q116 0 214.5 57t155.5 155.5t57 214.5q0 115 -62 219z" />
+<glyph unicode="&#xe091;" d="M39 582l522 427q16 13 27.5 8t11.5 -26v-291h550q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-550v-291q0 -21 -11.5 -26t-27.5 8l-522 427q-16 13 -16 32t16 32z" />
+<glyph unicode="&#xe092;" d="M639 1009l522 -427q16 -13 16 -32t-16 -32l-522 -427q-16 -13 -27.5 -8t-11.5 26v291h-550q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h550v291q0 21 11.5 26t27.5 -8z" />
+<glyph unicode="&#xe093;" d="M682 1161l427 -522q13 -16 8 -27.5t-26 -11.5h-291v-550q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v550h-291q-21 0 -26 11.5t8 27.5l427 522q13 16 32 16t32 -16z" />
+<glyph unicode="&#xe094;" d="M550 1200h200q21 0 35.5 -14.5t14.5 -35.5v-550h291q21 0 26 -11.5t-8 -27.5l-427 -522q-13 -16 -32 -16t-32 16l-427 522q-13 16 -8 27.5t26 11.5h291v550q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe095;" d="M639 1109l522 -427q16 -13 16 -32t-16 -32l-522 -427q-16 -13 -27.5 -8t-11.5 26v291q-94 -2 -182 -20t-170.5 -52t-147 -92.5t-100.5 -135.5q5 105 27 193.5t67.5 167t113 135t167 91.5t225.5 42v262q0 21 11.5 26t27.5 -8z" />
+<glyph unicode="&#xe096;" d="M850 1200h300q21 0 35.5 -14.5t14.5 -35.5v-300q0 -21 -10.5 -25t-24.5 10l-94 94l-249 -249q-8 -7 -18 -7t-18 7l-106 106q-7 8 -7 18t7 18l249 249l-94 94q-14 14 -10 24.5t25 10.5zM350 0h-300q-21 0 -35.5 14.5t-14.5 35.5v300q0 21 10.5 25t24.5 -10l94 -94l249 249 q8 7 18 7t18 -7l106 -106q7 -8 7 -18t-7 -18l-249 -249l94 -94q14 -14 10 -24.5t-25 -10.5z" />
+<glyph unicode="&#xe097;" d="M1014 1120l106 -106q7 -8 7 -18t-7 -18l-249 -249l94 -94q14 -14 10 -24.5t-25 -10.5h-300q-21 0 -35.5 14.5t-14.5 35.5v300q0 21 10.5 25t24.5 -10l94 -94l249 249q8 7 18 7t18 -7zM250 600h300q21 0 35.5 -14.5t14.5 -35.5v-300q0 -21 -10.5 -25t-24.5 10l-94 94 l-249 -249q-8 -7 -18 -7t-18 7l-106 106q-7 8 -7 18t7 18l249 249l-94 94q-14 14 -10 24.5t25 10.5z" />
+<glyph unicode="&#xe101;" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM704 900h-208q-20 0 -32 -14.5t-8 -34.5l58 -302q4 -20 21.5 -34.5 t37.5 -14.5h54q20 0 37.5 14.5t21.5 34.5l58 302q4 20 -8 34.5t-32 14.5zM675 400h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-150q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v150q0 10 -7.5 17.5t-17.5 7.5z" />
+<glyph unicode="&#xe102;" d="M260 1200q9 0 19 -2t15 -4l5 -2q22 -10 44 -23l196 -118q21 -13 36 -24q29 -21 37 -12q11 13 49 35l196 118q22 13 45 23q17 7 38 7q23 0 47 -16.5t37 -33.5l13 -16q14 -21 18 -45l25 -123l8 -44q1 -9 8.5 -14.5t17.5 -5.5h61q10 0 17.5 -7.5t7.5 -17.5v-50 q0 -10 -7.5 -17.5t-17.5 -7.5h-50q-10 0 -17.5 -7.5t-7.5 -17.5v-175h-400v300h-200v-300h-400v175q0 10 -7.5 17.5t-17.5 7.5h-50q-10 0 -17.5 7.5t-7.5 17.5v50q0 10 7.5 17.5t17.5 7.5h61q11 0 18 3t7 8q0 4 9 52l25 128q5 25 19 45q2 3 5 7t13.5 15t21.5 19.5t26.5 15.5 t29.5 7zM915 1079l-166 -162q-7 -7 -5 -12t12 -5h219q10 0 15 7t2 17l-51 149q-3 10 -11 12t-15 -6zM463 917l-177 157q-8 7 -16 5t-11 -12l-51 -143q-3 -10 2 -17t15 -7h231q11 0 12.5 5t-5.5 12zM500 0h-375q-10 0 -17.5 7.5t-7.5 17.5v375h400v-400zM1100 400v-375 q0 -10 -7.5 -17.5t-17.5 -7.5h-375v400h400z" />
+<glyph unicode="&#xe103;" d="M1165 1190q8 3 21 -6.5t13 -17.5q-2 -178 -24.5 -323.5t-55.5 -245.5t-87 -174.5t-102.5 -118.5t-118 -68.5t-118.5 -33t-120 -4.5t-105 9.5t-90 16.5q-61 12 -78 11q-4 1 -12.5 0t-34 -14.5t-52.5 -40.5l-153 -153q-26 -24 -37 -14.5t-11 43.5q0 64 42 102q8 8 50.5 45 t66.5 58q19 17 35 47t13 61q-9 55 -10 102.5t7 111t37 130t78 129.5q39 51 80 88t89.5 63.5t94.5 45t113.5 36t129 31t157.5 37t182 47.5zM1116 1098q-8 9 -22.5 -3t-45.5 -50q-38 -47 -119 -103.5t-142 -89.5l-62 -33q-56 -30 -102 -57t-104 -68t-102.5 -80.5t-85.5 -91 t-64 -104.5q-24 -56 -31 -86t2 -32t31.5 17.5t55.5 59.5q25 30 94 75.5t125.5 77.5t147.5 81q70 37 118.5 69t102 79.5t99 111t86.5 148.5q22 50 24 60t-6 19z" />
+<glyph unicode="&#xe104;" d="M653 1231q-39 -67 -54.5 -131t-10.5 -114.5t24.5 -96.5t47.5 -80t63.5 -62.5t68.5 -46.5t65 -30q-4 7 -17.5 35t-18.5 39.5t-17 39.5t-17 43t-13 42t-9.5 44.5t-2 42t4 43t13.5 39t23 38.5q96 -42 165 -107.5t105 -138t52 -156t13 -159t-19 -149.5q-13 -55 -44 -106.5 t-68 -87t-78.5 -64.5t-72.5 -45t-53 -22q-72 -22 -127 -11q-31 6 -13 19q6 3 17 7q13 5 32.5 21t41 44t38.5 63.5t21.5 81.5t-6.5 94.5t-50 107t-104 115.5q10 -104 -0.5 -189t-37 -140.5t-65 -93t-84 -52t-93.5 -11t-95 24.5q-80 36 -131.5 114t-53.5 171q-2 23 0 49.5 t4.5 52.5t13.5 56t27.5 60t46 64.5t69.5 68.5q-8 -53 -5 -102.5t17.5 -90t34 -68.5t44.5 -39t49 -2q31 13 38.5 36t-4.5 55t-29 64.5t-36 75t-26 75.5q-15 85 2 161.5t53.5 128.5t85.5 92.5t93.5 61t81.5 25.5z" />
+<glyph unicode="&#xe105;" d="M600 1094q82 0 160.5 -22.5t140 -59t116.5 -82.5t94.5 -95t68 -95t42.5 -82.5t14 -57.5t-14 -57.5t-43 -82.5t-68.5 -95t-94.5 -95t-116.5 -82.5t-140 -59t-159.5 -22.5t-159.5 22.5t-140 59t-116.5 82.5t-94.5 95t-68.5 95t-43 82.5t-14 57.5t14 57.5t42.5 82.5t68 95 t94.5 95t116.5 82.5t140 59t160.5 22.5zM888 829q-15 15 -18 12t5 -22q25 -57 25 -119q0 -124 -88 -212t-212 -88t-212 88t-88 212q0 59 23 114q8 19 4.5 22t-17.5 -12q-70 -69 -160 -184q-13 -16 -15 -40.5t9 -42.5q22 -36 47 -71t70 -82t92.5 -81t113 -58.5t133.5 -24.5 t133.5 24t113 58.5t92.5 81.5t70 81.5t47 70.5q11 18 9 42.5t-14 41.5q-90 117 -163 189zM448 727l-35 -36q-15 -15 -19.5 -38.5t4.5 -41.5q37 -68 93 -116q16 -13 38.5 -11t36.5 17l35 34q14 15 12.5 33.5t-16.5 33.5q-44 44 -89 117q-11 18 -28 20t-32 -12z" />
+<glyph unicode="&#xe106;" d="M592 0h-148l31 120q-91 20 -175.5 68.5t-143.5 106.5t-103.5 119t-66.5 110t-22 76q0 21 14 57.5t42.5 82.5t68 95t94.5 95t116.5 82.5t140 59t160.5 22.5q61 0 126 -15l32 121h148zM944 770l47 181q108 -85 176.5 -192t68.5 -159q0 -26 -19.5 -71t-59.5 -102t-93 -112 t-129 -104.5t-158 -75.5l46 173q77 49 136 117t97 131q11 18 9 42.5t-14 41.5q-54 70 -107 130zM310 824q-70 -69 -160 -184q-13 -16 -15 -40.5t9 -42.5q18 -30 39 -60t57 -70.5t74 -73t90 -61t105 -41.5l41 154q-107 18 -178.5 101.5t-71.5 193.5q0 59 23 114q8 19 4.5 22 t-17.5 -12zM448 727l-35 -36q-15 -15 -19.5 -38.5t4.5 -41.5q37 -68 93 -116q16 -13 38.5 -11t36.5 17l12 11l22 86l-3 4q-44 44 -89 117q-11 18 -28 20t-32 -12z" />
+<glyph unicode="&#xe107;" d="M-90 100l642 1066q20 31 48 28.5t48 -35.5l642 -1056q21 -32 7.5 -67.5t-50.5 -35.5h-1294q-37 0 -50.5 34t7.5 66zM155 200h345v75q0 10 7.5 17.5t17.5 7.5h150q10 0 17.5 -7.5t7.5 -17.5v-75h345l-445 723zM496 700h208q20 0 32 -14.5t8 -34.5l-58 -252 q-4 -20 -21.5 -34.5t-37.5 -14.5h-54q-20 0 -37.5 14.5t-21.5 34.5l-58 252q-4 20 8 34.5t32 14.5z" />
+<glyph unicode="&#xe108;" d="M650 1200q62 0 106 -44t44 -106v-339l363 -325q15 -14 26 -38.5t11 -44.5v-41q0 -20 -12 -26.5t-29 5.5l-359 249v-263q100 -93 100 -113v-64q0 -21 -13 -29t-32 1l-205 128l-205 -128q-19 -9 -32 -1t-13 29v64q0 20 100 113v263l-359 -249q-17 -12 -29 -5.5t-12 26.5v41 q0 20 11 44.5t26 38.5l363 325v339q0 62 44 106t106 44z" />
+<glyph unicode="&#xe109;" d="M850 1200h100q21 0 35.5 -14.5t14.5 -35.5v-50h50q21 0 35.5 -14.5t14.5 -35.5v-150h-1100v150q0 21 14.5 35.5t35.5 14.5h50v50q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-50h500v50q0 21 14.5 35.5t35.5 14.5zM1100 800v-750q0 -21 -14.5 -35.5 t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5v750h1100zM100 600v-100h100v100h-100zM300 600v-100h100v100h-100zM500 600v-100h100v100h-100zM700 600v-100h100v100h-100zM900 600v-100h100v100h-100zM100 400v-100h100v100h-100zM300 400v-100h100v100h-100zM500 400 v-100h100v100h-100zM700 400v-100h100v100h-100zM900 400v-100h100v100h-100zM100 200v-100h100v100h-100zM300 200v-100h100v100h-100zM500 200v-100h100v100h-100zM700 200v-100h100v100h-100zM900 200v-100h100v100h-100z" />
+<glyph unicode="&#xe110;" d="M1135 1165l249 -230q15 -14 15 -35t-15 -35l-249 -230q-14 -14 -24.5 -10t-10.5 25v150h-159l-600 -600h-291q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h209l600 600h241v150q0 21 10.5 25t24.5 -10zM522 819l-141 -141l-122 122h-209q-21 0 -35.5 14.5 t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h291zM1135 565l249 -230q15 -14 15 -35t-15 -35l-249 -230q-14 -14 -24.5 -10t-10.5 25v150h-241l-181 181l141 141l122 -122h159v150q0 21 10.5 25t24.5 -10z" />
+<glyph unicode="&#xe111;" d="M100 1100h1000q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-596l-304 -300v300h-100q-41 0 -70.5 29.5t-29.5 70.5v600q0 41 29.5 70.5t70.5 29.5z" />
+<glyph unicode="&#xe112;" d="M150 1200h200q21 0 35.5 -14.5t14.5 -35.5v-250h-300v250q0 21 14.5 35.5t35.5 14.5zM850 1200h200q21 0 35.5 -14.5t14.5 -35.5v-250h-300v250q0 21 14.5 35.5t35.5 14.5zM1100 800v-300q0 -41 -3 -77.5t-15 -89.5t-32 -96t-58 -89t-89 -77t-129 -51t-174 -20t-174 20 t-129 51t-89 77t-58 89t-32 96t-15 89.5t-3 77.5v300h300v-250v-27v-42.5t1.5 -41t5 -38t10 -35t16.5 -30t25.5 -24.5t35 -19t46.5 -12t60 -4t60 4.5t46.5 12.5t35 19.5t25 25.5t17 30.5t10 35t5 38t2 40.5t-0.5 42v25v250h300z" />
+<glyph unicode="&#xe113;" d="M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z" />
+<glyph unicode="&#xe114;" d="M1101 789l-550 -551l-551 551l198 199l353 -353l353 353z" />
+<glyph unicode="&#xe115;" d="M404 1000h746q21 0 35.5 -14.5t14.5 -35.5v-551h150q21 0 25 -10.5t-10 -24.5l-230 -249q-14 -15 -35 -15t-35 15l-230 249q-14 14 -10 24.5t25 10.5h150v401h-381zM135 984l230 -249q14 -14 10 -24.5t-25 -10.5h-150v-400h385l215 -200h-750q-21 0 -35.5 14.5 t-14.5 35.5v550h-150q-21 0 -25 10.5t10 24.5l230 249q14 15 35 15t35 -15z" />
+<glyph unicode="&#xe116;" d="M56 1200h94q17 0 31 -11t18 -27l38 -162h896q24 0 39 -18.5t10 -42.5l-100 -475q-5 -21 -27 -42.5t-55 -21.5h-633l48 -200h535q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-50v-50q0 -21 -14.5 -35.5t-35.5 -14.5t-35.5 14.5t-14.5 35.5v50h-300v-50 q0 -21 -14.5 -35.5t-35.5 -14.5t-35.5 14.5t-14.5 35.5v50h-31q-18 0 -32.5 10t-20.5 19l-5 10l-201 961h-54q-20 0 -35 14.5t-15 35.5t15 35.5t35 14.5z" />
+<glyph unicode="&#xe117;" d="M1200 1000v-100h-1200v100h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500zM0 800h1200v-800h-1200v800z" />
+<glyph unicode="&#xe118;" d="M200 800l-200 -400v600h200q0 41 29.5 70.5t70.5 29.5h300q42 0 71 -29.5t29 -70.5h500v-200h-1000zM1500 700l-300 -700h-1200l300 700h1200z" />
+<glyph unicode="&#xe119;" d="M635 1184l230 -249q14 -14 10 -24.5t-25 -10.5h-150v-601h150q21 0 25 -10.5t-10 -24.5l-230 -249q-14 -15 -35 -15t-35 15l-230 249q-14 14 -10 24.5t25 10.5h150v601h-150q-21 0 -25 10.5t10 24.5l230 249q14 15 35 15t35 -15z" />
+<glyph unicode="&#xe120;" d="M936 864l249 -229q14 -15 14 -35.5t-14 -35.5l-249 -229q-15 -15 -25.5 -10.5t-10.5 24.5v151h-600v-151q0 -20 -10.5 -24.5t-25.5 10.5l-249 229q-14 15 -14 35.5t14 35.5l249 229q15 15 25.5 10.5t10.5 -25.5v-149h600v149q0 21 10.5 25.5t25.5 -10.5z" />
+<glyph unicode="&#xe121;" d="M1169 400l-172 732q-5 23 -23 45.5t-38 22.5h-672q-20 0 -38 -20t-23 -41l-172 -739h1138zM1100 300h-1000q-41 0 -70.5 -29.5t-29.5 -70.5v-100q0 -41 29.5 -70.5t70.5 -29.5h1000q41 0 70.5 29.5t29.5 70.5v100q0 41 -29.5 70.5t-70.5 29.5zM800 100v100h100v-100h-100 zM1000 100v100h100v-100h-100z" />
+<glyph unicode="&#xe122;" d="M1150 1100q21 0 35.5 -14.5t14.5 -35.5v-850q0 -21 -14.5 -35.5t-35.5 -14.5t-35.5 14.5t-14.5 35.5v850q0 21 14.5 35.5t35.5 14.5zM1000 200l-675 200h-38l47 -276q3 -16 -5.5 -20t-29.5 -4h-7h-84q-20 0 -34.5 14t-18.5 35q-55 337 -55 351v250v6q0 16 1 23.5t6.5 14 t17.5 6.5h200l675 250v-850zM0 750v-250q-4 0 -11 0.5t-24 6t-30 15t-24 30t-11 48.5v50q0 26 10.5 46t25 30t29 16t25.5 7z" />
+<glyph unicode="&#xe123;" d="M553 1200h94q20 0 29 -10.5t3 -29.5l-18 -37q83 -19 144 -82.5t76 -140.5l63 -327l118 -173h17q19 0 33 -14.5t14 -35t-13 -40.5t-31 -27q-8 -4 -23 -9.5t-65 -19.5t-103 -25t-132.5 -20t-158.5 -9q-57 0 -115 5t-104 12t-88.5 15.5t-73.5 17.5t-54.5 16t-35.5 12l-11 4 q-18 8 -31 28t-13 40.5t14 35t33 14.5h17l118 173l63 327q15 77 76 140t144 83l-18 32q-6 19 3.5 32t28.5 13zM498 110q50 -6 102 -6q53 0 102 6q-12 -49 -39.5 -79.5t-62.5 -30.5t-63 30.5t-39 79.5z" />
+<glyph unicode="&#xe124;" d="M800 946l224 78l-78 -224l234 -45l-180 -155l180 -155l-234 -45l78 -224l-224 78l-45 -234l-155 180l-155 -180l-45 234l-224 -78l78 224l-234 45l180 155l-180 155l234 45l-78 224l224 -78l45 234l155 -180l155 180z" />
+<glyph unicode="&#xe125;" d="M650 1200h50q40 0 70 -40.5t30 -84.5v-150l-28 -125h328q40 0 70 -40.5t30 -84.5v-100q0 -45 -29 -74l-238 -344q-16 -24 -38 -40.5t-45 -16.5h-250q-7 0 -42 25t-66 50l-31 25h-61q-45 0 -72.5 18t-27.5 57v400q0 36 20 63l145 196l96 198q13 28 37.5 48t51.5 20z M650 1100l-100 -212l-150 -213v-375h100l136 -100h214l250 375v125h-450l50 225v175h-50zM50 800h100q21 0 35.5 -14.5t14.5 -35.5v-500q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v500q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe126;" d="M600 1100h250q23 0 45 -16.5t38 -40.5l238 -344q29 -29 29 -74v-100q0 -44 -30 -84.5t-70 -40.5h-328q28 -118 28 -125v-150q0 -44 -30 -84.5t-70 -40.5h-50q-27 0 -51.5 20t-37.5 48l-96 198l-145 196q-20 27 -20 63v400q0 39 27.5 57t72.5 18h61q124 100 139 100z M50 1000h100q21 0 35.5 -14.5t14.5 -35.5v-500q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v500q0 21 14.5 35.5t35.5 14.5zM636 1000l-136 -100h-100v-375l150 -213l100 -212h50v175l-50 225h450v125l-250 375h-214z" />
+<glyph unicode="&#xe127;" d="M356 873l363 230q31 16 53 -6l110 -112q13 -13 13.5 -32t-11.5 -34l-84 -121h302q84 0 138 -38t54 -110t-55 -111t-139 -39h-106l-131 -339q-6 -21 -19.5 -41t-28.5 -20h-342q-7 0 -90 81t-83 94v525q0 17 14 35.5t28 28.5zM400 792v-503l100 -89h293l131 339 q6 21 19.5 41t28.5 20h203q21 0 30.5 25t0.5 50t-31 25h-456h-7h-6h-5.5t-6 0.5t-5 1.5t-5 2t-4 2.5t-4 4t-2.5 4.5q-12 25 5 47l146 183l-86 83zM50 800h100q21 0 35.5 -14.5t14.5 -35.5v-500q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v500 q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe128;" d="M475 1103l366 -230q2 -1 6 -3.5t14 -10.5t18 -16.5t14.5 -20t6.5 -22.5v-525q0 -13 -86 -94t-93 -81h-342q-15 0 -28.5 20t-19.5 41l-131 339h-106q-85 0 -139.5 39t-54.5 111t54 110t138 38h302l-85 121q-11 15 -10.5 34t13.5 32l110 112q22 22 53 6zM370 945l146 -183 q17 -22 5 -47q-2 -2 -3.5 -4.5t-4 -4t-4 -2.5t-5 -2t-5 -1.5t-6 -0.5h-6h-6.5h-6h-475v-100h221q15 0 29 -20t20 -41l130 -339h294l106 89v503l-342 236zM1050 800h100q21 0 35.5 -14.5t14.5 -35.5v-500q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5 v500q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe129;" d="M550 1294q72 0 111 -55t39 -139v-106l339 -131q21 -6 41 -19.5t20 -28.5v-342q0 -7 -81 -90t-94 -83h-525q-17 0 -35.5 14t-28.5 28l-9 14l-230 363q-16 31 6 53l112 110q13 13 32 13.5t34 -11.5l121 -84v302q0 84 38 138t110 54zM600 972v203q0 21 -25 30.5t-50 0.5 t-25 -31v-456v-7v-6v-5.5t-0.5 -6t-1.5 -5t-2 -5t-2.5 -4t-4 -4t-4.5 -2.5q-25 -12 -47 5l-183 146l-83 -86l236 -339h503l89 100v293l-339 131q-21 6 -41 19.5t-20 28.5zM450 200h500q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-500 q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe130;" d="M350 1100h500q21 0 35.5 14.5t14.5 35.5v100q0 21 -14.5 35.5t-35.5 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -21 14.5 -35.5t35.5 -14.5zM600 306v-106q0 -84 -39 -139t-111 -55t-110 54t-38 138v302l-121 -84q-15 -12 -34 -11.5t-32 13.5l-112 110 q-22 22 -6 53l230 363q1 2 3.5 6t10.5 13.5t16.5 17t20 13.5t22.5 6h525q13 0 94 -83t81 -90v-342q0 -15 -20 -28.5t-41 -19.5zM308 900l-236 -339l83 -86l183 146q22 17 47 5q2 -1 4.5 -2.5t4 -4t2.5 -4t2 -5t1.5 -5t0.5 -6v-5.5v-6v-7v-456q0 -22 25 -31t50 0.5t25 30.5 v203q0 15 20 28.5t41 19.5l339 131v293l-89 100h-503z" />
+<glyph unicode="&#xe131;" d="M600 1178q118 0 225 -45.5t184.5 -123t123 -184.5t45.5 -225t-45.5 -225t-123 -184.5t-184.5 -123t-225 -45.5t-225 45.5t-184.5 123t-123 184.5t-45.5 225t45.5 225t123 184.5t184.5 123t225 45.5zM914 632l-275 223q-16 13 -27.5 8t-11.5 -26v-137h-275 q-10 0 -17.5 -7.5t-7.5 -17.5v-150q0 -10 7.5 -17.5t17.5 -7.5h275v-137q0 -21 11.5 -26t27.5 8l275 223q16 13 16 32t-16 32z" />
+<glyph unicode="&#xe132;" d="M600 1178q118 0 225 -45.5t184.5 -123t123 -184.5t45.5 -225t-45.5 -225t-123 -184.5t-184.5 -123t-225 -45.5t-225 45.5t-184.5 123t-123 184.5t-45.5 225t45.5 225t123 184.5t184.5 123t225 45.5zM561 855l-275 -223q-16 -13 -16 -32t16 -32l275 -223q16 -13 27.5 -8 t11.5 26v137h275q10 0 17.5 7.5t7.5 17.5v150q0 10 -7.5 17.5t-17.5 7.5h-275v137q0 21 -11.5 26t-27.5 -8z" />
+<glyph unicode="&#xe133;" d="M600 1178q118 0 225 -45.5t184.5 -123t123 -184.5t45.5 -225t-45.5 -225t-123 -184.5t-184.5 -123t-225 -45.5t-225 45.5t-184.5 123t-123 184.5t-45.5 225t45.5 225t123 184.5t184.5 123t225 45.5zM855 639l-223 275q-13 16 -32 16t-32 -16l-223 -275q-13 -16 -8 -27.5 t26 -11.5h137v-275q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v275h137q21 0 26 11.5t-8 27.5z" />
+<glyph unicode="&#xe134;" d="M600 1178q118 0 225 -45.5t184.5 -123t123 -184.5t45.5 -225t-45.5 -225t-123 -184.5t-184.5 -123t-225 -45.5t-225 45.5t-184.5 123t-123 184.5t-45.5 225t45.5 225t123 184.5t184.5 123t225 45.5zM675 900h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-275h-137q-21 0 -26 -11.5 t8 -27.5l223 -275q13 -16 32 -16t32 16l223 275q13 16 8 27.5t-26 11.5h-137v275q0 10 -7.5 17.5t-17.5 7.5z" />
+<glyph unicode="&#xe135;" d="M600 1176q116 0 222.5 -46t184 -123.5t123.5 -184t46 -222.5t-46 -222.5t-123.5 -184t-184 -123.5t-222.5 -46t-222.5 46t-184 123.5t-123.5 184t-46 222.5t46 222.5t123.5 184t184 123.5t222.5 46zM627 1101q-15 -12 -36.5 -20.5t-35.5 -12t-43 -8t-39 -6.5 q-15 -3 -45.5 0t-45.5 -2q-20 -7 -51.5 -26.5t-34.5 -34.5q-3 -11 6.5 -22.5t8.5 -18.5q-3 -34 -27.5 -91t-29.5 -79q-9 -34 5 -93t8 -87q0 -9 17 -44.5t16 -59.5q12 0 23 -5t23.5 -15t19.5 -14q16 -8 33 -15t40.5 -15t34.5 -12q21 -9 52.5 -32t60 -38t57.5 -11 q7 -15 -3 -34t-22.5 -40t-9.5 -38q13 -21 23 -34.5t27.5 -27.5t36.5 -18q0 -7 -3.5 -16t-3.5 -14t5 -17q104 -2 221 112q30 29 46.5 47t34.5 49t21 63q-13 8 -37 8.5t-36 7.5q-15 7 -49.5 15t-51.5 19q-18 0 -41 -0.5t-43 -1.5t-42 -6.5t-38 -16.5q-51 -35 -66 -12 q-4 1 -3.5 25.5t0.5 25.5q-6 13 -26.5 17.5t-24.5 6.5q1 15 -0.5 30.5t-7 28t-18.5 11.5t-31 -21q-23 -25 -42 4q-19 28 -8 58q6 16 22 22q6 -1 26 -1.5t33.5 -4t19.5 -13.5q7 -12 18 -24t21.5 -20.5t20 -15t15.5 -10.5l5 -3q2 12 7.5 30.5t8 34.5t-0.5 32q-3 18 3.5 29 t18 22.5t15.5 24.5q6 14 10.5 35t8 31t15.5 22.5t34 22.5q-6 18 10 36q8 0 24 -1.5t24.5 -1.5t20 4.5t20.5 15.5q-10 23 -31 42.5t-37.5 29.5t-49 27t-43.5 23q0 1 2 8t3 11.5t1.5 10.5t-1 9.5t-4.5 4.5q31 -13 58.5 -14.5t38.5 2.5l12 5q5 28 -9.5 46t-36.5 24t-50 15 t-41 20q-18 -4 -37 0zM613 994q0 -17 8 -42t17 -45t9 -23q-8 1 -39.5 5.5t-52.5 10t-37 16.5q3 11 16 29.5t16 25.5q10 -10 19 -10t14 6t13.5 14.5t16.5 12.5z" />
+<glyph unicode="&#xe136;" d="M756 1157q164 92 306 -9l-259 -138l145 -232l251 126q6 -89 -34 -156.5t-117 -110.5q-60 -34 -127 -39.5t-126 16.5l-596 -596q-15 -16 -36.5 -16t-36.5 16l-111 110q-15 15 -15 36.5t15 37.5l600 599q-34 101 5.5 201.5t135.5 154.5z" />
+<glyph unicode="&#xe137;" horiz-adv-x="1220" d="M100 1196h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5v100q0 41 29.5 70.5t70.5 29.5zM1100 1096h-200v-100h200v100zM100 796h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000 q-41 0 -70.5 29.5t-29.5 70.5v100q0 41 29.5 70.5t70.5 29.5zM1100 696h-500v-100h500v100zM100 396h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5v100q0 41 29.5 70.5t70.5 29.5zM1100 296h-300v-100h300v100z " />
+<glyph unicode="&#xe138;" d="M150 1200h900q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-900q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM700 500v-300l-200 -200v500l-350 500h900z" />
+<glyph unicode="&#xe139;" d="M500 1200h200q41 0 70.5 -29.5t29.5 -70.5v-100h300q41 0 70.5 -29.5t29.5 -70.5v-400h-500v100h-200v-100h-500v400q0 41 29.5 70.5t70.5 29.5h300v100q0 41 29.5 70.5t70.5 29.5zM500 1100v-100h200v100h-200zM1200 400v-200q0 -41 -29.5 -70.5t-70.5 -29.5h-1000 q-41 0 -70.5 29.5t-29.5 70.5v200h1200z" />
+<glyph unicode="&#xe140;" d="M50 1200h300q21 0 25 -10.5t-10 -24.5l-94 -94l199 -199q7 -8 7 -18t-7 -18l-106 -106q-8 -7 -18 -7t-18 7l-199 199l-94 -94q-14 -14 -24.5 -10t-10.5 25v300q0 21 14.5 35.5t35.5 14.5zM850 1200h300q21 0 35.5 -14.5t14.5 -35.5v-300q0 -21 -10.5 -25t-24.5 10l-94 94 l-199 -199q-8 -7 -18 -7t-18 7l-106 106q-7 8 -7 18t7 18l199 199l-94 94q-14 14 -10 24.5t25 10.5zM364 470l106 -106q7 -8 7 -18t-7 -18l-199 -199l94 -94q14 -14 10 -24.5t-25 -10.5h-300q-21 0 -35.5 14.5t-14.5 35.5v300q0 21 10.5 25t24.5 -10l94 -94l199 199 q8 7 18 7t18 -7zM1071 271l94 94q14 14 24.5 10t10.5 -25v-300q0 -21 -14.5 -35.5t-35.5 -14.5h-300q-21 0 -25 10.5t10 24.5l94 94l-199 199q-7 8 -7 18t7 18l106 106q8 7 18 7t18 -7z" />
+<glyph unicode="&#xe141;" d="M596 1192q121 0 231.5 -47.5t190 -127t127 -190t47.5 -231.5t-47.5 -231.5t-127 -190.5t-190 -127t-231.5 -47t-231.5 47t-190.5 127t-127 190.5t-47 231.5t47 231.5t127 190t190.5 127t231.5 47.5zM596 1010q-112 0 -207.5 -55.5t-151 -151t-55.5 -207.5t55.5 -207.5 t151 -151t207.5 -55.5t207.5 55.5t151 151t55.5 207.5t-55.5 207.5t-151 151t-207.5 55.5zM454.5 905q22.5 0 38.5 -16t16 -38.5t-16 -39t-38.5 -16.5t-38.5 16.5t-16 39t16 38.5t38.5 16zM754.5 905q22.5 0 38.5 -16t16 -38.5t-16 -39t-38 -16.5q-14 0 -29 10l-55 -145 q17 -23 17 -51q0 -36 -25.5 -61.5t-61.5 -25.5t-61.5 25.5t-25.5 61.5q0 32 20.5 56.5t51.5 29.5l122 126l1 1q-9 14 -9 28q0 23 16 39t38.5 16zM345.5 709q22.5 0 38.5 -16t16 -38.5t-16 -38.5t-38.5 -16t-38.5 16t-16 38.5t16 38.5t38.5 16zM854.5 709q22.5 0 38.5 -16 t16 -38.5t-16 -38.5t-38.5 -16t-38.5 16t-16 38.5t16 38.5t38.5 16z" />
+<glyph unicode="&#xe142;" d="M546 173l469 470q91 91 99 192q7 98 -52 175.5t-154 94.5q-22 4 -47 4q-34 0 -66.5 -10t-56.5 -23t-55.5 -38t-48 -41.5t-48.5 -47.5q-376 -375 -391 -390q-30 -27 -45 -41.5t-37.5 -41t-32 -46.5t-16 -47.5t-1.5 -56.5q9 -62 53.5 -95t99.5 -33q74 0 125 51l548 548 q36 36 20 75q-7 16 -21.5 26t-32.5 10q-26 0 -50 -23q-13 -12 -39 -38l-341 -338q-15 -15 -35.5 -15.5t-34.5 13.5t-14 34.5t14 34.5q327 333 361 367q35 35 67.5 51.5t78.5 16.5q14 0 29 -1q44 -8 74.5 -35.5t43.5 -68.5q14 -47 2 -96.5t-47 -84.5q-12 -11 -32 -32 t-79.5 -81t-114.5 -115t-124.5 -123.5t-123 -119.5t-96.5 -89t-57 -45q-56 -27 -120 -27q-70 0 -129 32t-93 89q-48 78 -35 173t81 163l511 511q71 72 111 96q91 55 198 55q80 0 152 -33q78 -36 129.5 -103t66.5 -154q17 -93 -11 -183.5t-94 -156.5l-482 -476 q-15 -15 -36 -16t-37 14t-17.5 34t14.5 35z" />
+<glyph unicode="&#xe143;" d="M649 949q48 68 109.5 104t121.5 38.5t118.5 -20t102.5 -64t71 -100.5t27 -123q0 -57 -33.5 -117.5t-94 -124.5t-126.5 -127.5t-150 -152.5t-146 -174q-62 85 -145.5 174t-150 152.5t-126.5 127.5t-93.5 124.5t-33.5 117.5q0 64 28 123t73 100.5t104 64t119 20 t120.5 -38.5t104.5 -104zM896 972q-33 0 -64.5 -19t-56.5 -46t-47.5 -53.5t-43.5 -45.5t-37.5 -19t-36 19t-40 45.5t-43 53.5t-54 46t-65.5 19q-67 0 -122.5 -55.5t-55.5 -132.5q0 -23 13.5 -51t46 -65t57.5 -63t76 -75l22 -22q15 -14 44 -44t50.5 -51t46 -44t41 -35t23 -12 t23.5 12t42.5 36t46 44t52.5 52t44 43q4 4 12 13q43 41 63.5 62t52 55t46 55t26 46t11.5 44q0 79 -53 133.5t-120 54.5z" />
+<glyph unicode="&#xe144;" d="M776.5 1214q93.5 0 159.5 -66l141 -141q66 -66 66 -160q0 -42 -28 -95.5t-62 -87.5l-29 -29q-31 53 -77 99l-18 18l95 95l-247 248l-389 -389l212 -212l-105 -106l-19 18l-141 141q-66 66 -66 159t66 159l283 283q65 66 158.5 66zM600 706l105 105q10 -8 19 -17l141 -141 q66 -66 66 -159t-66 -159l-283 -283q-66 -66 -159 -66t-159 66l-141 141q-66 66 -66 159.5t66 159.5l55 55q29 -55 75 -102l18 -17l-95 -95l247 -248l389 389z" />
+<glyph unicode="&#xe145;" d="M603 1200q85 0 162 -15t127 -38t79 -48t29 -46v-953q0 -41 -29.5 -70.5t-70.5 -29.5h-600q-41 0 -70.5 29.5t-29.5 70.5v953q0 21 30 46.5t81 48t129 37.5t163 15zM300 1000v-700h600v700h-600zM600 254q-43 0 -73.5 -30.5t-30.5 -73.5t30.5 -73.5t73.5 -30.5t73.5 30.5 t30.5 73.5t-30.5 73.5t-73.5 30.5z" />
+<glyph unicode="&#xe146;" d="M902 1185l283 -282q15 -15 15 -36t-14.5 -35.5t-35.5 -14.5t-35 15l-36 35l-279 -267v-300l-212 210l-308 -307l-280 -203l203 280l307 308l-210 212h300l267 279l-35 36q-15 14 -15 35t14.5 35.5t35.5 14.5t35 -15z" />
+<glyph unicode="&#xe148;" d="M700 1248v-78q38 -5 72.5 -14.5t75.5 -31.5t71 -53.5t52 -84t24 -118.5h-159q-4 36 -10.5 59t-21 45t-40 35.5t-64.5 20.5v-307l64 -13q34 -7 64 -16.5t70 -32t67.5 -52.5t47.5 -80t20 -112q0 -139 -89 -224t-244 -97v-77h-100v79q-150 16 -237 103q-40 40 -52.5 93.5 t-15.5 139.5h139q5 -77 48.5 -126t117.5 -65v335l-27 8q-46 14 -79 26.5t-72 36t-63 52t-40 72.5t-16 98q0 70 25 126t67.5 92t94.5 57t110 27v77h100zM600 754v274q-29 -4 -50 -11t-42 -21.5t-31.5 -41.5t-10.5 -65q0 -29 7 -50.5t16.5 -34t28.5 -22.5t31.5 -14t37.5 -10 q9 -3 13 -4zM700 547v-310q22 2 42.5 6.5t45 15.5t41.5 27t29 42t12 59.5t-12.5 59.5t-38 44.5t-53 31t-66.5 24.5z" />
+<glyph unicode="&#xe149;" d="M561 1197q84 0 160.5 -40t123.5 -109.5t47 -147.5h-153q0 40 -19.5 71.5t-49.5 48.5t-59.5 26t-55.5 9q-37 0 -79 -14.5t-62 -35.5q-41 -44 -41 -101q0 -26 13.5 -63t26.5 -61t37 -66q6 -9 9 -14h241v-100h-197q8 -50 -2.5 -115t-31.5 -95q-45 -62 -99 -112 q34 10 83 17.5t71 7.5q32 1 102 -16t104 -17q83 0 136 30l50 -147q-31 -19 -58 -30.5t-55 -15.5t-42 -4.5t-46 -0.5q-23 0 -76 17t-111 32.5t-96 11.5q-39 -3 -82 -16t-67 -25l-23 -11l-55 145q4 3 16 11t15.5 10.5t13 9t15.5 12t14.5 14t17.5 18.5q48 55 54 126.5 t-30 142.5h-221v100h166q-23 47 -44 104q-7 20 -12 41.5t-6 55.5t6 66.5t29.5 70.5t58.5 71q97 88 263 88z" />
+<glyph unicode="&#xe150;" d="M400 300h150q21 0 25 -11t-10 -25l-230 -250q-14 -15 -35 -15t-35 15l-230 250q-14 14 -10 25t25 11h150v900h200v-900zM935 1184l230 -249q14 -14 10 -24.5t-25 -10.5h-150v-900h-200v900h-150q-21 0 -25 10.5t10 24.5l230 249q14 15 35 15t35 -15z" />
+<glyph unicode="&#xe151;" d="M1000 700h-100v100h-100v-100h-100v500h300v-500zM400 300h150q21 0 25 -11t-10 -25l-230 -250q-14 -15 -35 -15t-35 15l-230 250q-14 14 -10 25t25 11h150v900h200v-900zM801 1100v-200h100v200h-100zM1000 350l-200 -250h200v-100h-300v150l200 250h-200v100h300v-150z " />
+<glyph unicode="&#xe152;" d="M400 300h150q21 0 25 -11t-10 -25l-230 -250q-14 -15 -35 -15t-35 15l-230 250q-14 14 -10 25t25 11h150v900h200v-900zM1000 1050l-200 -250h200v-100h-300v150l200 250h-200v100h300v-150zM1000 0h-100v100h-100v-100h-100v500h300v-500zM801 400v-200h100v200h-100z " />
+<glyph unicode="&#xe153;" d="M400 300h150q21 0 25 -11t-10 -25l-230 -250q-14 -15 -35 -15t-35 15l-230 250q-14 14 -10 25t25 11h150v900h200v-900zM1000 700h-100v400h-100v100h200v-500zM1100 0h-100v100h-200v400h300v-500zM901 400v-200h100v200h-100z" />
+<glyph unicode="&#xe154;" d="M400 300h150q21 0 25 -11t-10 -25l-230 -250q-14 -15 -35 -15t-35 15l-230 250q-14 14 -10 25t25 11h150v900h200v-900zM1100 700h-100v100h-200v400h300v-500zM901 1100v-200h100v200h-100zM1000 0h-100v400h-100v100h200v-500z" />
+<glyph unicode="&#xe155;" d="M400 300h150q21 0 25 -11t-10 -25l-230 -250q-14 -15 -35 -15t-35 15l-230 250q-14 14 -10 25t25 11h150v900h200v-900zM900 1000h-200v200h200v-200zM1000 700h-300v200h300v-200zM1100 400h-400v200h400v-200zM1200 100h-500v200h500v-200z" />
+<glyph unicode="&#xe156;" d="M400 300h150q21 0 25 -11t-10 -25l-230 -250q-14 -15 -35 -15t-35 15l-230 250q-14 14 -10 25t25 11h150v900h200v-900zM1200 1000h-500v200h500v-200zM1100 700h-400v200h400v-200zM1000 400h-300v200h300v-200zM900 100h-200v200h200v-200z" />
+<glyph unicode="&#xe157;" d="M350 1100h400q162 0 256 -93.5t94 -256.5v-400q0 -165 -93.5 -257.5t-256.5 -92.5h-400q-165 0 -257.5 92.5t-92.5 257.5v400q0 165 92.5 257.5t257.5 92.5zM800 900h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5 v500q0 41 -29.5 70.5t-70.5 29.5z" />
+<glyph unicode="&#xe158;" d="M350 1100h400q165 0 257.5 -92.5t92.5 -257.5v-400q0 -165 -92.5 -257.5t-257.5 -92.5h-400q-163 0 -256.5 92.5t-93.5 257.5v400q0 163 94 256.5t256 93.5zM800 900h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5 v500q0 41 -29.5 70.5t-70.5 29.5zM440 770l253 -190q17 -12 17 -30t-17 -30l-253 -190q-16 -12 -28 -6.5t-12 26.5v400q0 21 12 26.5t28 -6.5z" />
+<glyph unicode="&#xe159;" d="M350 1100h400q163 0 256.5 -94t93.5 -256v-400q0 -165 -92.5 -257.5t-257.5 -92.5h-400q-165 0 -257.5 92.5t-92.5 257.5v400q0 163 92.5 256.5t257.5 93.5zM800 900h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5 v500q0 41 -29.5 70.5t-70.5 29.5zM350 700h400q21 0 26.5 -12t-6.5 -28l-190 -253q-12 -17 -30 -17t-30 17l-190 253q-12 16 -6.5 28t26.5 12z" />
+<glyph unicode="&#xe160;" d="M350 1100h400q165 0 257.5 -92.5t92.5 -257.5v-400q0 -163 -92.5 -256.5t-257.5 -93.5h-400q-163 0 -256.5 94t-93.5 256v400q0 165 92.5 257.5t257.5 92.5zM800 900h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5 v500q0 41 -29.5 70.5t-70.5 29.5zM580 693l190 -253q12 -16 6.5 -28t-26.5 -12h-400q-21 0 -26.5 12t6.5 28l190 253q12 17 30 17t30 -17z" />
+<glyph unicode="&#xe161;" d="M550 1100h400q165 0 257.5 -92.5t92.5 -257.5v-400q0 -165 -92.5 -257.5t-257.5 -92.5h-400q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h450q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-450q-21 0 -35.5 14.5t-14.5 35.5v100 q0 21 14.5 35.5t35.5 14.5zM338 867l324 -284q16 -14 16 -33t-16 -33l-324 -284q-16 -14 -27 -9t-11 26v150h-250q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h250v150q0 21 11 26t27 -9z" />
+<glyph unicode="&#xe162;" d="M793 1182l9 -9q8 -10 5 -27q-3 -11 -79 -225.5t-78 -221.5l300 1q24 0 32.5 -17.5t-5.5 -35.5q-1 0 -133.5 -155t-267 -312.5t-138.5 -162.5q-12 -15 -26 -15h-9l-9 8q-9 11 -4 32q2 9 42 123.5t79 224.5l39 110h-302q-23 0 -31 19q-10 21 6 41q75 86 209.5 237.5 t228 257t98.5 111.5q9 16 25 16h9z" />
+<glyph unicode="&#xe163;" d="M350 1100h400q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-450q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h450q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-165 0 -257.5 92.5t-92.5 257.5v400 q0 165 92.5 257.5t257.5 92.5zM938 867l324 -284q16 -14 16 -33t-16 -33l-324 -284q-16 -14 -27 -9t-11 26v150h-250q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h250v150q0 21 11 26t27 -9z" />
+<glyph unicode="&#xe164;" d="M750 1200h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -10.5 -25t-24.5 10l-109 109l-312 -312q-15 -15 -35.5 -15t-35.5 15l-141 141q-15 15 -15 35.5t15 35.5l312 312l-109 109q-14 14 -10 24.5t25 10.5zM456 900h-156q-41 0 -70.5 -29.5t-29.5 -70.5v-500 q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v148l200 200v-298q0 -165 -93.5 -257.5t-256.5 -92.5h-400q-165 0 -257.5 92.5t-92.5 257.5v400q0 165 92.5 257.5t257.5 92.5h300z" />
+<glyph unicode="&#xe165;" d="M600 1186q119 0 227.5 -46.5t187 -125t125 -187t46.5 -227.5t-46.5 -227.5t-125 -187t-187 -125t-227.5 -46.5t-227.5 46.5t-187 125t-125 187t-46.5 227.5t46.5 227.5t125 187t187 125t227.5 46.5zM600 1022q-115 0 -212 -56.5t-153.5 -153.5t-56.5 -212t56.5 -212 t153.5 -153.5t212 -56.5t212 56.5t153.5 153.5t56.5 212t-56.5 212t-153.5 153.5t-212 56.5zM600 794q80 0 137 -57t57 -137t-57 -137t-137 -57t-137 57t-57 137t57 137t137 57z" />
+<glyph unicode="&#xe166;" d="M450 1200h200q21 0 35.5 -14.5t14.5 -35.5v-350h245q20 0 25 -11t-9 -26l-383 -426q-14 -15 -33.5 -15t-32.5 15l-379 426q-13 15 -8.5 26t25.5 11h250v350q0 21 14.5 35.5t35.5 14.5zM50 300h1000q21 0 35.5 -14.5t14.5 -35.5v-250h-1100v250q0 21 14.5 35.5t35.5 14.5z M900 200v-50h100v50h-100z" />
+<glyph unicode="&#xe167;" d="M583 1182l378 -435q14 -15 9 -31t-26 -16h-244v-250q0 -20 -17 -35t-39 -15h-200q-20 0 -32 14.5t-12 35.5v250h-250q-20 0 -25.5 16.5t8.5 31.5l383 431q14 16 33.5 17t33.5 -14zM50 300h1000q21 0 35.5 -14.5t14.5 -35.5v-250h-1100v250q0 21 14.5 35.5t35.5 14.5z M900 200v-50h100v50h-100z" />
+<glyph unicode="&#xe168;" d="M396 723l369 369q7 7 17.5 7t17.5 -7l139 -139q7 -8 7 -18.5t-7 -17.5l-525 -525q-7 -8 -17.5 -8t-17.5 8l-292 291q-7 8 -7 18t7 18l139 139q8 7 18.5 7t17.5 -7zM50 300h1000q21 0 35.5 -14.5t14.5 -35.5v-250h-1100v250q0 21 14.5 35.5t35.5 14.5zM900 200v-50h100v50 h-100z" />
+<glyph unicode="&#xe169;" d="M135 1023l142 142q14 14 35 14t35 -14l77 -77l-212 -212l-77 76q-14 15 -14 36t14 35zM655 855l210 210q14 14 24.5 10t10.5 -25l-2 -599q-1 -20 -15.5 -35t-35.5 -15l-597 -1q-21 0 -25 10.5t10 24.5l208 208l-154 155l212 212zM50 300h1000q21 0 35.5 -14.5t14.5 -35.5 v-250h-1100v250q0 21 14.5 35.5t35.5 14.5zM900 200v-50h100v50h-100z" />
+<glyph unicode="&#xe170;" d="M350 1200l599 -2q20 -1 35 -15.5t15 -35.5l1 -597q0 -21 -10.5 -25t-24.5 10l-208 208l-155 -154l-212 212l155 154l-210 210q-14 14 -10 24.5t25 10.5zM524 512l-76 -77q-15 -14 -36 -14t-35 14l-142 142q-14 14 -14 35t14 35l77 77zM50 300h1000q21 0 35.5 -14.5 t14.5 -35.5v-250h-1100v250q0 21 14.5 35.5t35.5 14.5zM900 200v-50h100v50h-100z" />
+<glyph unicode="&#xe171;" d="M1200 103l-483 276l-314 -399v423h-399l1196 796v-1096zM483 424v-230l683 953z" />
+<glyph unicode="&#xe172;" d="M1100 1000v-850q0 -21 -14.5 -35.5t-35.5 -14.5h-150v400h-700v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100zM700 1000h-100v200h100v-200z" />
+<glyph unicode="&#xe173;" d="M1100 1000l-2 -149l-299 -299l-95 95q-9 9 -21.5 9t-21.5 -9l-149 -147h-312v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100zM700 1000h-100v200h100v-200zM1132 638l106 -106q7 -7 7 -17.5t-7 -17.5l-420 -421q-8 -7 -18 -7 t-18 7l-202 203q-8 7 -8 17.5t8 17.5l106 106q7 8 17.5 8t17.5 -8l79 -79l297 297q7 7 17.5 7t17.5 -7z" />
+<glyph unicode="&#xe174;" d="M1100 1000v-269l-103 -103l-134 134q-15 15 -33.5 16.5t-34.5 -12.5l-266 -266h-329v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100zM700 1000h-100v200h100v-200zM1202 572l70 -70q15 -15 15 -35.5t-15 -35.5l-131 -131 l131 -131q15 -15 15 -35.5t-15 -35.5l-70 -70q-15 -15 -35.5 -15t-35.5 15l-131 131l-131 -131q-15 -15 -35.5 -15t-35.5 15l-70 70q-15 15 -15 35.5t15 35.5l131 131l-131 131q-15 15 -15 35.5t15 35.5l70 70q15 15 35.5 15t35.5 -15l131 -131l131 131q15 15 35.5 15 t35.5 -15z" />
+<glyph unicode="&#xe175;" d="M1100 1000v-300h-350q-21 0 -35.5 -14.5t-14.5 -35.5v-150h-500v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100zM700 1000h-100v200h100v-200zM850 600h100q21 0 35.5 -14.5t14.5 -35.5v-250h150q21 0 25 -10.5t-10 -24.5 l-230 -230q-14 -14 -35 -14t-35 14l-230 230q-14 14 -10 24.5t25 10.5h150v250q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe176;" d="M1100 1000v-400l-165 165q-14 15 -35 15t-35 -15l-263 -265h-402v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100zM700 1000h-100v200h100v-200zM935 565l230 -229q14 -15 10 -25.5t-25 -10.5h-150v-250q0 -20 -14.5 -35 t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35v250h-150q-21 0 -25 10.5t10 25.5l230 229q14 15 35 15t35 -15z" />
+<glyph unicode="&#xe177;" d="M50 1100h1100q21 0 35.5 -14.5t14.5 -35.5v-150h-1200v150q0 21 14.5 35.5t35.5 14.5zM1200 800v-550q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v550h1200zM100 500v-200h400v200h-400z" />
+<glyph unicode="&#xe178;" d="M935 1165l248 -230q14 -14 14 -35t-14 -35l-248 -230q-14 -14 -24.5 -10t-10.5 25v150h-400v200h400v150q0 21 10.5 25t24.5 -10zM200 800h-50q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h50v-200zM400 800h-100v200h100v-200zM18 435l247 230 q14 14 24.5 10t10.5 -25v-150h400v-200h-400v-150q0 -21 -10.5 -25t-24.5 10l-247 230q-15 14 -15 35t15 35zM900 300h-100v200h100v-200zM1000 500h51q20 0 34.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-34.5 -14.5h-51v200z" />
+<glyph unicode="&#xe179;" d="M862 1073l276 116q25 18 43.5 8t18.5 -41v-1106q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v397q-4 1 -11 5t-24 17.5t-30 29t-24 42t-11 56.5v359q0 31 18.5 65t43.5 52zM550 1200q22 0 34.5 -12.5t14.5 -24.5l1 -13v-450q0 -28 -10.5 -59.5 t-25 -56t-29 -45t-25.5 -31.5l-10 -11v-447q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v447q-4 4 -11 11.5t-24 30.5t-30 46t-24 55t-11 60v450q0 2 0.5 5.5t4 12t8.5 15t14.5 12t22.5 5.5q20 0 32.5 -12.5t14.5 -24.5l3 -13v-350h100v350v5.5t2.5 12 t7 15t15 12t25.5 5.5q23 0 35.5 -12.5t13.5 -24.5l1 -13v-350h100v350q0 2 0.5 5.5t3 12t7 15t15 12t24.5 5.5z" />
+<glyph unicode="&#xe180;" d="M1200 1100v-56q-4 0 -11 -0.5t-24 -3t-30 -7.5t-24 -15t-11 -24v-888q0 -22 25 -34.5t50 -13.5l25 -2v-56h-400v56q75 0 87.5 6.5t12.5 43.5v394h-500v-394q0 -37 12.5 -43.5t87.5 -6.5v-56h-400v56q4 0 11 0.5t24 3t30 7.5t24 15t11 24v888q0 22 -25 34.5t-50 13.5 l-25 2v56h400v-56q-75 0 -87.5 -6.5t-12.5 -43.5v-394h500v394q0 37 -12.5 43.5t-87.5 6.5v56h400z" />
+<glyph unicode="&#xe181;" d="M675 1000h375q21 0 35.5 -14.5t14.5 -35.5v-150h-105l-295 -98v98l-200 200h-400l100 100h375zM100 900h300q41 0 70.5 -29.5t29.5 -70.5v-500q0 -41 -29.5 -70.5t-70.5 -29.5h-300q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5zM100 800v-200h300v200 h-300zM1100 535l-400 -133v163l400 133v-163zM100 500v-200h300v200h-300zM1100 398v-248q0 -21 -14.5 -35.5t-35.5 -14.5h-375l-100 -100h-375l-100 100h400l200 200h105z" />
+<glyph unicode="&#xe182;" d="M17 1007l162 162q17 17 40 14t37 -22l139 -194q14 -20 11 -44.5t-20 -41.5l-119 -118q102 -142 228 -268t267 -227l119 118q17 17 42.5 19t44.5 -12l192 -136q19 -14 22.5 -37.5t-13.5 -40.5l-163 -162q-3 -1 -9.5 -1t-29.5 2t-47.5 6t-62.5 14.5t-77.5 26.5t-90 42.5 t-101.5 60t-111 83t-119 108.5q-74 74 -133.5 150.5t-94.5 138.5t-60 119.5t-34.5 100t-15 74.5t-4.5 48z" />
+<glyph unicode="&#xe183;" d="M600 1100q92 0 175 -10.5t141.5 -27t108.5 -36.5t81.5 -40t53.5 -37t31 -27l9 -10v-200q0 -21 -14.5 -33t-34.5 -9l-202 34q-20 3 -34.5 20t-14.5 38v146q-141 24 -300 24t-300 -24v-146q0 -21 -14.5 -38t-34.5 -20l-202 -34q-20 -3 -34.5 9t-14.5 33v200q3 4 9.5 10.5 t31 26t54 37.5t80.5 39.5t109 37.5t141 26.5t175 10.5zM600 795q56 0 97 -9.5t60 -23.5t30 -28t12 -24l1 -10v-50l365 -303q14 -15 24.5 -40t10.5 -45v-212q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v212q0 20 10.5 45t24.5 40l365 303v50 q0 4 1 10.5t12 23t30 29t60 22.5t97 10z" />
+<glyph unicode="&#xe184;" d="M1100 700l-200 -200h-600l-200 200v500h200v-200h200v200h200v-200h200v200h200v-500zM250 400h700q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-12l137 -100h-950l137 100h-12q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM50 100h1100q21 0 35.5 -14.5 t14.5 -35.5v-50h-1200v50q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe185;" d="M700 1100h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-1000h300v1000q0 41 -29.5 70.5t-70.5 29.5zM1100 800h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-700h300v700q0 41 -29.5 70.5t-70.5 29.5zM400 0h-300v400q0 41 29.5 70.5t70.5 29.5h100q41 0 70.5 -29.5t29.5 -70.5v-400z " />
+<glyph unicode="&#xe186;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM500 700h-200v-100h200v-300h-300v100h200v100h-200v300h300v-100zM900 700v-300l-100 -100h-200v500h200z M700 700v-300h100v300h-100z" />
+<glyph unicode="&#xe187;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM500 300h-100v200h-100v-200h-100v500h100v-200h100v200h100v-500zM900 700v-300l-100 -100h-200v500h200z M700 700v-300h100v300h-100z" />
+<glyph unicode="&#xe188;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM500 700h-200v-300h200v-100h-300v500h300v-100zM900 700h-200v-300h200v-100h-300v500h300v-100z" />
+<glyph unicode="&#xe189;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM500 400l-300 150l300 150v-300zM900 550l-300 -150v300z" />
+<glyph unicode="&#xe190;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM900 300h-700v500h700v-500zM800 700h-130q-38 0 -66.5 -43t-28.5 -108t27 -107t68 -42h130v300zM300 700v-300 h130q41 0 68 42t27 107t-28.5 108t-66.5 43h-130z" />
+<glyph unicode="&#xe191;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM500 700h-200v-100h200v-300h-300v100h200v100h-200v300h300v-100zM900 300h-100v400h-100v100h200v-500z M700 300h-100v100h100v-100z" />
+<glyph unicode="&#xe192;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM300 700h200v-400h-300v500h100v-100zM900 300h-100v400h-100v100h200v-500zM300 600v-200h100v200h-100z M700 300h-100v100h100v-100z" />
+<glyph unicode="&#xe193;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM100 900v-700h900v700h-900zM500 500l-199 -200h-100v50l199 200v150h-200v100h300v-300zM900 300h-100v400h-100v100h200v-500zM701 300h-100 v100h100v-100z" />
+<glyph unicode="&#xe194;" d="M600 1191q120 0 229.5 -47t188.5 -126t126 -188.5t47 -229.5t-47 -229.5t-126 -188.5t-188.5 -126t-229.5 -47t-229.5 47t-188.5 126t-126 188.5t-47 229.5t47 229.5t126 188.5t188.5 126t229.5 47zM600 1021q-114 0 -211 -56.5t-153.5 -153.5t-56.5 -211t56.5 -211 t153.5 -153.5t211 -56.5t211 56.5t153.5 153.5t56.5 211t-56.5 211t-153.5 153.5t-211 56.5zM800 700h-300v-200h300v-100h-300l-100 100v200l100 100h300v-100z" />
+<glyph unicode="&#xe195;" d="M600 1191q120 0 229.5 -47t188.5 -126t126 -188.5t47 -229.5t-47 -229.5t-126 -188.5t-188.5 -126t-229.5 -47t-229.5 47t-188.5 126t-126 188.5t-47 229.5t47 229.5t126 188.5t188.5 126t229.5 47zM600 1021q-114 0 -211 -56.5t-153.5 -153.5t-56.5 -211t56.5 -211 t153.5 -153.5t211 -56.5t211 56.5t153.5 153.5t56.5 211t-56.5 211t-153.5 153.5t-211 56.5zM800 700v-100l-50 -50l100 -100v-50h-100l-100 100h-150v-100h-100v400h300zM500 700v-100h200v100h-200z" />
+<glyph unicode="&#xe197;" d="M503 1089q110 0 200.5 -59.5t134.5 -156.5q44 14 90 14q120 0 205 -86.5t85 -207t-85 -207t-205 -86.5h-128v250q0 21 -14.5 35.5t-35.5 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-250h-222q-80 0 -136 57.5t-56 136.5q0 69 43 122.5t108 67.5q-2 19 -2 37q0 100 49 185 t134 134t185 49zM525 500h150q10 0 17.5 -7.5t7.5 -17.5v-275h137q21 0 26 -11.5t-8 -27.5l-223 -244q-13 -16 -32 -16t-32 16l-223 244q-13 16 -8 27.5t26 11.5h137v275q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe198;" d="M502 1089q110 0 201 -59.5t135 -156.5q43 15 89 15q121 0 206 -86.5t86 -206.5q0 -99 -60 -181t-150 -110l-378 360q-13 16 -31.5 16t-31.5 -16l-381 -365h-9q-79 0 -135.5 57.5t-56.5 136.5q0 69 43 122.5t108 67.5q-2 19 -2 38q0 100 49 184.5t133.5 134t184.5 49.5z M632 467l223 -228q13 -16 8 -27.5t-26 -11.5h-137v-275q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v275h-137q-21 0 -26 11.5t8 27.5q199 204 223 228q19 19 31.5 19t32.5 -19z" />
+<glyph unicode="&#xe199;" d="M700 100v100h400l-270 300h170l-270 300h170l-300 333l-300 -333h170l-270 -300h170l-270 -300h400v-100h-50q-21 0 -35.5 -14.5t-14.5 -35.5v-50h400v50q0 21 -14.5 35.5t-35.5 14.5h-50z" />
+<glyph unicode="&#xe200;" d="M600 1179q94 0 167.5 -56.5t99.5 -145.5q89 -6 150.5 -71.5t61.5 -155.5q0 -61 -29.5 -112.5t-79.5 -82.5q9 -29 9 -55q0 -74 -52.5 -126.5t-126.5 -52.5q-55 0 -100 30v-251q21 0 35.5 -14.5t14.5 -35.5v-50h-300v50q0 21 14.5 35.5t35.5 14.5v251q-45 -30 -100 -30 q-74 0 -126.5 52.5t-52.5 126.5q0 18 4 38q-47 21 -75.5 65t-28.5 97q0 74 52.5 126.5t126.5 52.5q5 0 23 -2q0 2 -1 10t-1 13q0 116 81.5 197.5t197.5 81.5z" />
+<glyph unicode="&#xe201;" d="M1010 1010q111 -111 150.5 -260.5t0 -299t-150.5 -260.5q-83 -83 -191.5 -126.5t-218.5 -43.5t-218.5 43.5t-191.5 126.5q-111 111 -150.5 260.5t0 299t150.5 260.5q83 83 191.5 126.5t218.5 43.5t218.5 -43.5t191.5 -126.5zM476 1065q-4 0 -8 -1q-121 -34 -209.5 -122.5 t-122.5 -209.5q-4 -12 2.5 -23t18.5 -14l36 -9q3 -1 7 -1q23 0 29 22q27 96 98 166q70 71 166 98q11 3 17.5 13.5t3.5 22.5l-9 35q-3 13 -14 19q-7 4 -15 4zM512 920q-4 0 -9 -2q-80 -24 -138.5 -82.5t-82.5 -138.5q-4 -13 2 -24t19 -14l34 -9q4 -1 8 -1q22 0 28 21 q18 58 58.5 98.5t97.5 58.5q12 3 18 13.5t3 21.5l-9 35q-3 12 -14 19q-7 4 -15 4zM719.5 719.5q-49.5 49.5 -119.5 49.5t-119.5 -49.5t-49.5 -119.5t49.5 -119.5t119.5 -49.5t119.5 49.5t49.5 119.5t-49.5 119.5zM855 551q-22 0 -28 -21q-18 -58 -58.5 -98.5t-98.5 -57.5 q-11 -4 -17 -14.5t-3 -21.5l9 -35q3 -12 14 -19q7 -4 15 -4q4 0 9 2q80 24 138.5 82.5t82.5 138.5q4 13 -2.5 24t-18.5 14l-34 9q-4 1 -8 1zM1000 515q-23 0 -29 -22q-27 -96 -98 -166q-70 -71 -166 -98q-11 -3 -17.5 -13.5t-3.5 -22.5l9 -35q3 -13 14 -19q7 -4 15 -4 q4 0 8 1q121 34 209.5 122.5t122.5 209.5q4 12 -2.5 23t-18.5 14l-36 9q-3 1 -7 1z" />
+<glyph unicode="&#xe202;" d="M700 800h300v-380h-180v200h-340v-200h-380v755q0 10 7.5 17.5t17.5 7.5h575v-400zM1000 900h-200v200zM700 300h162l-212 -212l-212 212h162v200h100v-200zM520 0h-395q-10 0 -17.5 7.5t-7.5 17.5v395zM1000 220v-195q0 -10 -7.5 -17.5t-17.5 -7.5h-195z" />
+<glyph unicode="&#xe203;" d="M700 800h300v-520l-350 350l-550 -550v1095q0 10 7.5 17.5t17.5 7.5h575v-400zM1000 900h-200v200zM862 200h-162v-200h-100v200h-162l212 212zM480 0h-355q-10 0 -17.5 7.5t-7.5 17.5v55h380v-80zM1000 80v-55q0 -10 -7.5 -17.5t-17.5 -7.5h-155v80h180z" />
+<glyph unicode="&#xe204;" d="M1162 800h-162v-200h100l100 -100h-300v300h-162l212 212zM200 800h200q27 0 40 -2t29.5 -10.5t23.5 -30t7 -57.5h300v-100h-600l-200 -350v450h100q0 36 7 57.5t23.5 30t29.5 10.5t40 2zM800 400h240l-240 -400h-800l300 500h500v-100z" />
+<glyph unicode="&#xe205;" d="M650 1100h100q21 0 35.5 -14.5t14.5 -35.5v-50h50q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-300q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h50v50q0 21 14.5 35.5t35.5 14.5zM1000 850v150q41 0 70.5 -29.5t29.5 -70.5v-800 q0 -41 -29.5 -70.5t-70.5 -29.5h-600q-1 0 -20 4l246 246l-326 326v324q0 41 29.5 70.5t70.5 29.5v-150q0 -62 44 -106t106 -44h300q62 0 106 44t44 106zM412 250l-212 -212v162h-200v100h200v162z" />
+<glyph unicode="&#xe206;" d="M450 1100h100q21 0 35.5 -14.5t14.5 -35.5v-50h50q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-300q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h50v50q0 21 14.5 35.5t35.5 14.5zM800 850v150q41 0 70.5 -29.5t29.5 -70.5v-500 h-200v-300h200q0 -36 -7 -57.5t-23.5 -30t-29.5 -10.5t-40 -2h-600q-41 0 -70.5 29.5t-29.5 70.5v800q0 41 29.5 70.5t70.5 29.5v-150q0 -62 44 -106t106 -44h300q62 0 106 44t44 106zM1212 250l-212 -212v162h-200v100h200v162z" />
+<glyph unicode="&#xe209;" d="M658 1197l637 -1104q23 -38 7 -65.5t-60 -27.5h-1276q-44 0 -60 27.5t7 65.5l637 1104q22 39 54 39t54 -39zM704 800h-208q-20 0 -32 -14.5t-8 -34.5l58 -302q4 -20 21.5 -34.5t37.5 -14.5h54q20 0 37.5 14.5t21.5 34.5l58 302q4 20 -8 34.5t-32 14.5zM500 300v-100h200 v100h-200z" />
+<glyph unicode="&#xe210;" d="M425 1100h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5zM425 800h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5 t17.5 7.5zM825 800h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5zM25 500h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v150 q0 10 7.5 17.5t17.5 7.5zM425 500h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5zM825 500h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5 v150q0 10 7.5 17.5t17.5 7.5zM25 200h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5zM425 200h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5 t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5zM825 200h250q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-250q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe211;" d="M700 1200h100v-200h-100v-100h350q62 0 86.5 -39.5t-3.5 -94.5l-66 -132q-41 -83 -81 -134h-772q-40 51 -81 134l-66 132q-28 55 -3.5 94.5t86.5 39.5h350v100h-100v200h100v100h200v-100zM250 400h700q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-12l137 -100 h-950l138 100h-13q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM50 100h1100q21 0 35.5 -14.5t14.5 -35.5v-50h-1200v50q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe212;" d="M600 1300q40 0 68.5 -29.5t28.5 -70.5h-194q0 41 28.5 70.5t68.5 29.5zM443 1100h314q18 -37 18 -75q0 -8 -3 -25h328q41 0 44.5 -16.5t-30.5 -38.5l-175 -145h-678l-178 145q-34 22 -29 38.5t46 16.5h328q-3 17 -3 25q0 38 18 75zM250 700h700q21 0 35.5 -14.5 t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-150v-200l275 -200h-950l275 200v200h-150q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM50 100h1100q21 0 35.5 -14.5t14.5 -35.5v-50h-1200v50q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe213;" d="M600 1181q75 0 128 -53t53 -128t-53 -128t-128 -53t-128 53t-53 128t53 128t128 53zM602 798h46q34 0 55.5 -28.5t21.5 -86.5q0 -76 39 -183h-324q39 107 39 183q0 58 21.5 86.5t56.5 28.5h45zM250 400h700q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-13 l138 -100h-950l137 100h-12q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM50 100h1100q21 0 35.5 -14.5t14.5 -35.5v-50h-1200v50q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe214;" d="M600 1300q47 0 92.5 -53.5t71 -123t25.5 -123.5q0 -78 -55.5 -133.5t-133.5 -55.5t-133.5 55.5t-55.5 133.5q0 62 34 143l144 -143l111 111l-163 163q34 26 63 26zM602 798h46q34 0 55.5 -28.5t21.5 -86.5q0 -76 39 -183h-324q39 107 39 183q0 58 21.5 86.5t56.5 28.5h45 zM250 400h700q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-13l138 -100h-950l137 100h-12q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM50 100h1100q21 0 35.5 -14.5t14.5 -35.5v-50h-1200v50q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe215;" d="M600 1200l300 -161v-139h-300q0 -57 18.5 -108t50 -91.5t63 -72t70 -67.5t57.5 -61h-530q-60 83 -90.5 177.5t-30.5 178.5t33 164.5t87.5 139.5t126 96.5t145.5 41.5v-98zM250 400h700q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-13l138 -100h-950l137 100 h-12q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM50 100h1100q21 0 35.5 -14.5t14.5 -35.5v-50h-1200v50q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe216;" d="M600 1300q41 0 70.5 -29.5t29.5 -70.5v-78q46 -26 73 -72t27 -100v-50h-400v50q0 54 27 100t73 72v78q0 41 29.5 70.5t70.5 29.5zM400 800h400q54 0 100 -27t72 -73h-172v-100h200v-100h-200v-100h200v-100h-200v-100h200q0 -83 -58.5 -141.5t-141.5 -58.5h-400 q-83 0 -141.5 58.5t-58.5 141.5v400q0 83 58.5 141.5t141.5 58.5z" />
+<glyph unicode="&#xe218;" d="M150 1100h900q21 0 35.5 -14.5t14.5 -35.5v-500q0 -21 -14.5 -35.5t-35.5 -14.5h-900q-21 0 -35.5 14.5t-14.5 35.5v500q0 21 14.5 35.5t35.5 14.5zM125 400h950q10 0 17.5 -7.5t7.5 -17.5v-50q0 -10 -7.5 -17.5t-17.5 -7.5h-283l224 -224q13 -13 13 -31.5t-13 -32 t-31.5 -13.5t-31.5 13l-88 88h-524l-87 -88q-13 -13 -32 -13t-32 13.5t-13 32t13 31.5l224 224h-289q-10 0 -17.5 7.5t-7.5 17.5v50q0 10 7.5 17.5t17.5 7.5zM541 300l-100 -100h324l-100 100h-124z" />
+<glyph unicode="&#xe219;" d="M200 1100h800q83 0 141.5 -58.5t58.5 -141.5v-200h-100q0 41 -29.5 70.5t-70.5 29.5h-250q-41 0 -70.5 -29.5t-29.5 -70.5h-100q0 41 -29.5 70.5t-70.5 29.5h-250q-41 0 -70.5 -29.5t-29.5 -70.5h-100v200q0 83 58.5 141.5t141.5 58.5zM100 600h1000q41 0 70.5 -29.5 t29.5 -70.5v-300h-1200v300q0 41 29.5 70.5t70.5 29.5zM300 100v-50q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v50h200zM1100 100v-50q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v50h200z" />
+<glyph unicode="&#xe221;" d="M480 1165l682 -683q31 -31 31 -75.5t-31 -75.5l-131 -131h-481l-517 518q-32 31 -32 75.5t32 75.5l295 296q31 31 75.5 31t76.5 -31zM108 794l342 -342l303 304l-341 341zM250 100h800q21 0 35.5 -14.5t14.5 -35.5v-50h-900v50q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe223;" d="M1057 647l-189 506q-8 19 -27.5 33t-40.5 14h-400q-21 0 -40.5 -14t-27.5 -33l-189 -506q-8 -19 1.5 -33t30.5 -14h625v-150q0 -21 14.5 -35.5t35.5 -14.5t35.5 14.5t14.5 35.5v150h125q21 0 30.5 14t1.5 33zM897 0h-595v50q0 21 14.5 35.5t35.5 14.5h50v50 q0 21 14.5 35.5t35.5 14.5h48v300h200v-300h47q21 0 35.5 -14.5t14.5 -35.5v-50h50q21 0 35.5 -14.5t14.5 -35.5v-50z" />
+<glyph unicode="&#xe224;" d="M900 800h300v-575q0 -10 -7.5 -17.5t-17.5 -7.5h-375v591l-300 300v84q0 10 7.5 17.5t17.5 7.5h375v-400zM1200 900h-200v200zM400 600h300v-575q0 -10 -7.5 -17.5t-17.5 -7.5h-650q-10 0 -17.5 7.5t-7.5 17.5v950q0 10 7.5 17.5t17.5 7.5h375v-400zM700 700h-200v200z " />
+<glyph unicode="&#xe225;" d="M484 1095h195q75 0 146 -32.5t124 -86t89.5 -122.5t48.5 -142q18 -14 35 -20q31 -10 64.5 6.5t43.5 48.5q10 34 -15 71q-19 27 -9 43q5 8 12.5 11t19 -1t23.5 -16q41 -44 39 -105q-3 -63 -46 -106.5t-104 -43.5h-62q-7 -55 -35 -117t-56 -100l-39 -234q-3 -20 -20 -34.5 t-38 -14.5h-100q-21 0 -33 14.5t-9 34.5l12 70q-49 -14 -91 -14h-195q-24 0 -65 8l-11 -64q-3 -20 -20 -34.5t-38 -14.5h-100q-21 0 -33 14.5t-9 34.5l26 157q-84 74 -128 175l-159 53q-19 7 -33 26t-14 40v50q0 21 14.5 35.5t35.5 14.5h124q11 87 56 166l-111 95 q-16 14 -12.5 23.5t24.5 9.5h203q116 101 250 101zM675 1000h-250q-10 0 -17.5 -7.5t-7.5 -17.5v-50q0 -10 7.5 -17.5t17.5 -7.5h250q10 0 17.5 7.5t7.5 17.5v50q0 10 -7.5 17.5t-17.5 7.5z" />
+<glyph unicode="&#xe226;" d="M641 900l423 247q19 8 42 2.5t37 -21.5l32 -38q14 -15 12.5 -36t-17.5 -34l-139 -120h-390zM50 1100h106q67 0 103 -17t66 -71l102 -212h823q21 0 35.5 -14.5t14.5 -35.5v-50q0 -21 -14 -40t-33 -26l-737 -132q-23 -4 -40 6t-26 25q-42 67 -100 67h-300q-62 0 -106 44 t-44 106v200q0 62 44 106t106 44zM173 928h-80q-19 0 -28 -14t-9 -35v-56q0 -51 42 -51h134q16 0 21.5 8t5.5 24q0 11 -16 45t-27 51q-18 28 -43 28zM550 727q-32 0 -54.5 -22.5t-22.5 -54.5t22.5 -54.5t54.5 -22.5t54.5 22.5t22.5 54.5t-22.5 54.5t-54.5 22.5zM130 389 l152 130q18 19 34 24t31 -3.5t24.5 -17.5t25.5 -28q28 -35 50.5 -51t48.5 -13l63 5l48 -179q13 -61 -3.5 -97.5t-67.5 -79.5l-80 -69q-47 -40 -109 -35.5t-103 51.5l-130 151q-40 47 -35.5 109.5t51.5 102.5zM380 377l-102 -88q-31 -27 2 -65l37 -43q13 -15 27.5 -19.5 t31.5 6.5l61 53q19 16 14 49q-2 20 -12 56t-17 45q-11 12 -19 14t-23 -8z" />
+<glyph unicode="&#xe227;" d="M625 1200h150q10 0 17.5 -7.5t7.5 -17.5v-109q79 -33 131 -87.5t53 -128.5q1 -46 -15 -84.5t-39 -61t-46 -38t-39 -21.5l-17 -6q6 0 15 -1.5t35 -9t50 -17.5t53 -30t50 -45t35.5 -64t14.5 -84q0 -59 -11.5 -105.5t-28.5 -76.5t-44 -51t-49.5 -31.5t-54.5 -16t-49.5 -6.5 t-43.5 -1v-75q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v75h-100v-75q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v75h-175q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5h75v600h-75q-10 0 -17.5 7.5t-7.5 17.5v150 q0 10 7.5 17.5t17.5 7.5h175v75q0 10 7.5 17.5t17.5 7.5h150q10 0 17.5 -7.5t7.5 -17.5v-75h100v75q0 10 7.5 17.5t17.5 7.5zM400 900v-200h263q28 0 48.5 10.5t30 25t15 29t5.5 25.5l1 10q0 4 -0.5 11t-6 24t-15 30t-30 24t-48.5 11h-263zM400 500v-200h363q28 0 48.5 10.5 t30 25t15 29t5.5 25.5l1 10q0 4 -0.5 11t-6 24t-15 30t-30 24t-48.5 11h-363z" />
+<glyph unicode="&#xe230;" d="M212 1198h780q86 0 147 -61t61 -147v-416q0 -51 -18 -142.5t-36 -157.5l-18 -66q-29 -87 -93.5 -146.5t-146.5 -59.5h-572q-82 0 -147 59t-93 147q-8 28 -20 73t-32 143.5t-20 149.5v416q0 86 61 147t147 61zM600 1045q-70 0 -132.5 -11.5t-105.5 -30.5t-78.5 -41.5 t-57 -45t-36 -41t-20.5 -30.5l-6 -12l156 -243h560l156 243q-2 5 -6 12.5t-20 29.5t-36.5 42t-57 44.5t-79 42t-105 29.5t-132.5 12zM762 703h-157l195 261z" />
+<glyph unicode="&#xe231;" d="M475 1300h150q103 0 189 -86t86 -189v-500q0 -41 -42 -83t-83 -42h-450q-41 0 -83 42t-42 83v500q0 103 86 189t189 86zM700 300v-225q0 -21 -27 -48t-48 -27h-150q-21 0 -48 27t-27 48v225h300z" />
+<glyph unicode="&#xe232;" d="M475 1300h96q0 -150 89.5 -239.5t239.5 -89.5v-446q0 -41 -42 -83t-83 -42h-450q-41 0 -83 42t-42 83v500q0 103 86 189t189 86zM700 300v-225q0 -21 -27 -48t-48 -27h-150q-21 0 -48 27t-27 48v225h300z" />
+<glyph unicode="&#xe233;" d="M1294 767l-638 -283l-378 170l-78 -60v-224l100 -150v-199l-150 148l-150 -149v200l100 150v250q0 4 -0.5 10.5t0 9.5t1 8t3 8t6.5 6l47 40l-147 65l642 283zM1000 380l-350 -166l-350 166v147l350 -165l350 165v-147z" />
+<glyph unicode="&#xe234;" d="M250 800q62 0 106 -44t44 -106t-44 -106t-106 -44t-106 44t-44 106t44 106t106 44zM650 800q62 0 106 -44t44 -106t-44 -106t-106 -44t-106 44t-44 106t44 106t106 44zM1050 800q62 0 106 -44t44 -106t-44 -106t-106 -44t-106 44t-44 106t44 106t106 44z" />
+<glyph unicode="&#xe235;" d="M550 1100q62 0 106 -44t44 -106t-44 -106t-106 -44t-106 44t-44 106t44 106t106 44zM550 700q62 0 106 -44t44 -106t-44 -106t-106 -44t-106 44t-44 106t44 106t106 44zM550 300q62 0 106 -44t44 -106t-44 -106t-106 -44t-106 44t-44 106t44 106t106 44z" />
+<glyph unicode="&#xe236;" d="M125 1100h950q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-950q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5zM125 700h950q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-950q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5 t17.5 7.5zM125 300h950q10 0 17.5 -7.5t7.5 -17.5v-150q0 -10 -7.5 -17.5t-17.5 -7.5h-950q-10 0 -17.5 7.5t-7.5 17.5v150q0 10 7.5 17.5t17.5 7.5z" />
+<glyph unicode="&#xe237;" d="M350 1200h500q162 0 256 -93.5t94 -256.5v-500q0 -165 -93.5 -257.5t-256.5 -92.5h-500q-165 0 -257.5 92.5t-92.5 257.5v500q0 165 92.5 257.5t257.5 92.5zM900 1000h-600q-41 0 -70.5 -29.5t-29.5 -70.5v-600q0 -41 29.5 -70.5t70.5 -29.5h600q41 0 70.5 29.5 t29.5 70.5v600q0 41 -29.5 70.5t-70.5 29.5zM350 900h500q21 0 35.5 -14.5t14.5 -35.5v-300q0 -21 -14.5 -35.5t-35.5 -14.5h-500q-21 0 -35.5 14.5t-14.5 35.5v300q0 21 14.5 35.5t35.5 14.5zM400 800v-200h400v200h-400z" />
+<glyph unicode="&#xe238;" d="M150 1100h1000q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-50v-200h50q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-50v-200h50q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-50v-200h50q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5 t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5h50v200h-50q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5h50v200h-50q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5h50v200h-50q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe239;" d="M650 1187q87 -67 118.5 -156t0 -178t-118.5 -155q-87 66 -118.5 155t0 178t118.5 156zM300 800q124 0 212 -88t88 -212q-124 0 -212 88t-88 212zM1000 800q0 -124 -88 -212t-212 -88q0 124 88 212t212 88zM300 500q124 0 212 -88t88 -212q-124 0 -212 88t-88 212z M1000 500q0 -124 -88 -212t-212 -88q0 124 88 212t212 88zM700 199v-144q0 -21 -14.5 -35.5t-35.5 -14.5t-35.5 14.5t-14.5 35.5v142q40 -4 43 -4q17 0 57 6z" />
+<glyph unicode="&#xe240;" d="M745 878l69 19q25 6 45 -12l298 -295q11 -11 15 -26.5t-2 -30.5q-5 -14 -18 -23.5t-28 -9.5h-8q1 0 1 -13q0 -29 -2 -56t-8.5 -62t-20 -63t-33 -53t-51 -39t-72.5 -14h-146q-184 0 -184 288q0 24 10 47q-20 4 -62 4t-63 -4q11 -24 11 -47q0 -288 -184 -288h-142 q-48 0 -84.5 21t-56 51t-32 71.5t-16 75t-3.5 68.5q0 13 2 13h-7q-15 0 -27.5 9.5t-18.5 23.5q-6 15 -2 30.5t15 25.5l298 296q20 18 46 11l76 -19q20 -5 30.5 -22.5t5.5 -37.5t-22.5 -31t-37.5 -5l-51 12l-182 -193h891l-182 193l-44 -12q-20 -5 -37.5 6t-22.5 31t6 37.5 t31 22.5z" />
+<glyph unicode="&#xe241;" d="M1200 900h-50q0 21 -4 37t-9.5 26.5t-18 17.5t-22 11t-28.5 5.5t-31 2t-37 0.5h-200v-850q0 -22 25 -34.5t50 -13.5l25 -2v-100h-400v100q4 0 11 0.5t24 3t30 7t24 15t11 24.5v850h-200q-25 0 -37 -0.5t-31 -2t-28.5 -5.5t-22 -11t-18 -17.5t-9.5 -26.5t-4 -37h-50v300 h1000v-300zM500 450h-25q0 15 -4 24.5t-9 14.5t-17 7.5t-20 3t-25 0.5h-100v-425q0 -11 12.5 -17.5t25.5 -7.5h12v-50h-200v50q50 0 50 25v425h-100q-17 0 -25 -0.5t-20 -3t-17 -7.5t-9 -14.5t-4 -24.5h-25v150h500v-150z" />
+<glyph unicode="&#xe242;" d="M1000 300v50q-25 0 -55 32q-14 14 -25 31t-16 27l-4 11l-289 747h-69l-300 -754q-18 -35 -39 -56q-9 -9 -24.5 -18.5t-26.5 -14.5l-11 -5v-50h273v50q-49 0 -78.5 21.5t-11.5 67.5l69 176h293l61 -166q13 -34 -3.5 -66.5t-55.5 -32.5v-50h312zM412 691l134 342l121 -342 h-255zM1100 150v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5z" />
+<glyph unicode="&#xe243;" d="M50 1200h1100q21 0 35.5 -14.5t14.5 -35.5v-1100q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v1100q0 21 14.5 35.5t35.5 14.5zM611 1118h-70q-13 0 -18 -12l-299 -753q-17 -32 -35 -51q-18 -18 -56 -34q-12 -5 -12 -18v-50q0 -8 5.5 -14t14.5 -6 h273q8 0 14 6t6 14v50q0 8 -6 14t-14 6q-55 0 -71 23q-10 14 0 39l63 163h266l57 -153q11 -31 -6 -55q-12 -17 -36 -17q-8 0 -14 -6t-6 -14v-50q0 -8 6 -14t14 -6h313q8 0 14 6t6 14v50q0 7 -5.5 13t-13.5 7q-17 0 -42 25q-25 27 -40 63h-1l-288 748q-5 12 -19 12zM639 611 h-197l103 264z" />
+<glyph unicode="&#xe244;" d="M1200 1100h-1200v100h1200v-100zM50 1000h400q21 0 35.5 -14.5t14.5 -35.5v-900q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v900q0 21 14.5 35.5t35.5 14.5zM650 1000h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400 q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM700 900v-300h300v300h-300z" />
+<glyph unicode="&#xe245;" d="M50 1200h400q21 0 35.5 -14.5t14.5 -35.5v-900q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v900q0 21 14.5 35.5t35.5 14.5zM650 700h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400 q0 21 14.5 35.5t35.5 14.5zM700 600v-300h300v300h-300zM1200 0h-1200v100h1200v-100z" />
+<glyph unicode="&#xe246;" d="M50 1000h400q21 0 35.5 -14.5t14.5 -35.5v-350h100v150q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-150h100v-100h-100v-150q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v150h-100v-350q0 -21 -14.5 -35.5t-35.5 -14.5h-400 q-21 0 -35.5 14.5t-14.5 35.5v800q0 21 14.5 35.5t35.5 14.5zM700 700v-300h300v300h-300z" />
+<glyph unicode="&#xe247;" d="M100 0h-100v1200h100v-1200zM250 1100h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM300 1000v-300h300v300h-300zM250 500h900q21 0 35.5 -14.5t14.5 -35.5v-400 q0 -21 -14.5 -35.5t-35.5 -14.5h-900q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe248;" d="M600 1100h150q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-150v-100h450q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-900q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5h350v100h-150q-21 0 -35.5 14.5 t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5h150v100h100v-100zM400 1000v-300h300v300h-300z" />
+<glyph unicode="&#xe249;" d="M1200 0h-100v1200h100v-1200zM550 1100h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM600 1000v-300h300v300h-300zM50 500h900q21 0 35.5 -14.5t14.5 -35.5v-400 q0 -21 -14.5 -35.5t-35.5 -14.5h-900q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5z" />
+<glyph unicode="&#xe250;" d="M865 565l-494 -494q-23 -23 -41 -23q-14 0 -22 13.5t-8 38.5v1000q0 25 8 38.5t22 13.5q18 0 41 -23l494 -494q14 -14 14 -35t-14 -35z" />
+<glyph unicode="&#xe251;" d="M335 635l494 494q29 29 50 20.5t21 -49.5v-1000q0 -41 -21 -49.5t-50 20.5l-494 494q-14 14 -14 35t14 35z" />
+<glyph unicode="&#xe252;" d="M100 900h1000q41 0 49.5 -21t-20.5 -50l-494 -494q-14 -14 -35 -14t-35 14l-494 494q-29 29 -20.5 50t49.5 21z" />
+<glyph unicode="&#xe253;" d="M635 865l494 -494q29 -29 20.5 -50t-49.5 -21h-1000q-41 0 -49.5 21t20.5 50l494 494q14 14 35 14t35 -14z" />
+<glyph unicode="&#xe254;" d="M700 741v-182l-692 -323v221l413 193l-413 193v221zM1200 0h-800v200h800v-200z" />
+<glyph unicode="&#xe255;" d="M1200 900h-200v-100h200v-100h-300v300h200v100h-200v100h300v-300zM0 700h50q0 21 4 37t9.5 26.5t18 17.5t22 11t28.5 5.5t31 2t37 0.5h100v-550q0 -22 -25 -34.5t-50 -13.5l-25 -2v-100h400v100q-4 0 -11 0.5t-24 3t-30 7t-24 15t-11 24.5v550h100q25 0 37 -0.5t31 -2 t28.5 -5.5t22 -11t18 -17.5t9.5 -26.5t4 -37h50v300h-800v-300z" />
+<glyph unicode="&#xe256;" d="M800 700h-50q0 21 -4 37t-9.5 26.5t-18 17.5t-22 11t-28.5 5.5t-31 2t-37 0.5h-100v-550q0 -22 25 -34.5t50 -14.5l25 -1v-100h-400v100q4 0 11 0.5t24 3t30 7t24 15t11 24.5v550h-100q-25 0 -37 -0.5t-31 -2t-28.5 -5.5t-22 -11t-18 -17.5t-9.5 -26.5t-4 -37h-50v300 h800v-300zM1100 200h-200v-100h200v-100h-300v300h200v100h-200v100h300v-300z" />
+<glyph unicode="&#xe257;" d="M701 1098h160q16 0 21 -11t-7 -23l-464 -464l464 -464q12 -12 7 -23t-21 -11h-160q-13 0 -23 9l-471 471q-7 8 -7 18t7 18l471 471q10 9 23 9z" />
+<glyph unicode="&#xe258;" d="M339 1098h160q13 0 23 -9l471 -471q7 -8 7 -18t-7 -18l-471 -471q-10 -9 -23 -9h-160q-16 0 -21 11t7 23l464 464l-464 464q-12 12 -7 23t21 11z" />
+<glyph unicode="&#xe259;" d="M1087 882q11 -5 11 -21v-160q0 -13 -9 -23l-471 -471q-8 -7 -18 -7t-18 7l-471 471q-9 10 -9 23v160q0 16 11 21t23 -7l464 -464l464 464q12 12 23 7z" />
+<glyph unicode="&#xe260;" d="M618 993l471 -471q9 -10 9 -23v-160q0 -16 -11 -21t-23 7l-464 464l-464 -464q-12 -12 -23 -7t-11 21v160q0 13 9 23l471 471q8 7 18 7t18 -7z" />
+<glyph unicode="&#xf8ff;" d="M1000 1200q0 -124 -88 -212t-212 -88q0 124 88 212t212 88zM450 1000h100q21 0 40 -14t26 -33l79 -194q5 1 16 3q34 6 54 9.5t60 7t65.5 1t61 -10t56.5 -23t42.5 -42t29 -64t5 -92t-19.5 -121.5q-1 -7 -3 -19.5t-11 -50t-20.5 -73t-32.5 -81.5t-46.5 -83t-64 -70 t-82.5 -50q-13 -5 -42 -5t-65.5 2.5t-47.5 2.5q-14 0 -49.5 -3.5t-63 -3.5t-43.5 7q-57 25 -104.5 78.5t-75 111.5t-46.5 112t-26 90l-7 35q-15 63 -18 115t4.5 88.5t26 64t39.5 43.5t52 25.5t58.5 13t62.5 2t59.5 -4.5t55.5 -8l-147 192q-12 18 -5.5 30t27.5 12z" />
+<glyph unicode="&#x1f511;" d="M250 1200h600q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-150v-500l-255 -178q-19 -9 -32 -1t-13 29v650h-150q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM400 1100v-100h300v100h-300z" />
+<glyph unicode="&#x1f6aa;" d="M250 1200h750q39 0 69.5 -40.5t30.5 -84.5v-933l-700 -117v950l600 125h-700v-1000h-100v1025q0 23 15.5 49t34.5 26zM500 525v-100l100 20v100z" />
+</font>
+</defs></svg> 
\ No newline at end of file
diff --git a/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.ttf b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.ttf
new file mode 100644
index 0000000000..1413fc609a
Binary files /dev/null and b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.ttf differ
diff --git a/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.woff b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.woff
new file mode 100644
index 0000000000..9e612858f8
Binary files /dev/null and b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.woff differ
diff --git a/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.woff2 b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.woff2
new file mode 100644
index 0000000000..64539b54c3
Binary files /dev/null and b/packages/learn/static/bootstrap3/fonts/glyphicons-halflings-regular.woff2 differ
diff --git a/packages/learn/utils/blockNameify.js b/packages/learn/utils/blockNameify.js
new file mode 100644
index 0000000000..c9103f77a4
--- /dev/null
+++ b/packages/learn/utils/blockNameify.js
@@ -0,0 +1,41 @@
+const preFormattedBlockNames = {
+  'api-projects': 'API Projects',
+  'basic-css': 'Basic CSS',
+  'basic-html-and-html5': 'Basic HTML and HTML5',
+  'css-flexbox': 'CSS Flexbox',
+  'css-grid': 'CSS Grid',
+  devops: 'DevOps',
+  es6: 'ES6',
+  'information-security-with-helmetjs': 'Information Security with HelmetJS',
+  jquery: 'jQuery',
+  'json-apis-and-ajax': 'JSON APIs and Ajax',
+  'mongodb-and-mongoose': 'MongoDB and Mongoose',
+  'the-dom': 'The DOM'
+};
+
+const noFormatting = [
+  'and',
+  'for',
+  'of',
+  'the',
+  'up',
+  'with'
+];
+
+exports.blockNameify = function blockNameify(phrase) {
+  const preFormatted = preFormattedBlockNames[phrase] || '';
+  if (preFormatted) {
+    return preFormatted;
+  }
+  return phrase.split('-')
+    .map((word) => {
+      if (noFormatting.indexOf(word) !== -1) {
+        return word;
+      }
+      if (word === 'javascript') {
+        return 'JavaScript';
+      }
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+    .join(' ');
+};
diff --git a/packages/learn/utils/challengeTypes.js b/packages/learn/utils/challengeTypes.js
new file mode 100644
index 0000000000..abee41dc03
--- /dev/null
+++ b/packages/learn/utils/challengeTypes.js
@@ -0,0 +1,63 @@
+const html = 0;
+const js = 1;
+const backend = 2;
+const zipline = 3;
+const frontEndProject = 3;
+const backEndProject = 4;
+const bonfire = 5;
+const modern = 6;
+const step = 7;
+const quiz = 8;
+const invalid = 9;
+
+exports.challengeTypes = {
+  html,
+  js,
+  backend,
+  zipline,
+  frontEndProject,
+  backEndProject,
+  bonfire,
+  modern,
+  step,
+  quiz,
+  invalid
+};
+
+// turn challengeType to file ext
+exports.pathsMap = {
+  [html]: 'html',
+  [js]: 'js',
+  [bonfire]: 'js'
+};
+// determine the component to view for each challenge
+exports.viewTypes = {
+  [html]: 'classic',
+  [js]: 'classic',
+  [bonfire]: 'classic',
+  [frontEndProject]: 'project',
+  [backEndProject]: 'project',
+  [modern]: 'modern',
+  [step]: 'step',
+  [quiz]: 'quiz',
+  [backend]: 'backend'
+};
+
+// determine the type of submit function to use for the challenge on completion
+exports.submitTypes = {
+  [html]: 'tests',
+  [js]: 'tests',
+  [bonfire]: 'tests',
+  // requires just a single url
+  // like codepen.com/my-project
+  [frontEndProject]: 'project.frontEnd',
+  // requires two urls
+  // a hosted URL where the app is running live
+  // project code url like GitHub
+  [backEndProject]: 'project.backEnd',
+
+  [step]: 'step',
+  [quiz]: 'quiz',
+  [backend]: 'backend',
+  [modern]: 'tests'
+};
diff --git a/packages/learn/utils/index.js b/packages/learn/utils/index.js
new file mode 100644
index 0000000000..20df6882cf
--- /dev/null
+++ b/packages/learn/utils/index.js
@@ -0,0 +1,24 @@
+exports.dasherize = function dasherize(name) {
+  return ('' + name)
+    .toLowerCase()
+    .replace(/\s/g, '-')
+    .replace(/[^a-z0-9\-\.]/gi, '')
+    .replace(/\:/g, '');
+};
+
+exports.nameify = function nameify(str) {
+  return ('' + str).replace(/[^a-zA-Z0-9\s]/g, '').replace(/\:/g, '');
+};
+
+exports.unDasherize = function unDasherize(name) {
+  return (
+    ('' + name)
+      // replace dash with space
+      .replace(/\-/g, ' ')
+      // strip nonalphanumarics chars except whitespace
+      .replace(/[^a-zA-Z\d\s]/g, '')
+      .trim()
+  );
+};
+
+exports.descriptionRegex = /\<blockquote|\<ol|\<h4|\<table/;
diff --git a/packages/learn/utils/stateManagment.js b/packages/learn/utils/stateManagment.js
new file mode 100644
index 0000000000..203f8b6c04
--- /dev/null
+++ b/packages/learn/utils/stateManagment.js
@@ -0,0 +1,9 @@
+export function createTypes(types, ns) {
+  return types.reduce(
+    (types, action) => ({
+      ...types,
+      [action]: `${ns}.${action}`
+    }),
+    {}
+  );
+}
diff --git a/packages/learn/webpack-frame-runner.js b/packages/learn/webpack-frame-runner.js
new file mode 100644
index 0000000000..35fe9517c2
--- /dev/null
+++ b/packages/learn/webpack-frame-runner.js
@@ -0,0 +1,72 @@
+const webpack = require('webpack');
+const path = require('path');
+const UglifyPlugin = require('uglifyjs-webpack-plugin');
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  entry: './src/client/frame-runner.js',
+  devtool: __DEV__ ? 'inline-source-map' : 'source-map',
+  node: {
+    // Mock Node.js modules that Babel require()s but that we don't
+    // particularly care about.
+    fs: 'empty',
+    module: 'empty',
+    net: 'empty'
+  },
+  output: {
+    filename: __DEV__ ? 'frame-runner.js' : 'frame-runner-[hash].js',
+    path: path.join(__dirname, './static/js')
+  },
+  stats: {
+    // Examine all modules
+    maxModules: Infinity,
+    // Display bailout reasons
+    optimizationBailout: true
+  },
+  module: {
+    rules: [{
+      test: /\.jsx?$/,
+      include: [ path.join(__dirname, 'client/') ],
+      use: {
+        loader: 'babel-loader',
+        options: {
+          babelrc: false,
+          presets: [
+            [ 'es2015', { modules: false }],
+            [ 'stage-3' ]
+          ],
+          plugins: [
+            'transform-runtime',
+            'lodash'
+          ]
+        }
+      }
+    }]
+  },
+  externals: {
+    rxjs: 'Rx'
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(__DEV__ ? 'development' : 'production')
+      },
+      __DEVTOOLS__: !__DEV__
+    }),
+    // Use browser version of visionmedia-debug
+    new webpack.NormalModuleReplacementPlugin(
+      /debug\/node/,
+      'debug/src/browser'
+    )
+  ]
+};
+
+module.exports.plugins.push(
+  new UglifyPlugin({
+    test: /\.js($|\?)/i,
+    cache: true,
+    sourceMap: true
+  })
+);
+
diff --git a/packages/learn/yarn.lock b/packages/learn/yarn.lock
index 93a4e1654c..f2a0249f0d 100644
--- a/packages/learn/yarn.lock
+++ b/packages/learn/yarn.lock
@@ -2,6 +2,82 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@7.0.0-beta.42", "@babel/code-frame@^7.0.0-beta.40":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.42.tgz#a9c83233fa7cd06b39dc77adbb908616ff4f1962"
+  dependencies:
+    "@babel/highlight" "7.0.0-beta.42"
+
+"@babel/generator@7.0.0-beta.42":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.42.tgz#777bb50f39c94a7e57f73202d833141f8159af33"
+  dependencies:
+    "@babel/types" "7.0.0-beta.42"
+    jsesc "^2.5.1"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
+"@babel/helper-function-name@7.0.0-beta.42":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.42.tgz#b38b8f4f85168d1812c543dd700b5d549b0c4658"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.42"
+    "@babel/template" "7.0.0-beta.42"
+    "@babel/types" "7.0.0-beta.42"
+
+"@babel/helper-get-function-arity@7.0.0-beta.42":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.42.tgz#ad072e32f912c033053fc80478169aeadc22191e"
+  dependencies:
+    "@babel/types" "7.0.0-beta.42"
+
+"@babel/helper-split-export-declaration@7.0.0-beta.42":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.42.tgz#0d0d5254220a9cc4e7e226240306b939dc210ee7"
+  dependencies:
+    "@babel/types" "7.0.0-beta.42"
+
+"@babel/highlight@7.0.0-beta.42":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.42.tgz#a502a1c0d6f99b2b0e81d468a1b0c0e81e3f3623"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/template@7.0.0-beta.42":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.42"
+    "@babel/types" "7.0.0-beta.42"
+    babylon "7.0.0-beta.42"
+    lodash "^4.2.0"
+
+"@babel/traverse@^7.0.0-beta.40":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.42.tgz#f4bf4d1e33d41baf45205e2d0463591d57326285"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.42"
+    "@babel/generator" "7.0.0-beta.42"
+    "@babel/helper-function-name" "7.0.0-beta.42"
+    "@babel/helper-split-export-declaration" "7.0.0-beta.42"
+    "@babel/types" "7.0.0-beta.42"
+    babylon "7.0.0-beta.42"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.42", "@babel/types@^7.0.0-beta.40":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.42.tgz#1e2118767684880f6963801b272fd2b3348efacc"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@types/configstore@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6"
@@ -39,12 +115,12 @@
   resolved "https://registry.yarnpkg.com/@types/mkdirp/-/mkdirp-0.3.29.tgz#7f2ad7ec55f914482fc9b1ec4bb1ae6028d46066"
 
 "@types/node@*":
-  version "9.4.7"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.7.tgz#57d81cd98719df2c9de118f2d5f3b1120dcd7275"
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.0.tgz#d3480ee666df9784b1001a1872a2f6ccefb6c2d7"
 
 "@types/node@^7.0.11":
-  version "7.0.56"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.56.tgz#b6b659049191822be43c14610c1785d4b9cddecf"
+  version "7.0.57"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.57.tgz#eed149b2c75cdbd7b9823c3fd64ecddbdc68ed9c"
 
 "@types/react-router-dom@^4.2.2":
   version "4.2.5"
@@ -88,18 +164,40 @@ accepts@^1.3.0, accepts@~1.3.4, accepts@~1.3.5:
     mime-types "~2.1.18"
     negotiator "0.6.1"
 
-acorn@^3.0.0:
+acorn-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.0, acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
+acorn@^5.5.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+
 address@1.0.3, address@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
 
+adler32@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/adler32/-/adler32-0.1.7.tgz#5052acb02c02650d7d58bb8c4ec057be77135690"
+
 after@0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
 
+ajv-keywords@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+
+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
+
 ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -107,7 +205,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.1.0:
+ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -116,6 +214,15 @@ ajv@^5.1.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+ajv@^6.1.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.4.0.tgz#d3aff78e9277549771daf0164cff48482b754fc6"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+    uri-js "^3.0.2"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -139,8 +246,8 @@ ansi-align@^2.0.0:
     string-width "^2.0.0"
 
 ansi-escapes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
 
 ansi-html@0.0.7:
   version "0.0.7"
@@ -179,7 +286,7 @@ anymatch@^1.3.0:
     micromatch "^2.1.5"
     normalize-path "^2.0.0"
 
-aproba@^1.0.3:
+aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
 
@@ -244,6 +351,13 @@ array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
 
+array-includes@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.7.0"
+
 array-map@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
@@ -278,6 +392,10 @@ arraybuffer.slice@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
 
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
 asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -308,6 +426,10 @@ assert@^1.1.1:
   dependencies:
     util "0.10.3"
 
+assertion-error@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
+
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@@ -343,8 +465,8 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
 atob@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.0.tgz#ab2b150e51d7b122b9efc8d7340c06b6c41076bc"
 
 autoprefixer@^6.0.2, autoprefixer@^6.3.1:
   version "6.7.7"
@@ -422,6 +544,17 @@ babel-core@^6.24.1, babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.6"
 
+babel-eslint@^8.0.1, babel-eslint@^8.2.2:
+  version "8.2.2"
+  resolved "http://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.2.tgz#1102273354c6f0b29b4ea28a65f97d122296b68b"
+  dependencies:
+    "@babel/code-frame" "^7.0.0-beta.40"
+    "@babel/traverse" "^7.0.0-beta.40"
+    "@babel/types" "^7.0.0-beta.40"
+    babylon "^7.0.0-beta.40"
+    eslint-scope "~3.7.1"
+    eslint-visitor-keys "^1.0.0"
+
 babel-generator@^6.24.1, babel-generator@^6.26.0:
   version "6.26.1"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
@@ -1146,13 +1279,17 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
+babel-standalone@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.26.0.tgz#15fb3d35f2c456695815ebf1ed96fe7f015b6886"
+
 babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.9.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
@@ -1186,6 +1323,10 @@ babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
+babylon@7.0.0-beta.42, babylon@^7.0.0-beta.40:
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.42.tgz#67cfabcd4f3ec82999d29031ccdea89d0ba99657"
+
 babylon@^6.17.3, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -1320,7 +1461,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@3.5.1, bluebird@^3.0.5, bluebird@^3.3.4, bluebird@^3.5.0:
+bluebird@3.5.1, bluebird@^3.0.5, bluebird@^3.3.4, bluebird@^3.5.0, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -1384,6 +1525,10 @@ brace-expansion@^1.0.0, brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
+
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -1497,6 +1642,10 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
+bson@~1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/bson/-/bson-1.0.6.tgz#444db59ddd4c24f0cb063aabdc5c8c7b0ceca912"
+
 buffer-alloc-unsafe@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-0.1.1.tgz#ffe1f67551dd055737de253337bfe853dfab1a6a"
@@ -1509,13 +1658,21 @@ buffer-alloc@^1.1.0:
     buffer-fill "^0.1.0"
 
 buffer-fill@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-0.1.0.tgz#ca9470e8d4d1b977fd7543f4e2ab6a7dc95101a8"
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-0.1.1.tgz#76d825c4d6e50e06b7a31eb520c04d08cc235071"
+
+buffer-from@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
 
 buffer-peek-stream@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-peek-stream/-/buffer-peek-stream-1.0.1.tgz#53b47570a1347787c5bad4ca2ca3021f9d8b3cfd"
 
+buffer-shims@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -1528,7 +1685,7 @@ buffer@^4.3.0, buffer@^4.9.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-builtin-modules@^1.0.0:
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
@@ -1540,6 +1697,24 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
+cacache@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
+  dependencies:
+    bluebird "^3.5.1"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^2.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^5.2.4"
+    unique-filename "^1.1.0"
+    y18n "^4.0.0"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -1558,10 +1733,20 @@ call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
 
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  dependencies:
+    callsites "^0.2.0"
+
 callsite@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
 
+callsites@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+
 camelcase@4.1.0, camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -1584,12 +1769,12 @@ caniuse-api@^1.5.2, caniuse-api@^1.5.3:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000819"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000819.tgz#c3b7dd559e5e6d63d5dcaa62bac6bd04c7619709"
+  version "1.0.30000821"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000821.tgz#3fcdc67c446a94a9cdd848248a4e3e54b2da7419"
 
 caniuse-lite@^1.0.30000792:
-  version "1.0.30000819"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000819.tgz#aabee5fd15a080febab6ae5d30c9ea15f4c6d4e2"
+  version "1.0.30000821"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000821.tgz#0f3223f1e048ed96451c56ca6cf197058c42cb93"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -1606,6 +1791,21 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
+chai@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.1.2.tgz#0f64584ba642f0f2ace2806279f4f06ca23ad73c"
+  dependencies:
+    assertion-error "^1.0.1"
+    check-error "^1.0.1"
+    deep-eql "^3.0.0"
+    get-func-name "^2.0.0"
+    pathval "^1.0.0"
+    type-detect "^4.0.0"
+
+chain-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+
 chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1632,7 +1832,7 @@ chalk@2.3.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chalk@2.3.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.2:
+chalk@2.3.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
   dependencies:
@@ -1648,6 +1848,10 @@ charenc@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
 
+check-error@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
+
 cheerio@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
@@ -1669,6 +1873,17 @@ cheerio@^0.22.0:
     lodash.reject "^4.4.0"
     lodash.some "^4.4.0"
 
+cheerio@^1.0.0-rc.2:
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.0"
+    entities "~1.1.1"
+    htmlparser2 "^3.9.1"
+    lodash "^4.15.0"
+    parse5 "^3.0.1"
+
 chokidar@^1.0.0, chokidar@^1.6.1, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1705,6 +1920,10 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+circular-json@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+
 clap@^1.0.9:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
@@ -1720,6 +1939,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -1779,6 +2002,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codemirror@^5.36.0:
+  version "5.36.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.36.0.tgz#1172ad9dc298056c06e0b34e5ccd23825ca15b40"
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -1829,6 +2056,10 @@ colormin@^1.0.5:
     css-color-names "0.0.4"
     has "^1.0.1"
 
+colors@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
+
 colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -1853,6 +2084,10 @@ commander@^2.11.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
+commander@~2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
 common-tags@0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-0.1.1.tgz#d893486ecc6df22cffe6c393c88c12f71e7e8871"
@@ -1907,9 +2142,18 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
+concat-stream@^1.5.0, concat-stream@^1.6.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 configstore@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
   dependencies:
     dot-prop "^4.1.0"
     graceful-fs "^4.1.2"
@@ -1936,6 +2180,10 @@ constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
 
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+
 content-disposition@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
@@ -1960,6 +2208,17 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
@@ -1980,6 +2239,10 @@ core-js@^1.0.0, core-js@^1.2.6:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
 core-js@^2.4.0, core-js@^2.5.0:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.4.tgz#f2c8bf181f2a80b92f360121429ce63a2f0aeae0"
+
+core-js@^2.5.1:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
 
@@ -2193,6 +2456,10 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+
 d@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -2221,7 +2488,7 @@ death@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/death/-/death-1.1.0.tgz#01aa9c401edd92750514470b8266390c66c67318"
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, debug@~2.6.4, debug@~2.6.6:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9, debug@~2.6.4, debug@~2.6.6:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -2247,6 +2514,12 @@ decompress-response@^3.2.0:
   dependencies:
     mimic-response "^1.0.0"
 
+deep-eql@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
+  dependencies:
+    type-detect "^4.0.0"
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2255,6 +2528,17 @@ deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -2278,6 +2562,18 @@ defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
 
+del@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
 del@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
@@ -2383,13 +2679,30 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+discontinuous-range@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
+
+doctrine@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+doctrine@^2.0.2, doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  dependencies:
+    esutils "^2.0.2"
+
 dom-converter@~0.1:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
   dependencies:
     utila "~0.3"
 
-dom-helpers@^3.2.1:
+dom-helpers@^3.2.0, dom-helpers@^3.2.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
 
@@ -2462,6 +2775,10 @@ dotenv@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
 
+dotenv@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -2470,6 +2787,15 @@ duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
+duplexify@^3.4.2, duplexify@^3.5.3:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.4.tgz#4bb46c1796eabebeec4ca9a2e66b808cb7a3d8b4"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -2481,8 +2807,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
-  version "1.3.40"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf"
+  version "1.3.41"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.41.tgz#7e33643e00cd85edfd17e04194f6d00e73737235"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -2567,6 +2893,45 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+enzyme-adapter-react-15@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-15/-/enzyme-adapter-react-15-1.0.5.tgz#99f9a03ff2c2303e517342935798a6bdfbb75fac"
+  dependencies:
+    enzyme-adapter-utils "^1.1.0"
+    lodash "^4.17.4"
+    object.assign "^4.0.4"
+    object.values "^1.0.4"
+    prop-types "^15.5.10"
+
+enzyme-adapter-utils@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz#d6c85756826c257a8544d362cc7a67e97ea698c7"
+  dependencies:
+    lodash "^4.17.4"
+    object.assign "^4.0.4"
+    prop-types "^15.6.0"
+
+enzyme@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
+  dependencies:
+    cheerio "^1.0.0-rc.2"
+    function.prototype.name "^1.0.3"
+    has "^1.0.1"
+    is-boolean-object "^1.0.0"
+    is-callable "^1.1.3"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-subset "^0.1.1"
+    lodash "^4.17.4"
+    object-inspect "^1.5.0"
+    object-is "^1.0.1"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
+    object.values "^1.0.4"
+    raf "^3.4.0"
+    rst-selector-parser "^2.2.3"
+
 eol@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/eol/-/eol-0.8.1.tgz#defc3224990c7eca73bb34461a56cf9dc24761d0"
@@ -2575,7 +2940,7 @@ err-code@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
 
-errno@^0.1.3:
+errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
   dependencies:
@@ -2599,9 +2964,27 @@ error-stack-parser@^2.0.0:
   dependencies:
     stackframe "^1.0.3"
 
+es-abstract@^1.6.1, es-abstract@^1.7.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
 es5-ext@^0.10.12, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.41"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.41.tgz#bab3e982d750f0112f0cb9e6abed72c59eb33eb2"
+  version "0.10.42"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.42.tgz#8c07dd33af04d5dcd1310b5cef13bea63a89ba8d"
   dependencies:
     es6-iterator "~2.0.3"
     es6-symbol "~3.1.1"
@@ -2615,6 +2998,10 @@ es6-iterator@~2.0.3:
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
+es6-promise@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.2.1.tgz#ec56233868032909207170c39448e24449dd1fc4"
+
 es6-promise@^4.1.0:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
@@ -2641,6 +3028,112 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
+eslint-config-freecodecamp@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-freecodecamp/-/eslint-config-freecodecamp-1.1.1.tgz#345c8702e339db1f0034116727b6f7f3cf96a9f0"
+  dependencies:
+    babel-eslint "^8.0.1"
+    eslint "^4.10.0"
+    eslint-plugin-import "^2.8.0"
+    eslint-plugin-prefer-object-spread "^1.2.1"
+    eslint-plugin-react "^7.4.0"
+
+eslint-import-resolver-node@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
+  dependencies:
+    debug "^2.6.9"
+    resolve "^1.5.0"
+
+eslint-module-utils@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.1.1.tgz#abaec824177613b8a95b299639e1b6facf473449"
+  dependencies:
+    debug "^2.6.8"
+    pkg-dir "^1.0.0"
+
+eslint-plugin-import@^2.8.0, eslint-plugin-import@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.9.0.tgz#26002efbfca5989b7288ac047508bd24f217b169"
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.6.8"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.1"
+    eslint-module-utils "^2.1.1"
+    has "^1.0.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.3"
+    read-pkg-up "^2.0.0"
+
+eslint-plugin-prefer-object-spread@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-object-spread/-/eslint-plugin-prefer-object-spread-1.2.1.tgz#27fb91853690cceb3ae6101d9c8aecc6a67a402c"
+
+eslint-plugin-react@^7.4.0, eslint-plugin-react@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160"
+  dependencies:
+    doctrine "^2.0.2"
+    has "^1.0.1"
+    jsx-ast-utils "^2.0.1"
+    prop-types "^15.6.0"
+
+eslint-scope@^3.7.1, eslint-scope@~3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+
+eslint@^4.10.0, eslint@^4.19.1:
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300"
+  dependencies:
+    ajv "^5.3.0"
+    babel-code-frame "^6.22.0"
+    chalk "^2.1.0"
+    concat-stream "^1.6.0"
+    cross-spawn "^5.1.0"
+    debug "^3.1.0"
+    doctrine "^2.1.0"
+    eslint-scope "^3.7.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^3.5.4"
+    esquery "^1.0.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^11.0.1"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    inquirer "^3.0.6"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.9.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.2"
+    pluralize "^7.0.0"
+    progress "^2.0.0"
+    regexpp "^1.0.1"
+    require-uncached "^1.0.3"
+    semver "^5.3.0"
+    strip-ansi "^4.0.0"
+    strip-json-comments "~2.0.1"
+    table "4.0.2"
+    text-table "~0.2.0"
+
 esniff@^1.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/esniff/-/esniff-1.1.0.tgz#c66849229f91464dede2e0d40201ed6abf65f2ac"
@@ -2648,6 +3141,13 @@ esniff@^1.1:
     d "1"
     es5-ext "^0.10.12"
 
+espree@^3.5.4:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  dependencies:
+    acorn "^5.5.0"
+    acorn-jsx "^3.0.0"
+
 esprima@^2.6.0:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
@@ -2656,6 +3156,22 @@ esprima@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
 
+esquery@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  dependencies:
+    estraverse "^4.0.0"
+
+esrecurse@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  dependencies:
+    estraverse "^4.1.0"
+
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -2926,6 +3442,13 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-entry-cache@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
 file-loader@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.9.0.tgz#1d2daddd424ce6d1b07cfe3f79731bed3617ab42"
@@ -2983,6 +3506,14 @@ find-cache-dir@^0.1.1:
     mkdirp "^0.5.1"
     pkg-dir "^1.0.0"
 
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
 find-node-modules@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/find-node-modules/-/find-node-modules-1.0.4.tgz#b6deb3cccb699c87037677bcede2c5f5862b2550"
@@ -2997,7 +3528,7 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.0.0:
+find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
   dependencies:
@@ -3035,6 +3566,15 @@ flagged-respawn@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.0.tgz#4e79ae9b2eb38bf86b3bb56bf3e0a56aa5fcabd7"
 
+flat-cache@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
+  dependencies:
+    circular-json "^0.3.1"
+    del "^2.0.2"
+    graceful-fs "^4.1.2"
+    write "^0.2.1"
+
 flat@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/flat/-/flat-2.0.1.tgz#70e29188a74be0c3c89409eed1fa9577907ae32f"
@@ -3045,6 +3585,13 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+flush-write-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3061,6 +3608,10 @@ for-own@^1.0.0:
   dependencies:
     for-in "^1.0.1"
 
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -3103,6 +3654,13 @@ friendly-errors-webpack-plugin@^1.6.1:
     error-stack-parser "^2.0.0"
     string-length "^1.0.1"
 
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
 front-matter@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.3.0.tgz#7203af896ce357ee04e2aa45169ea91ed7f67504"
@@ -3133,6 +3691,15 @@ fs-readdir-recursive@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
 
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -3161,26 +3728,38 @@ fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2:
+function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-gatsby-1-config-css-modules@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/gatsby-1-config-css-modules/-/gatsby-1-config-css-modules-1.0.10.tgz#56967add247213d56167715539229afe39d4ccf6"
+function.prototype.name@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    is-callable "^1.1.3"
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+
+gatsby-1-config-css-modules@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/gatsby-1-config-css-modules/-/gatsby-1-config-css-modules-1.0.11.tgz#5a102c6b11f9a6963b3892ecc959511e1688e525"
   dependencies:
     babel-runtime "^6.26.0"
 
-gatsby-1-config-extract-plugin@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/gatsby-1-config-extract-plugin/-/gatsby-1-config-extract-plugin-1.0.2.tgz#2ca0779f212009d06e444cb084d182f957b7190c"
+gatsby-1-config-extract-plugin@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/gatsby-1-config-extract-plugin/-/gatsby-1-config-extract-plugin-1.0.3.tgz#9e2c962d4563c95fa29da83e3d93017129af0115"
   dependencies:
     babel-runtime "^6.26.0"
     extract-text-webpack-plugin "^1.0.1"
 
-gatsby-cli@^1.1.47:
-  version "1.1.47"
-  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.47.tgz#75474ca674ea7f4e018825f3ad4ec070c915a7cd"
+gatsby-cli@^1.1.49:
+  version "1.1.49"
+  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.49.tgz#3114c562cb2739ebce20719be38e2535978cd896"
   dependencies:
     babel-code-frame "^6.26.0"
     babel-runtime "^6.26.0"
@@ -3210,6 +3789,16 @@ gatsby-link@^1.6.39:
     prop-types "^15.5.8"
     ric "^1.3.0"
 
+gatsby-link@^1.6.40:
+  version "1.6.40"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.40.tgz#e60ab2b36452c7478f1359a7f03f7e0fc35cd847"
+  dependencies:
+    "@types/history" "^4.6.2"
+    "@types/react-router-dom" "^4.2.2"
+    babel-runtime "^6.26.0"
+    prop-types "^15.5.8"
+    ric "^1.3.0"
+
 gatsby-module-loader@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/gatsby-module-loader/-/gatsby-module-loader-1.0.11.tgz#35f269456f6a6d85c693bdc2b3b3b3432987f55b"
@@ -3217,12 +3806,25 @@ gatsby-module-loader@^1.0.11:
     babel-runtime "^6.26.0"
     loader-utils "^0.2.16"
 
+gatsby-plugin-google-fonts@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-0.0.4.tgz#dc1402a71f27c3ae6caee10777d10adadf74bd7c"
+
 gatsby-plugin-react-helmet@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-2.0.8.tgz#26928bfd38f6828f479d76393839523ddf85b005"
   dependencies:
     babel-runtime "^6.26.0"
 
+gatsby-plugin-react-next@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-next/-/gatsby-plugin-react-next-1.0.11.tgz#715cab5ea86f64664f96af3e7f3640eecd9de5e3"
+  dependencies:
+    babel-runtime "^6.26.0"
+    core-js "^2.5.1"
+    react "^16.0.0"
+    react-dom "^16.0.0"
+
 gatsby-react-router-scroll@^1.0.14:
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.14.tgz#7e3b59c2266772030c6bfeaa8914c71dd3c12c59"
@@ -3247,6 +3849,14 @@ gatsby-source-filesystem@^1.5.27:
     slash "^1.0.0"
     valid-url "^1.0.9"
 
+gatsby-source-mongodb@^1.5.19:
+  version "1.5.19"
+  resolved "https://registry.yarnpkg.com/gatsby-source-mongodb/-/gatsby-source-mongodb-1.5.19.tgz#c9f9a7fef439c93ca7857f2cd8974ae1f4ca9cbc"
+  dependencies:
+    babel-runtime "^6.26.0"
+    lodash "^4.17.4"
+    mongodb "^2.2.30"
+
 gatsby-transformer-json@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/gatsby-transformer-json/-/gatsby-transformer-json-1.0.16.tgz#e25c19d9f59fbe69034eb3695eecddf0da4710b3"
@@ -3254,9 +3864,9 @@ gatsby-transformer-json@^1.0.16:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
 
-gatsby@^1.9.238:
-  version "1.9.239"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.239.tgz#ce5f111ac066da7354c01bc132a78f2466ece4ab"
+gatsby@^1.9.243:
+  version "1.9.243"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.243.tgz#13b7ec57627c2a4c10fa09d3a7a369cc502ecaf9"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"
@@ -3296,10 +3906,10 @@ gatsby@^1.9.238:
     friendly-errors-webpack-plugin "^1.6.1"
     front-matter "^2.1.0"
     fs-extra "^4.0.1"
-    gatsby-1-config-css-modules "^1.0.10"
-    gatsby-1-config-extract-plugin "^1.0.2"
-    gatsby-cli "^1.1.47"
-    gatsby-link "^1.6.39"
+    gatsby-1-config-css-modules "^1.0.11"
+    gatsby-1-config-extract-plugin "^1.0.3"
+    gatsby-cli "^1.1.49"
+    gatsby-link "^1.6.40"
     gatsby-module-loader "^1.0.11"
     gatsby-react-router-scroll "^1.0.14"
     glob "^7.1.1"
@@ -3395,6 +4005,14 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
+get-func-name@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
+
+get-node-dimensions@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
+
 get-params@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/get-params/-/get-params-0.1.2.tgz#bae0dfaba588a0c60d7834c0d8dc2ff60eeef2fe"
@@ -3417,6 +4035,10 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gitbook-plugin-github@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/gitbook-plugin-github/-/gitbook-plugin-github-2.0.0.tgz#5166e763cfcc402d432880b7a6c85c1c54b56a8d"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -3519,10 +4141,25 @@ global@^4.3.0:
     min-document "^2.19.0"
     process "~0.5.1"
 
+globals@^11.0.1, globals@^11.1.0:
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.4.0.tgz#b85c793349561c16076a3c13549238a27945f1bc"
+
 globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -3663,6 +4300,10 @@ has-symbol-support-x@^1.4.1:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
 
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+
 has-to-string-tag-x@^1.2.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
@@ -3770,7 +4411,7 @@ hoek@4.x.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
-hoist-non-react-statics@^2.3.0:
+hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
 
@@ -3881,8 +4522,16 @@ icss-replace-symbols@^1.1.0:
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
 
 ieee754@^1.1.4:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.10.tgz#719a6f7b026831e64bdb838b0de1bb0029bbf716"
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.11.tgz#c16384ffe00f5b7835824e67b6f2bd44a5229455"
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+
+ignore@^3.3.3:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
 immutable@~3.7.6:
   version "3.7.6"
@@ -3923,7 +4572,7 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-inquirer@3.3.0, inquirer@^3.0.1:
+inquirer@3.3.0, inquirer@^3.0.1, inquirer@^3.0.6:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
   dependencies:
@@ -3950,7 +4599,7 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
-invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
+invariant@^2.0.0, invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -4001,6 +4650,10 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
+
 is-buffer@^1.1.5, is-buffer@~1.1.1, is-buffer@~1.1.2:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -4011,6 +4664,10 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
 is-ci@^1.0.10:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
@@ -4029,6 +4686,10 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -4118,6 +4779,10 @@ is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
 
+is-number-object@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
+
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
@@ -4153,8 +4818,8 @@ is-path-cwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
 
 is-path-in-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
   dependencies:
     is-path-inside "^1.0.0"
 
@@ -4190,6 +4855,12 @@ is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
 
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
 is-relative-url@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-relative-url/-/is-relative-url-2.0.0.tgz#72902d7fe04b3d4792e7db15f9db84b7204c9cef"
@@ -4208,6 +4879,10 @@ is-relative@^1.0.0:
   dependencies:
     is-unc-path "^1.0.0"
 
+is-resolvable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+
 is-retry-allowed@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
@@ -4220,12 +4895,24 @@ is-stream@1.1.0, is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+is-string@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
+
+is-subset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
+
 is-svg@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
   dependencies:
     html-comment-regex "^1.1.0"
 
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4350,7 +5037,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.10.0, js-yaml@^3.5.2:
+js-yaml@^3.10.0, js-yaml@^3.5.2, js-yaml@^3.9.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -4376,6 +5063,10 @@ jsesc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
 
+jsesc@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe"
+
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
@@ -4392,6 +5083,10 @@ json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
 
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+
 json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
@@ -4494,6 +5189,16 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jsx-ast-utils@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
+  dependencies:
+    array-includes "^3.0.3"
+
+keycode@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.1.0, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -4534,6 +5239,13 @@ leven@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
 
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
 liftoff@^2.2.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-2.5.0.tgz#2009291bb31cea861bbf10a7c15a28caf75c31ec"
@@ -4594,9 +5306,9 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.2.1:
-  version "4.17.7"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.7.tgz#db240a3252c3dd8360201ac9feef91ac977ea856"
+lodash-es@^4.17.4, lodash-es@^4.17.5, lodash-es@^4.2.1:
+  version "4.17.8"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.8.tgz#6fa8c8c5d337481df0bdf1c0d899d42473121e45"
 
 lodash-id@^0.14.0:
   version "0.14.0"
@@ -4634,6 +5346,10 @@ lodash.flatten@^4.2.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
 
+lodash.flattendeep@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
+
 lodash.foreach@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
@@ -4691,6 +5407,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -4703,7 +5423,7 @@ lodash@3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@4, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
+lodash@4, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -4721,6 +5441,10 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
+loop-protect@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/loop-protect/-/loop-protect-2.1.6.tgz#03840f79591121c37a53a87fb9aff2841e488c2d"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
@@ -4744,10 +5468,10 @@ lowdb@^0.16.2:
     steno "^0.4.1"
 
 lowercase-keys@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
 
-lru-cache@^4.0.1:
+lru-cache@^4.0.1, lru-cache@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.2.tgz#45234b2e6e2f2b33da125624c4664929a0224c3f"
   dependencies:
@@ -4889,8 +5613,8 @@ micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
     regex-cache "^0.4.2"
 
 micromatch@^3.0.3, micromatch@^3.0.4:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.9.tgz#15dc93175ae39e52e93087847096effc73efcf89"
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   dependencies:
     arr-diff "^4.0.0"
     array-unique "^0.3.2"
@@ -4904,7 +5628,7 @@ micromatch@^3.0.3, micromatch@^3.0.4:
     object.pick "^1.3.0"
     regex-not "^1.0.0"
     snapdragon "^0.8.1"
-    to-regex "^3.0.1"
+    to-regex "^3.0.2"
 
 miller-rabin@^4.0.0:
   version "4.0.1"
@@ -4981,6 +5705,21 @@ minimist@~0.0.1:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
 
+mississippi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^2.0.1"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
 mitt@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.1.3.tgz#528c506238a05dce11cd914a741ea2cc332da9b8"
@@ -5002,6 +5741,45 @@ moment@2.x.x, moment@^2.16.0:
   version "2.21.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
 
+mongodb-core@2.1.19:
+  version "2.1.19"
+  resolved "https://registry.yarnpkg.com/mongodb-core/-/mongodb-core-2.1.19.tgz#00fbd5e5a3573763b9171cfd844e60a8f2a3a18b"
+  dependencies:
+    bson "~1.0.4"
+    require_optional "~1.0.0"
+
+mongodb-core@3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mongodb-core/-/mongodb-core-3.0.5.tgz#38d722f2beb99075e628939dad73f355d002d982"
+  dependencies:
+    bson "~1.0.4"
+    require_optional "^1.0.1"
+
+mongodb@^2.2.30:
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-2.2.35.tgz#cd1b5af8a9463e3f9a787fa5b3d05565579730f9"
+  dependencies:
+    es6-promise "3.2.1"
+    mongodb-core "2.1.19"
+    readable-stream "2.2.7"
+
+mongodb@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-3.0.5.tgz#1a3abe6bfdecaee3f35986e1669903b8564a4909"
+  dependencies:
+    mongodb-core "3.0.5"
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
 mri@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.0.tgz#5c0a3f29c8ccffbbb1ec941dcec09d71fa32f36a"
@@ -5039,10 +5817,23 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
 ncp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
 
+nearley@^2.7.10:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.13.0.tgz#6e7b0f4e68bfc3e74c99eaef2eda39e513143439"
+  dependencies:
+    nomnom "~1.6.2"
+    railroad-diagrams "^1.0.0"
+    randexp "0.4.6"
+    semver "^5.4.1"
+
 negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
@@ -5152,6 +5943,13 @@ node-version@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.1.0.tgz#f437d7ba407e65e2c4eaef8887b1718ba523d4f0"
 
+nomnom@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.6.2.tgz#84a66a260174408fc5b77a18f888eccc44fb6971"
+  dependencies:
+    colors "0.5.x"
+    underscore "~1.4.4"
+
 noms@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
@@ -5255,6 +6053,18 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-inspect@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.5.0.tgz#9d876c11e40f485c79215670281b767488f9bfe3"
+
+object-is@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
+
+object-keys@^1.0.11, object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
 object-path@^0.11.2:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
@@ -5265,6 +6075,15 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
+object.assign@^4.0.4, object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
 object.defaults@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object.defaults/-/object.defaults-1.1.0.tgz#3a7f868334b407dea06da16d88d5cd29e435fecf"
@@ -5274,6 +6093,15 @@ object.defaults@^1.1.0:
     for-own "^1.0.0"
     isobject "^3.0.0"
 
+object.entries@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.4.tgz#1bf9a4dd2288f5b33f3a993d257661f05d161a5f"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
 object.map@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object.map/-/object.map-1.0.1.tgz#cf83e59dc8fcc0ad5f4250e1f78b3b81bd801d37"
@@ -5294,6 +6122,15 @@ object.pick@^1.2.0, object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
+object.values@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -5353,6 +6190,17 @@ optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
+optionator@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
 original@>=0.0.5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
@@ -5455,6 +6303,14 @@ pako@~1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
 
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
 parse-asn1@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
@@ -5492,6 +6348,12 @@ parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
 
+parse5@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
+  dependencies:
+    "@types/node" "*"
+
 parseqs@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -5534,7 +6396,7 @@ path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 
-path-is-inside@1.0.2, path-is-inside@^1.0.1:
+path-is-inside@1.0.2, path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
@@ -5586,6 +6448,10 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
+pathval@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
+
 pbkdf2-compat@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
@@ -5649,6 +6515,12 @@ pkg-dir@^1.0.0:
   dependencies:
     find-up "^1.0.0"
 
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
 pkg-resolve@^0.1.7:
   version "0.1.14"
   resolved "https://registry.yarnpkg.com/pkg-resolve/-/pkg-resolve-0.1.14.tgz#329b2e76ccbb372e22e6a3a41cb30ab0457836ba"
@@ -5667,6 +6539,10 @@ pleeease-filters@^3.0.0:
     onecolor "~2.4.0"
     postcss "^5.0.4"
 
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -6166,13 +7042,17 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
     supports-color "^3.2.3"
 
 postcss@^6.0.1:
-  version "6.0.20"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.20.tgz#686107e743a12d5530cb68438c590d5b2bf72c3c"
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.21.tgz#8265662694eddf9e9a5960db6da33c39e4cd069d"
   dependencies:
     chalk "^2.3.2"
     source-map "^0.6.1"
     supports-color "^5.3.0"
 
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
 prepend-http@^1.0.0, prepend-http@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -6200,6 +7080,10 @@ private@^0.1.6, private@^0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
 
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
 process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
@@ -6212,19 +7096,33 @@ process@~0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
 
+progress@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
+
 promise-each@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/promise-each/-/promise-each-2.2.0.tgz#3353174eff2694481037e04e01f77aa0fb6d1b60"
   dependencies:
     any-promise "^0.1.0"
 
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+
 promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
+prop-types-extra@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.0.1.tgz#a57bd4810e82d27a3ff4317ecc1b4ad005f79a82"
+  dependencies:
+    warning "^3.0.0"
+
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -6273,11 +7171,26 @@ pump@^1.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
+pump@^2.0.0, pump@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.4.0.tgz#80b7c5df7e24153d03f0e7ac8a05a5d068bd07fb"
+  dependencies:
+    duplexify "^3.5.3"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
 
-punycode@2.x.x:
+punycode@2.x.x, punycode@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
 
@@ -6320,6 +7233,23 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
+raf@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
+  dependencies:
+    performance-now "^2.1.0"
+
+railroad-diagrams@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
+
+randexp@0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
+  dependencies:
+    discontinuous-range "1.0.0"
+    ret "~0.1.10"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -6366,6 +7296,27 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-bootstrap@^0.32.1:
+  version "0.32.1"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.32.1.tgz#60624c1b48a39d773ef6cce6421a4f33ecc166bb"
+  dependencies:
+    babel-runtime "^6.11.6"
+    classnames "^2.2.5"
+    dom-helpers "^3.2.0"
+    invariant "^2.2.1"
+    keycode "^2.1.2"
+    prop-types "^15.5.10"
+    prop-types-extra "^1.0.1"
+    react-overlays "^0.8.0"
+    react-prop-types "^0.4.0"
+    react-transition-group "^2.0.0"
+    uncontrollable "^4.1.0"
+    warning "^3.0.0"
+
+react-codemirror2@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-4.2.1.tgz#4ad3c5c60ebbcb34880f961721b51527324ec021"
+
 react-deep-force-update@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
@@ -6402,6 +7353,15 @@ react-dom@^15.6.0:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-dom@^16.0.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react-error-overlay@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
@@ -6425,12 +7385,61 @@ react-hot-loader@^3.0.0-beta.6:
     redbox-react "^1.3.6"
     source-map "^0.6.1"
 
+react-is@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.1.tgz#ee66e6d8283224a83b3030e110056798488359ba"
+
+react-measure@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-measure/-/react-measure-2.0.2.tgz#072a9a5fafc01dfbadc1fa5fb09fc351037f636c"
+  dependencies:
+    get-node-dimensions "^1.2.0"
+    prop-types "^15.5.10"
+    resize-observer-polyfill "^1.4.2"
+
+react-overlays@^0.8.0:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.8.3.tgz#fad65eea5b24301cca192a169f5dddb0b20d3ac5"
+  dependencies:
+    classnames "^2.2.5"
+    dom-helpers "^3.2.1"
+    prop-types "^15.5.10"
+    prop-types-extra "^1.0.1"
+    react-transition-group "^2.2.0"
+    warning "^3.0.0"
+
+react-prop-types@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0"
+  dependencies:
+    warning "^3.0.0"
+
 react-proxy@^3.0.0-alpha.0:
   version "3.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
   dependencies:
     lodash "^4.6.1"
 
+react-redux@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    invariant "^2.0.0"
+    lodash "^4.17.5"
+    lodash-es "^4.17.5"
+    loose-envify "^1.1.0"
+    prop-types "^15.6.0"
+
+react-reflex@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-reflex/-/react-reflex-2.2.1.tgz#d0d1ab4512fa8e16fbef6ce1f095f6fa434a6251"
+  dependencies:
+    babel-runtime "^6.23.0"
+    lodash.throttle "^4.1.1"
+    prop-types "^15.5.8"
+    react-measure "^2.0.2"
+
 react-router-dom@^4.1.1:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -6442,6 +7451,14 @@ react-router-dom@^4.1.1:
     react-router "^4.2.0"
     warning "^3.0.0"
 
+react-router-redux@^5.0.0-alpha.9:
+  version "5.0.0-alpha.9"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-5.0.0-alpha.9.tgz#825431516e0e6f1fd93b8807f6bd595e23ec3d10"
+  dependencies:
+    history "^4.7.2"
+    prop-types "^15.6.0"
+    react-router "^4.2.0"
+
 react-router@^4.1.1, react-router@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986"
@@ -6461,6 +7478,26 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-test-renderer@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.1.tgz#d9257936d8535bd40f57f3d5a84e7b0452fb17f2"
+  dependencies:
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+    react-is "^16.3.1"
+
+react-transition-group@^2.0.0, react-transition-group@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
+  dependencies:
+    chain-function "^1.0.0"
+    classnames "^2.2.5"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.8"
+    warning "^3.0.0"
+
 react@^15.6.0:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
@@ -6471,6 +7508,15 @@ react@^15.6.0:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react@^16.0.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -6513,16 +7559,7 @@ read@^1.0.7:
   dependencies:
     mute-stream "~0.0.4"
 
-readable-stream@1.0, readable-stream@~1.0.31:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.3.3, readable-stream@^2.3.5:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.5.tgz#b4f85003a938cbb6ecbce2a124fb1012bd1a838d"
   dependencies:
@@ -6534,6 +7571,27 @@ readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable
     string_decoder "~1.0.3"
     util-deprecate "~1.0.1"
 
+readable-stream@1.0, readable-stream@~1.0.31:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@2.2.7:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.7.tgz#07057acbe2467b22042d36f98c5ad507054e95b1"
+  dependencies:
+    buffer-shims "~1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~1.0.0"
+    util-deprecate "~1.0.1"
+
 readdir-enhanced@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/readdir-enhanced/-/readdir-enhanced-1.5.2.tgz#61463048690ac6a455b75b62fa78a88f8dc85e53"
@@ -6586,6 +7644,19 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+reduce-reducers@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.1.2.tgz#fa1b4718bc5292a71ddd1e5d839c9bea9770f14b"
+
+redux-actions@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-2.3.0.tgz#4e9967d86594b8c235bab6e08960b5c185f296d3"
+  dependencies:
+    invariant "^2.2.1"
+    lodash "^4.13.1"
+    lodash-es "^4.17.4"
+    reduce-reducers "^0.1.0"
+
 redux-devtools-instrument@^1.3.3:
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/redux-devtools-instrument/-/redux-devtools-instrument-1.8.3.tgz#c510d67ab4e5e4525acd6e410c25ab46b85aca7c"
@@ -6593,7 +7664,13 @@ redux-devtools-instrument@^1.3.3:
     lodash "^4.2.0"
     symbol-observable "^1.0.2"
 
-redux@^3.6.0:
+redux-observable@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/redux-observable/-/redux-observable-0.18.0.tgz#48de1f35554b7ba23a88b18379ca1c93f5124197"
+  dependencies:
+    gitbook-plugin-github "^2.0.0"
+
+redux@^3.6.0, redux@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
   dependencies:
@@ -6635,6 +7712,10 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexpp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.0.1.tgz#d857c3a741dce075c2848dcb019a0a975b190d43"
+
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -6828,10 +7909,32 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
+require-uncached@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+require_optional@^1.0.1, require_optional@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require_optional/-/require_optional-1.0.1.tgz#4cf35a4247f64ca3df8c2ef208cc494b1ca8fc2e"
+  dependencies:
+    resolve-from "^2.0.0"
+    semver "^5.1.0"
+
 requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+reselect@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
+
+resize-observer-polyfill@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -6852,6 +7955,14 @@ resolve-dir@^1.0.0, resolve-dir@^1.0.1:
     expand-tilde "^2.0.0"
     global-modules "^1.0.0"
 
+resolve-from@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+
+resolve-from@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-2.0.0.tgz#9480ab20e94ffa1d9e80a804c7ea147611966b57"
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -6864,7 +7975,7 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.1.6, resolve@^1.1.7:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
   dependencies:
@@ -6903,7 +8014,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.3.2, rimraf@^2.4.4, rimraf@^2.5.0, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.3.2, rimraf@^2.4.4, rimraf@^2.5.0, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
@@ -6930,6 +8041,13 @@ rollup@^0.36.3:
   dependencies:
     source-map-support "^0.4.0"
 
+rst-selector-parser@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
+  dependencies:
+    lodash.flattendeep "^4.4.0"
+    nearley "^2.7.10"
+
 rsvp@^3.0.13, rsvp@^3.0.18:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
@@ -6940,6 +8058,12 @@ run-async@^2.2.0:
   dependencies:
     is-promise "^2.1.0"
 
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  dependencies:
+    aproba "^1.1.1"
+
 rx-lite-aggregates@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
@@ -6950,6 +8074,12 @@ rx-lite@*, rx-lite@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
 
+rxjs@^5.5.7:
+  version "5.5.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.7.tgz#afb3d1642b069b2fbf203903d6501d1acb4cda27"
+  dependencies:
+    symbol-observable "1.0.1"
+
 safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -7000,6 +8130,13 @@ sc-formatter@~3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/sc-formatter/-/sc-formatter-3.0.2.tgz#9abdb14e71873ce7157714d3002477bbdb33c4e6"
 
+schema-utils@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 scroll-behavior@^0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.9.tgz#ebfe0658455b82ad885b66195215416674dacce2"
@@ -7013,7 +8150,7 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
@@ -7039,6 +8176,10 @@ send@0.16.2:
     range-parser "~1.2.0"
     statuses "~1.4.0"
 
+serialize-javascript@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
+
 serve-index@^1.7.2:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -7195,6 +8336,12 @@ slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
 
+slice-ansi@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -7321,6 +8468,10 @@ source-list-map@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
 
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
+
 source-map-resolve@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
@@ -7363,11 +8514,11 @@ source-map@^0.4.4, source-map@~0.4.1:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.6.1:
+source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -7429,6 +8580,12 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
+ssri@^5.2.4:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
+  dependencies:
+    safe-buffer "^5.1.1"
+
 stack-trace@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
@@ -7458,7 +8615,11 @@ static-site-generator-webpack-plugin@^3.4.1:
     url "^0.11.0"
     webpack-sources "^0.2.0"
 
-"statuses@>= 1.3.1 < 2", statuses@~1.4.0:
+"statuses@>= 1.3.1 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+
+statuses@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
 
@@ -7479,6 +8640,13 @@ stream-cache@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/stream-cache/-/stream-cache-0.0.2.tgz#1ac5ad6832428ca55667dbdee395dad4e6db118f"
 
+stream-each@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
 stream-http@^2.3.1, stream-http@^2.7.2:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.1.tgz#d0441be1a457a73a733a8a7b53570bebd9ef66a4"
@@ -7489,6 +8657,10 @@ stream-http@^2.3.1, stream-http@^2.7.2:
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -7530,7 +8702,7 @@ string_decoder@^1.0.0:
   dependencies:
     safe-buffer "~5.1.0"
 
-string_decoder@~1.0.3:
+string_decoder@~1.0.0, string_decoder@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
   dependencies:
@@ -7610,6 +8782,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+
 symbol-observable@^1.0.2, symbol-observable@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -7650,6 +8826,17 @@ systemjs@^0.19.46:
   dependencies:
     when "^3.7.5"
 
+table@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
+  dependencies:
+    ajv "^5.2.3"
+    ajv-keywords "^2.1.0"
+    chalk "^2.1.0"
+    lodash "^4.17.4"
+    slice-ansi "1.0.0"
+    string-width "^2.1.1"
+
 tapable@^0.1.8, tapable@~0.1.8:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
@@ -7699,11 +8886,11 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-text-table@0.2.0:
+text-table@0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-through2@^2.0.1:
+through2@^2.0.0, through2@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
   dependencies:
@@ -7756,6 +8943,10 @@ to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -7769,7 +8960,7 @@ to-regex-range@^2.1.0:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
-to-regex@^3.0.1:
+to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
   dependencies:
@@ -7822,6 +9013,16 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
 
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-detect@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+
 type-is@~1.6.15, type-is@~1.6.16:
   version "1.6.16"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
@@ -7833,10 +9034,21 @@ type-of@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/type-of/-/type-of-2.0.1.tgz#e72a1741896568e9f628378d816d6912f7f23972"
 
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
+uglify-es@^3.3.4:
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
+  dependencies:
+    commander "~2.13.0"
+    source-map "~0.6.1"
+
 uglify-js@^2.6, uglify-js@^2.6.1:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -7859,6 +9071,19 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+uglifyjs-webpack-plugin@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.4.tgz#5eec941b2e9b8538be0a20fc6eda25b14c7c1043"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.5"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -7871,6 +9096,16 @@ unc-path-regex@^0.1.0, unc-path-regex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
+uncontrollable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-4.1.0.tgz#e0358291252e1865222d90939b19f2f49f81c1a9"
+  dependencies:
+    invariant "^2.1.0"
+
+underscore@~1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
+
 union-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
@@ -7894,6 +9129,18 @@ uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
 
+unique-filename@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.0.tgz#d05f2fe4032560871f30e93cbe735eea201514f3"
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.0.tgz#db6676e7c7cc0629878ff196097c78855ae9f4ab"
+  dependencies:
+    imurmurhash "^0.1.4"
+
 unique-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
@@ -7926,7 +9173,7 @@ unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
-update-notifier@2.3.0, update-notifier@^2.3.0:
+update-notifier@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
   dependencies:
@@ -7940,6 +9187,27 @@ update-notifier@2.3.0, update-notifier@^2.3.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
+update-notifier@^2.3.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.4.0.tgz#f9b4c700fbfd4ec12c811587258777d563d8c866"
+  dependencies:
+    boxen "^1.2.1"
+    chalk "^2.0.1"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-ci "^1.0.10"
+    is-installed-globally "^0.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+uri-js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-3.0.2.tgz#f90b858507f81dea4dcfbb3c4c3dbfa2b557faaa"
+  dependencies:
+    punycode "^2.1.0"
+
 urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
@@ -8173,6 +9441,13 @@ webpack-sources@^0.2.0:
     source-list-map "^1.1.1"
     source-map "~0.5.3"
 
+webpack-sources@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
 webpack-stats-plugin@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/webpack-stats-plugin/-/webpack-stats-plugin-0.1.5.tgz#29e5f12ebfd53158d31d656a113ac1f7b86179d9"
@@ -8274,6 +9549,16 @@ wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
 
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+worker-farm@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
+  dependencies:
+    errno "~0.1.7"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@@ -8293,6 +9578,12 @@ write-file-atomic@^2.0.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
 ws@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-3.0.0.tgz#98ddb00056c8390cb751e7788788497f99103b6c"
@@ -8324,6 +9615,10 @@ y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
 
+y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"