Merge branch 'master' of github.com:FreeCodeCamp/freecodecamp

2015-05-28 01:33:16 -07:00
parent 28d2f700c2 e21d25ab45
commit 6dda97b002
8 changed files with 228 additions and 197 deletions
--- a/README.md
+++ b/README.md
@ -60,24 +60,32 @@ touch .env

 ```

-Edit your .env file with the following API keys accordingly (if you only use email login, only the MONGOHQ_URL, SESSION_SECRET, MANDRILL_USER and MANDRILL_PASSWORD fields are necessary:
+Edit your .env file with the following API keys accordingly (if you only use email login, only the MONGOHQ_URL, SESSION_SECRET, MANDRILL_USER and MANDRILL_PASSWORD fields are necessary. Keep in mind if you want to use more services you'll have to get your own API keys for those services.

 ```

 MONGOHQ_URL='mongodb://localhost:27017/freecodecamp'
-SESSION_SECRET='ANY ENGLISH PHRASE'
-MANDRILL_USER='THE EMAIL ADDRESS FROM YOUR MANDRILL ACCOUNT'
-MANDRILL_PASSWORD='YOUR MANDRILL PASSWORD'
-FACEBOOK_ID='FACEBOOK APP API KEY'
-FACEBOOK_SECRET='FACEBOOK SECRET'
-GITHUB_ID='GITHUB APP API KEY'
-GITHUB_SECRET='GITHUB APP SECRET'
-TWITTER_KEY='TWITTER APP API KEY'
-TWITTER_SECRET='TWITTER APP SECRET'
-GOOGLE_ID='GOOGLE APP API KEY'
-GOOGLE_SECRET='GOOGLE APP SECRET'
-LINKEDIN_ID='LINKEDIN APP API KEY'
-LINKEDIN_SECRET='LINKEDIN APP SECRET'
+BLOGGER_KEY=stuff
+FACEBOOK_ID=stuff
+FACEBOOK_SECRET=stuff
+GITHUB_ID=stuff
+GITHUB_SECRET=stuff
+GOOGLE_ID=stuff
+GOOGLE_SECRET=stuff
+LINKEDIN_ID=stuff
+LINKEDIN_SECRET=stuff
+MANDRILL_PASSWORD=stuff
+MANDRILL_USER=stuff
+SESSION_SECRET=secretstuff
+TRELLO_KEY=stuff
+TRELLO_SECRET=stuff
+TWITTER_KEY=stuff
+TWITTER_SECRET=stuff
+TWITTER_TOKEN=stuff
+TWITTER_TOKEN_SECRET=stuff
+SLACK_WEBHOOK=stuff
+PEER=stuff
+DEBUG=true

 ```

--- a/public/css/main.less
+++ b/public/css/main.less
@ -1087,6 +1087,19 @@ hr {
  color: @gray-light;
 }

+@media only screen and (min-width: 993px) {
+  .iframe-scroll {
+    position: fixed !important;
+    margin-top: 75px;
+  }
+}
+@media only screen and (max-width: 992px) {
+  .iframe-scroll {
+    height: auto;
+    overflow: auto;
+  }
+}
+
 //uncomment this to see the dimensions of all elements outlined in red
 //* {
 //  border-color: red;
--- a/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.3.js
+++ b/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.3.js
@ -1,154 +0,0 @@
-/**
- * Created by nathanleniz on 2/2/15.
- */
-
-var widgets = [];
-var editor = CodeMirror.fromTextArea(document.getElementById("codeEditor"), {
-    lineNumbers: true,
-    mode: "text/html",
-    theme: 'monokai',
-    runnable: true,
-    matchBrackets: true,
-    autoCloseBrackets: true,
-    scrollbarStyle: 'null',
-    lineWrapping: true,
-    gutters: ["CodeMirror-lint-markers"],
-    onKeyEvent: doLinting
-});
-
-
-// Hijack tab key to insert two spaces instead
-editor.setOption("extraKeys", {
-    Tab: function(cm) {
-        if (cm.somethingSelected()){
-            cm.indentSelection("add");
-        } else {
-            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
-            cm.replaceSelection(spaces);
-        }
-    },
-    "Shift-Tab": function(cm) {
-        if (cm.somethingSelected()){
-            cm.indentSelection("subtract");
-        } else {
-            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
-            cm.replaceSelection(spaces);
-        }
-    }
-});
-
-editor.setSize("100%", "auto");
-
-var libraryIncludes = "<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>" +
-        "<script src='/js/lib/chai/chai.js'></script>" +
-        "<script src='/js/lib/chai/chai-jquery.js'></script>" +
-        "<script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>" +
-        "<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css'/>" +
-        "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>" +
-        "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>" +
-        "<style>body { padding: 0px 3px 0px 3px; }</style>" +
-        "<script>var expect = chai.expect; var should = chai.should(); var assert = chai.assert;</script>";
-
-var allTests = '';
-(function() {
-    tests.forEach(function(elem) {
-        allTests += elem + ' ';
-    });
-})();
-
-var otherTestsForNow = "<script src='/js/lib/coursewares/iFrameScripts_0.0.2.js'></script>";
-
-var delay;
-// Initialize CodeMirror editor with a nice html5 canvas demo.
-editor.on("change", function () {
-    clearTimeout(delay);
-    delay = setTimeout(updatePreview, 300);
-});
-var nodeEnv = prodOrDev === 'production' ? 'http://www.freecodecamp.com' : 'http://localhost:3001';
-function updatePreview() {
-    goodTests = 0;
-    var previewFrame = document.getElementById('preview');
-    var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
-    preview.open();
-    $('#testSuite').empty();
-    preview.write(libraryIncludes + editor.getValue() + otherTestsForNow);
-    preview.close();
-
-}
-setTimeout(updatePreview, 300);
-
-/**
- * "post" methods
- */
-
-var postSuccess = function(data) {
-    var testDoc = document.createElement("div");
-    $(testDoc)
-        .html("<div class='row'><div class='col-xs-2 text-center'><i class='ion-checkmark-circled big-success-icon'></i></div><div class='col-xs-10 test-output test-vertical-center wrappable'>" + JSON.parse(data) + "</div></div><div class='ten-pixel-break'/>")
-        .appendTo($('#testSuite'));
-    testSuccess();
-};
-
-var postError = function(data) {
-    var testDoc = document.createElement("div");
-    $(testDoc)
-        .html("<div class='row'><div class='col-xs-2 text-center'><i class='ion-close-circled big-error-icon'></i></div><div class='col-xs-10 test-vertical-center test-output wrappable'>" + JSON.parse(data) + "</div></div><div class='ten-pixel-break'/>")
-        .prependTo($('#testSuite'))
-};
-var goodTests = 0;
-var testSuccess = function() {
-    goodTests++;
-    if (goodTests === tests.length) {
-        showCompletion();
-    }
-};
-var challengeSeed = challengeSeed || null;
-var tests = tests || [];
-var allSeeds = '';
-(function() {
-    challengeSeed.forEach(function(elem) {
-        allSeeds += elem.replace(/fccss/g, '<script>').replace(/fcces/g,'</script>') + '\n';
-    });
-  editor.setValue(allSeeds);
-})();
-
-
-function doLinting () {
-    editor.operation(function () {
-        for (var i = 0; i < widgets.length; ++i)
-            editor.removeLineWidget(widgets[i]);
-        widgets.length = 0;
-        JSHINT(editor.getValue());
-        for (var i = 0; i < JSHINT.errors.length; ++i) {
-            var err = JSHINT.errors[i];
-            if (!err) continue;
-            var msg = document.createElement("div");
-            var icon = msg.appendChild(document.createElement("span"));
-            icon.innerHTML = "!!";
-            icon.className = "lint-error-icon";
-            msg.appendChild(document.createTextNode(err.reason));
-            msg.className = "lint-error";
-            widgets.push(editor.addLineWidget(err.line - 1, msg, {
-                coverGutter: false,
-                noHScroll: true
-            }));
-        }
-    });
-};
-
-//$('#testSuite').empty();
-function showCompletion() {
-    var time = Math.floor(Date.now()) - started;
-    ga('send', 'event',  'Challenge', 'solved', challenge_Name + ', Time: ' + time);
-    $('#next-courseware-button').removeAttr('disabled');
-    $('#next-courseware-button').addClass('animated tada');
-    if (!userLoggedIn) {
-        $('#complete-courseware-dialog').modal('show');
-    }
-    $('body').keydown(function(e) {
-        if (e.ctrlKey && e.keyCode == 13) {
-            $('#next-courseware-button').click();
-            $('#next-courseware-button').unbind('click');
-        }
-    });
-}
--- a/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.5.js
+++ b/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.5.js
@ -0,0 +1,156 @@
+/**
+ * Created by nathanleniz on 2/2/15.
+ */
+
+var widgets = [];
+var editor = CodeMirror.fromTextArea(document.getElementById("codeEditor"), {
+  lineNumbers: true,
+  mode: "text/html",
+  theme: 'monokai',
+  runnable: true,
+  matchBrackets: true,
+  autoCloseBrackets: true,
+  scrollbarStyle: 'null',
+  lineWrapping: true,
+  gutters: ["CodeMirror-lint-markers"],
+  onKeyEvent: doLinting
+});
+
+
+// Hijack tab key to insert two spaces instead
+editor.setOption("extraKeys", {
+  Tab: function(cm) {
+    if (cm.somethingSelected()){
+      cm.indentSelection("add");
+    } else {
+      var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+      cm.replaceSelection(spaces);
+    }
+  },
+  "Shift-Tab": function(cm) {
+    if (cm.somethingSelected()){
+      cm.indentSelection("subtract");
+    } else {
+      var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+      cm.replaceSelection(spaces);
+    }
+  }
+});
+
+editor.setSize("100%", "auto");
+
+var libraryIncludes = "<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>" +
+  "<script src='/js/lib/chai/chai.js'></script>" +
+  "<script src='/js/lib/chai/chai-jquery.js'></script>" +
+  "<script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>" +
+  "<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css'/>" +
+  "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>" +
+  "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>" +
+  "<style>body { padding: 0px 3px 0px 3px; }</style>" +
+  "<script>var expect = chai.expect; var should = chai.should(); var assert = chai.assert;</script>";
+
+var allTests = '';
+(function() {
+  tests.forEach(function(elem) {
+    allTests += elem + ' ';
+  });
+})();
+
+var otherTestsForNow = "<script src='/js/lib/coursewares/iFrameScripts_0.0.2.js'></script>";
+
+var delay;
+// Initialize CodeMirror editor with a nice html5 canvas demo.
+editor.on("keyup", function () {
+  clearTimeout(delay);
+  delay = setTimeout(updatePreview, 300);
+});
+
+var nodeEnv = prodOrDev === 'production' ? 'http://www.freecodecamp.com' : 'http://localhost:3001';
+function updatePreview() {
+  goodTests = 0;
+  var previewFrame = document.getElementById('preview');
+  var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
+  preview.open();
+  $('#testSuite').empty();
+  preview.write(libraryIncludes + editor.getValue() + otherTestsForNow);
+  preview.close();
+
+}
+setTimeout(updatePreview, 300);
+
+/**
+ * "post" methods
+ */
+
+var postSuccess = function(data) {
+  var testDoc = document.createElement("div");
+  $(testDoc)
+    .html("<div class='row'><div class='col-xs-2 text-center'><i class='ion-checkmark-circled big-success-icon'></i></div><div class='col-xs-10 test-output test-vertical-center wrappable'>" + JSON.parse(data) + "</div></div><div class='ten-pixel-break'/>")
+    .appendTo($('#testSuite'));
+  testSuccess();
+};
+
+var postError = function(data) {
+  var testDoc = document.createElement("div");
+  $(testDoc)
+    .html("<div class='row'><div class='col-xs-2 text-center'><i class='ion-close-circled big-error-icon'></i></div><div class='col-xs-10 test-vertical-center test-output wrappable'>" + JSON.parse(data) + "</div></div><div class='ten-pixel-break'/>")
+    .prependTo($('#testSuite'))
+};
+var goodTests = 0;
+var testSuccess = function() {
+  goodTests++;
+  if (goodTests === tests.length) {
+    showCompletion();
+  }
+};
+var challengeSeed = challengeSeed || null;
+var tests = tests || [];
+var allSeeds = '';
+(function() {
+  challengeSeed.forEach(function(elem) {
+    allSeeds += elem.replace(/fccss/g, '<script>').replace(/fcces/g,'</script>') + '\n';
+  });
+  editor.setValue(allSeeds);
+  editor.setCursor(15);
+})();
+
+
+function doLinting () {
+  editor.operation(function () {
+    for (var i = 0; i < widgets.length; ++i)
+      editor.removeLineWidget(widgets[i]);
+    widgets.length = 0;
+    JSHINT(editor.getValue());
+    for (var i = 0; i < JSHINT.errors.length; ++i) {
+      var err = JSHINT.errors[i];
+      if (!err) continue;
+      var msg = document.createElement("div");
+      var icon = msg.appendChild(document.createElement("span"));
+      icon.innerHTML = "!!";
+      icon.className = "lint-error-icon";
+      msg.appendChild(document.createTextNode(err.reason));
+      msg.className = "lint-error";
+      widgets.push(editor.addLineWidget(err.line - 1, msg, {
+        coverGutter: false,
+        noHScroll: true
+      }));
+    }
+  });
+};
+
+//$('#testSuite').empty();
+function showCompletion() {
+  var time = Math.floor(Date.now()) - started;
+  ga('send', 'event',  'Challenge', 'solved', challenge_Name + ', Time: ' + time);
+  $('#next-courseware-button').removeAttr('disabled');
+  $('#next-courseware-button').addClass('animated tada');
+  if (!userLoggedIn) {
+    $('#complete-courseware-dialog').modal('show');
+  }
+  $('body').keydown(function(e) {
+    if (e.ctrlKey && e.keyCode == 13) {
+      $('#next-courseware-button').click();
+      $('#next-courseware-button').unbind('click');
+    }
+  });
+}
--- a/seed_data/challenges/basic-bonfires.json
+++ b/seed_data/challenges/basic-bonfires.json
@ -19,8 +19,7 @@
        "Add them as a new contact in Screen Hero, then click the monitor-looking button to attempt to share your screen with them.",
        "Once the Screen Hero session starts, your screen's margins will glow orange. You are now sharing your screen.",
        "Your pair will have their own cursor, and will be able to type text on his or her and keyboard.",
-        "Now it's time to tackle our Bonfires.",
-        "Go to <a href='http://freecodecamp.com/bonfires' target='_blank'>http://freecodecamp.com/bonfires</a> and start working through our Bonfire challenges.",
+        "Now it's time to tackle our Bonfires. You can begin them by advancing to the next challenge.",
        "Once you you finish pair programming, end the session in Screen Hero session.",
        "Congratulations! You have completed your first pair programming session.",
        "Pair program as much as possible with different campers until you've completed all the Bonfire challenges. This is a big time investment, but the JavaScript practice you get will be well worth it!",
@ -447,6 +446,7 @@
      "tests": [
        "assert.deepEqual(chunk(['a', 'b', 'c', 'd'], 2), [['a', 'b'], ['c', 'd']], 'should return chunked arrays');",
        "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'should return chunked arrays');",
+        "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], 'should return chunked arrays');",
        "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'should return the last chunk as remaining elements');"
      ],
      "MDNlinks": [
--- a/seed_data/challenges/basic-html5-and-css.json
+++ b/seed_data/challenges/basic-html5-and-css.json
@ -133,9 +133,9 @@
        "You can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>."
      ],
      "tests": [
-        "assert(($('h1').length > 0), 'The h1 element should not commented. It should be visible in the browser.')",
-        "assert(($('h2').length > 0), 'The h2 element should not commented. It should be visible in the browser.')",
-        "assert(($('p').length > 0), 'The paragraph element should not commented. It should be visible in the browser.')"
+        "assert($('h1').length > 0, 'The h1 element should not be commented. It should be visible in the browser.')",
+        "assert($('h2').length > 0, 'The h2 element should not be commented. It should be visible in the browser.')",
+        "assert($('p').length > 0, 'The paragraph element should not be commented. It should be visible in the browser.')"
      ],
      "challengeSeed": [
        "<!--",
@ -911,7 +911,7 @@
        "Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>"
      ],
      "tests": [
-        "assert((/photo/gi).test($('a').text()), 'Your <code>anchor</code> element should have the anchor text of \"See my cat photos\"')",
+        "assert((/cat photos/gi).test($('a').text()), 'Your <code>anchor</code> element should have the anchor text of \"See my cat photos\"')",
        "assert($('a').filter(function(index) { return /com/gi.test($('a').attr('href')); }).length > 0, 'You need an <code>anchor</code> element that links to <code>http&#58;//catphotoapp.com<code>.')"
      ],
      "challengeSeed": [
@ -1099,7 +1099,7 @@
        "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."
      ],
      "tests": [
-        "assert($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length > 1, 'Wrap your image element inside an anchor element that has its <code>href</code> attribute set to \"#\".')"
+        "expect($('a').children('img').length, 'Wrap your image element inside an anchor element that has its <code>href</code> attribute set to \"#\"').to.equal(1);"
      ],
      "challengeSeed": [
        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1289,8 +1289,8 @@
      "tests": [
        "assert($('ul').length > 0, 'You should have an <code>ul</code> element on your webpage.')",
        "assert($('ol').length > 0, 'You should have an <code>ol</code> element on your webpage.')",
-        "assert($('li').length > 5, 'You should have three <code>li</code> elements on within your <code>ul</code> element.')",
-        "assert($('li').length > 5, 'You should have three <code>li</code> elements on within your <code>ol</code> element.')"
+        "assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ul</code> element.')",
+        "assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ol</code> element.')"
      ],
      "challengeSeed": [
        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1568,7 +1568,7 @@
      "difficulty": 0.041,
      "description": [
        "Add a submit button to your form field.",
-        "Let's add a submit button to your form. Clicking this button will send the date from your form to the URL you specified with your form's <code>action</code> attribute.",
+        "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
        "Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;<code>"
      ],
      "tests": [
@ -1646,8 +1646,8 @@
        "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element use: <code>&#60;input type='text' required&#62;</code>"
      ],
      "tests": [
-        "assert($('input').prop('required'), 'Your text field have the property of being required.')",
-        "assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"cat photo URL\".')"
+        "assert($('input').prop('required'), 'Your text field should have the property of being required.')",
+        "assert(new RegExp('cat photo URL').test($('input').prop('placeholder')), 'Your text field should have the placeholder text of \"cat photo URL\".')"
      ],
      "challengeSeed": [
        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1932,7 +1932,7 @@
        "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
        "  <label><input type='checkbox' name='personality'> Loving</label>",
        "  <label><input type='checkbox' name='personality'> Lazy</label>",
-        "  <label><input type='checkbox' name='personality'> Crazy</label>",
+        "  <label><input type='checkbox' name='personality'> Energetic</label>",
        "  <input type='text' placeholder='cat photo URL' required>",
        "  <button type='submit'>Submit</button>",
        "</form>"
@ -1959,8 +1959,8 @@
        "To do this, just add the word \"checked\" to the inside of an input element. For example, <code>&#60;input type='radio' name='test-name' checked&#62;</code>."
      ],
      "tests": [
-        "assert($('input[type=\"radio\"').prop('checked'), 'Your first radio button on your form should be checked by default.')",
-        "assert($('input[type=\"checkbox\"').prop('checked'), 'Your first checkbox on your form should be checked by default.')"
+        "assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');",
+        "assert($('input[type=\"checkbox\"]').prop('checked'), 'Your first checkbox on your form should be checked by default.')"
      ],
      "challengeSeed": [
        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -2014,7 +2014,7 @@
        "  <br>",
        "  <label><input type='checkbox' name='personality'> Loving</label>",
        "  <label><input type='checkbox' name='personality'> Lazy</label>",
-        "  <label><input type='checkbox' name='personality'> Crazy</label>",
+        "  <label><input type='checkbox' name='personality'> Energetic</label>",
        "  <br>",
        "  <input type='text' placeholder='cat photo URL' required>",
        "  <button type='submit'>Submit</button>",
@ -2228,7 +2228,9 @@
        "CSS allows you to control the padding of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes."
      ],
      "tests": [
+        "assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of padding.')",
        "assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of padding.')",
+        "assert($('.green-box').css('padding-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of padding.')",
        "assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of padding.')"
      ],
      "challengeSeed": [
@ -2349,14 +2351,16 @@
      "name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element",
      "difficulty": 0.069,
      "description": [
-        "Use <code>Clockwise Notation</code> to give an element padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
+        "Use <code>Clockwise Notation</code> to give the \".green-box\" class a padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
        "Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
        "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
        "You can also use this notation for margins!"
      ],
      "tests": [
-        "assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of padding.')",
-        "assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of padding.')"
+        "assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of padding.')",
+        "assert($('.green-box').css('padding-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of padding.')",
+        "assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of padding.')",
+        "assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of padding.')"
      ],
      "challengeSeed": [
        "<style>",
@ -2417,7 +2421,10 @@
      ],
      "tests": [
        "assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of margin.')",
-        "assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of margin.')"
+        "assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of margin.')",
+        "assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 20px of margin.')",
+        "assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of margin.')"
+
      ],
      "challengeSeed": [
        "<style>",
--- a/seed_data/challenges/bootstrap.json
+++ b/seed_data/challenges/bootstrap.json
@ -16,7 +16,7 @@
      ],
      "tests": [
        "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
-        "assert($('img').length > 1, 'You should add a second image with the <code>src</code> of <code>http&#58;//bit.ly/fcc-kittens2</code>.')"
+        "assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'You should add a second image with the <code>src</code> of <code>http&#58;//bit.ly/fcc-kittens2</code>.')"
      ],
      "challengeSeed": [
        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -180,7 +180,8 @@
        "Bootstrap has its own button styles, which look much better than the plain HTML ones."
      ],
      "tests": [
-        "assert($('.btn').length > 0, 'your new button should have the class \"btn\".')"
+        "assert($('.btn').length > 0, 'your new button should have the class \"btn\".');",
+        "assert(new RegExp('like this photo','gi').test($('.btn').text()), 'your button should have the text \"like this photo\"');"
      ],
      "challengeSeed": [
        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -601,7 +602,7 @@
        "Put the \"like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
        "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
        "Here's a diagram of how Bootstrap's 12-column grid layout works:",
-        "<img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'>",
+        "<a href='http://getbootstrap.com/css/#grid-example-basic' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",
        "Note that in this illustration, we use the <code>col-md-*</code> class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.",
        "In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
        "The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it."
@ -1223,7 +1224,7 @@
      "name": "Waypoint: Style Text Inputs as Form Controls",
      "difficulty": 0.061,
      "description": [
-        "Give your form's text input field in a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\" and give it the Font Awesome icon of \"fa-paper-plane\"."
+        "Give your form's text input field a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\" and give it the Font Awesome icon of \"fa-paper-plane\"."
      ],
      "tests": [
        "assert($('.btn-primary').length > 1, 'Give the submit button in your form the classes \"btn btn-primary\".')",
@ -1324,12 +1325,12 @@
      "name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
      "difficulty": 0.062,
      "description": [
-        "Wrap both your form's text input field and submit button within a div with the class \"row\". Wrap your form's text input field within a div with the class of \"col-xs-7\". Wrap your form's submit button the in a div with the class \"col-xs-5\".",
        "Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a \"row\" element with \"col-xs-*\" elements withing it.",
+        "Wrap both your form's text input field and submit button within a div with the class \"row\". Wrap your form's text input field within a div with the class of \"col-xs-7\". Wrap your form's submit button the in a div with the class \"col-xs-5\".",
        "This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
      ],
      "tests": [
-        "assert($('.row').length > 4, 'Wrap your all of your checkboxes inside one div with the class \"row\".')",
+        "assert($('.row').length > 4, 'Wrap your form submission button and text area in a div with class \"row\".')",
        "assert($('.col-xs-5').length > 0, 'Wrap your form submission button in a div with the class \"col-xs-5\".')",
        "assert($('.col-xs-7').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')"
      ],
--- a/views/coursewares/showHTML.jade
+++ b/views/coursewares/showHTML.jade
@ -78,8 +78,8 @@ block content
                        textarea#codeEditor(autofocus=true, style='display: none;')
        .col-md-4.col-lg-3
            .hidden-xs.hidden-sm
-                img.iphone-position(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
-            iframe.iphone#preview
+                img.iphone-position.iframe-scroll(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
+            iframe.iphone.iframe-scroll#preview
        #complete-courseware-dialog.modal(tabindex='-1')
            .modal-dialog.animated.zoomIn.fast-animation
                .modal-content
@ -91,4 +91,4 @@ block content
                            .animated.zoomInDown.delay-half
                                span.completion-icon.ion-checkmark-circled.text-primary
                            a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
-    script(src="/js/lib/coursewares/coursewaresHCJQFramework_0.1.3.js")
+    script(src="/js/lib/coursewares/coursewaresHCJQFramework_0.1.5.js")