gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Quincy Larson
2015-05-28 01:33:16 -07:00
parent 28d2f700c2 e21d25ab45
commit 6dda97b002
8 changed files with 228 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
README.md
View File

@ -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' MONGOHQ_URL='mongodb://localhost:27017/freecodecamp'
SESSION_SECRET='ANY ENGLISH PHRASE' BLOGGER_KEY=stuff
MANDRILL_USER='THE EMAIL ADDRESS FROM YOUR MANDRILL ACCOUNT' FACEBOOK_ID=stuff
MANDRILL_PASSWORD='YOUR MANDRILL PASSWORD' FACEBOOK_SECRET=stuff
FACEBOOK_ID='FACEBOOK APP API KEY' GITHUB_ID=stuff
FACEBOOK_SECRET='FACEBOOK SECRET' GITHUB_SECRET=stuff
GITHUB_ID='GITHUB APP API KEY' GOOGLE_ID=stuff
GITHUB_SECRET='GITHUB APP SECRET' GOOGLE_SECRET=stuff
TWITTER_KEY='TWITTER APP API KEY' LINKEDIN_ID=stuff
TWITTER_SECRET='TWITTER APP SECRET' LINKEDIN_SECRET=stuff
GOOGLE_ID='GOOGLE APP API KEY' MANDRILL_PASSWORD=stuff
GOOGLE_SECRET='GOOGLE APP SECRET' MANDRILL_USER=stuff
LINKEDIN_ID='LINKEDIN APP API KEY' SESSION_SECRET=secretstuff
LINKEDIN_SECRET='LINKEDIN APP SECRET' 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
``` ```

13
public/css/main.less
View File

@ -1087,6 +1087,19 @@ hr {
color: @gray-light; 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 //uncomment this to see the dimensions of all elements outlined in red
//* { //* {
// border-color: red; // border-color: red;

154
public/js/lib/coursewares/coursewaresHCJQFramework_0.1.3.js
View File

@ -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');
}
});
}

156
public/js/lib/coursewares/coursewaresHCJQFramework_0.1.5.js Normal file
View File

@ -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');
}
});
}

4
seed_data/challenges/basic-bonfires.json
View File

@ -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.", "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.", "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.", "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.", "Now it's time to tackle our Bonfires. You can begin them by advancing to the next challenge.",
"Go to <a href='http://freecodecamp.com/bonfires' target='_blank'>http://freecodecamp.com/bonfires</a> and start working through our Bonfire challenges.",
"Once you you finish pair programming, end the session in Screen Hero session.", "Once you you finish pair programming, end the session in Screen Hero session.",
"Congratulations! You have completed your first pair programming 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!", "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": [ "tests": [
"assert.deepEqual(chunk(['a', 'b', 'c', 'd'], 2), [['a', 'b'], ['c', 'd']], 'should return chunked arrays');", "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], 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');" "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": [ "MDNlinks": [

43
seed_data/challenges/basic-html5-and-css.json
View File

@ -133,9 +133,9 @@
"You can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>." "You can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>."
], ],
"tests": [ "tests": [
"assert(($('h1').length > 0), 'The h1 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 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 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": [ "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>" "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": [ "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>.')" "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": [ "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." "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": [ "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": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1289,8 +1289,8 @@
"tests": [ "tests": [
"assert($('ul').length > 0, 'You should have an <code>ul</code> element on your webpage.')", "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($('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 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>ol</code> element.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1568,7 +1568,7 @@
"difficulty": 0.041, "difficulty": 0.041,
"description": [ "description": [
"Add a submit button to your form field.", "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>" "Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;<code>"
], ],
"tests": [ "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>" "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": [ "tests": [
"assert($('input').prop('required'), 'Your text field have the property of being required.')", "assert($('input').prop('required'), 'Your text field should have the property of being required.')",
"assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"cat photo URL\".')" "assert(new RegExp('cat photo URL').test($('input').prop('placeholder')), 'Your text field should have the placeholder text of \"cat photo URL\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<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='radio' name='indoor-outdoor'> Outdoor</label>",
" <label><input type='checkbox' name='personality'> Loving</label>", " <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</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>", " <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>", " <button type='submit'>Submit</button>",
"</form>" "</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>." "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": [ "tests": [
"assert($('input[type=\"radio\"').prop('checked'), 'Your first radio button 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.')" "assert($('input[type=\"checkbox\"]').prop('checked'), 'Your first checkbox on your form should be checked by default.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -2014,7 +2014,7 @@
" <br>", " <br>",
" <label><input type='checkbox' name='personality'> Loving</label>", " <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</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>", " <br>",
" <input type='text' placeholder='cat photo URL' required>", " <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>", " <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." "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": [ "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-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.')" "assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of padding.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -2349,14 +2351,16 @@
"name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element", "name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element",
"difficulty": 0.069, "difficulty": 0.069,
"description": [ "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>.", "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.", "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!" "You can also use this notation for margins!"
], ],
"tests": [ "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-top') === '40px', 'Your <code>green-box</code> class should give the top 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-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": [ "challengeSeed": [
"<style>", "<style>",
@ -2417,7 +2421,10 @@
], ],
"tests": [ "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-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": [ "challengeSeed": [
"<style>", "<style>",

13
seed_data/challenges/bootstrap.json
View File

@ -16,7 +16,7 @@
], ],
"tests": [ "tests": [
"assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')", "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": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<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." "Bootstrap has its own button styles, which look much better than the plain HTML ones."
], ],
"tests": [ "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": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<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.", "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.", "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:", "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.", "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.", "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." "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", "name": "Waypoint: Style Text Inputs as Form Controls",
"difficulty": 0.061, "difficulty": 0.061,
"description": [ "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": [ "tests": [
"assert($('.btn-primary').length > 1, 'Give the submit button in your form the classes \"btn btn-primary\".')", "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", "name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
"difficulty": 0.062, "difficulty": 0.062,
"description": [ "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.", "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!" "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": [ "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-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\".')" "assert($('.col-xs-7').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')"
], ],

6
views/coursewares/showHTML.jade
View File

@ -78,8 +78,8 @@ block content
textarea#codeEditor(autofocus=true, style='display: none;') textarea#codeEditor(autofocus=true, style='display: none;')
.col-md-4.col-lg-3 .col-md-4.col-lg-3
.hidden-xs.hidden-sm .hidden-xs.hidden-sm
img.iphone-position(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png") img.iphone-position.iframe-scroll(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
iframe.iphone#preview iframe.iphone.iframe-scroll#preview
#complete-courseware-dialog.modal(tabindex='-1') #complete-courseware-dialog.modal(tabindex='-1')
.modal-dialog.animated.zoomIn.fast-animation .modal-dialog.animated.zoomIn.fast-animation
.modal-content .modal-content
@ -91,4 +91,4 @@ block content
.animated.zoomInDown.delay-half .animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary 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 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")