diff --git a/app.js b/app.js
index 2417185e98..632edb58f8 100644
--- a/app.js
+++ b/app.js
@@ -211,10 +211,6 @@ app.get('/control-shortcuts', resourcesController.deployAWebsite);
app.get('/stats', function(req, res) {
res.redirect(301, '/learn-to-code');
});
-app.get(
- '/pair-program-with-team-viewer',
- resourcesController.pairProgramWithTeamViewer
-);
app.get('/learn-to-code', resourcesController.about);
app.get('/about', function(req, res) {
res.redirect(301, '/learn-to-code');
diff --git a/controllers/bonfire.js b/controllers/bonfire.js
index 514d473130..49b143fd43 100644
--- a/controllers/bonfire.js
+++ b/controllers/bonfire.js
@@ -24,7 +24,6 @@ exports.index = function(req, res) {
details: '',
tests: [],
challengeSeed: '',
- challengeEntryPoint: '',
cc: req.user ? req.user.bonfiresHash : undefined,
points: req.user ? req.user.points : undefined,
verb: resources.randomVerb(),
@@ -105,7 +104,6 @@ exports.returnIndividualBonfire = function(req, res, next) {
details: bonfire.description.slice(1),
tests: bonfire.tests,
challengeSeed: bonfire.challengeSeed,
- challengeEntryPoint: bonfire.challengeEntryPoint,
cc: !!req.user,
points: req.user ? req.user.points : undefined,
verb: resources.randomVerb(),
@@ -131,7 +129,6 @@ exports.returnGenerator = function(req, res) {
details: null,
tests: null,
challengeSeed: null,
- challengeEntryPoint: null,
bonfireHash: randomString()
});
};
@@ -160,7 +157,6 @@ exports.testBonfire = function(req, res) {
bonfireTests = req.body.tests,
bonfireDifficulty = req.body.difficulty,
bonfireDescription = req.body.description,
- bonfireEntryPoint = req.body.challengeEntryPoint,
bonfireChallengeSeed = req.body.challengeSeed;
bonfireTests = bonfireTests.split('\r\n');
bonfireDescription = bonfireDescription.split('\r\n');
@@ -176,7 +172,6 @@ exports.testBonfire = function(req, res) {
details: bonfireDescription.slice(1),
tests: bonfireTests,
challengeSeed: bonfireChallengeSeed,
- challengeEntryPoint: bonfireEntryPoint,
cc: req.user ? req.user.bonfiresHash : undefined,
points: req.user ? req.user.points : undefined,
verb: resources.randomVerb(),
@@ -202,7 +197,6 @@ exports.generateChallenge = function(req, res) {
bonfireTests = req.body.tests,
bonfireDifficulty = req.body.difficulty,
bonfireDescription = req.body.description,
- bonfireEntryPoint = req.body.challengeEntryPoint,
bonfireChallengeSeed = req.body.challengeSeed;
bonfireTests = bonfireTests.split('\r\n');
bonfireDescription = bonfireDescription.split('\r\n');
@@ -216,7 +210,6 @@ exports.generateChallenge = function(req, res) {
name: bonfireName,
difficulty: bonfireDifficulty,
description: bonfireDescription,
- challengeEntryPoint: bonfireEntryPoint,
challengeSeed: bonfireChallengeSeed,
tests: bonfireTests
};
diff --git a/controllers/courseware.js b/controllers/courseware.js
index fe48720a35..58e57cef7d 100644
--- a/controllers/courseware.js
+++ b/controllers/courseware.js
@@ -72,23 +72,66 @@ exports.returnIndividualCourseware = function(req, res, next) {
return res.redirect('../coursewares/' + dashedNameFull);
}
- // Render the view for the user
- res.render('coursewares/show', {
- title: courseware.name,
- dashedName: dashedName,
- name: courseware.name,
- brief: courseware.description[0],
- details: courseware.description.slice(1),
- tests: courseware.tests,
- challengeSeed: courseware.challengeSeed,
- cc: !!req.user,
- points: req.user ? req.user.points : undefined,
- verb: resources.randomVerb(),
- phrase: resources.randomPhrase(),
- compliment: resources.randomCompliment(),
- coursewareHash: courseware._id,
- environment: resources.whichEnvironment()
- });
+ var challengeType = {
+ 0 : function() {
+ res.render('coursewares/showHTML', {
+ title: courseware.name,
+ dashedName: dashedName,
+ name: courseware.name,
+ brief: courseware.description[0],
+ details: courseware.description.slice(1),
+ tests: courseware.tests,
+ challengeSeed: courseware.challengeSeed,
+ cc: !!req.user,
+ points: req.user ? req.user.points : undefined,
+ verb: resources.randomVerb(),
+ phrase: resources.randomPhrase(),
+ compliment: resources.randomCompliment(),
+ coursewareHash: courseware._id,
+ environment: resources.whichEnvironment()
+ });
+ },
+
+ 1 : function() {
+ res.render('coursewares/showJS', {
+ title: courseware.name,
+ dashedName: dashedName,
+ name: courseware.name,
+ brief: courseware.description[0],
+ details: courseware.description.slice(1),
+ tests: courseware.tests,
+ challengeSeed: courseware.challengeSeed,
+ cc: !!req.user,
+ points: req.user ? req.user.points : undefined,
+ verb: resources.randomVerb(),
+ phrase: resources.randomPhrase(),
+ compliment: resources.randomCompliment(),
+ coursewareHash: courseware._id,
+ environment: resources.whichEnvironment()
+
+ });
+ },
+
+ 2: function() {
+ res.render('coursewares/showVideo', {
+ title: courseware.name,
+ dashedName: dashedName,
+ name: courseware.name,
+ details: courseware.description,
+ tests: courseware.tests,
+ video: courseware.challengeSeed[0],
+ cc: !!req.user,
+ points: req.user ? req.user.points : undefined,
+ verb: resources.randomVerb(),
+ phrase: resources.randomPhrase(),
+ compliment: resources.randomCompliment(),
+ coursewareHash: courseware._id,
+ environment: resources.whichEnvironment()
+ });
+ }
+ };
+
+ return challengeType[courseware.challengeType]();
});
};
diff --git a/controllers/resources.js b/controllers/resources.js
index ec1c063f20..d0a5a458b9 100644
--- a/controllers/resources.js
+++ b/controllers/resources.js
@@ -97,25 +97,6 @@ module.exports = {
});
},
- pairProgramWithTeamViewer: function(req, res) {
- Challenge.find({}, null, { sort: { challengeNumber: 1 } }, function(err, c) {
- if (err) {
- debug('Challenge err: ', err);
- next(err);
- }
- res.render('resources/pair-program-with-team-viewer', {
- title: 'Challenge: Pair Program with Team Viewer',
- name: 'Pair Program with Team Viewer',
- video: '',
- time: 30,
- steps: steps,
- cc: req.user ? req.user.challengesHash : undefined,
- points: req.user ? req.user.points : undefined,
- challenges: c
- });
- });
- },
-
about: function(req, res) {
var date1 = new Date("10/15/2014");
var date2 = new Date();
diff --git a/controllers/resources.json b/controllers/resources.json
index 1c3ea9abe2..1a7e038db6 100644
--- a/controllers/resources.json
+++ b/controllers/resources.json
@@ -117,34 +117,6 @@
"question": "Latency of Sending a packet from California to the Netherlands and back",
"answer": "150,000,000 nanoseconds"
}],
- "steps": [
- "In the spirit of keeping Free Code Camp 100% free, we've created directions for using a totally free pair programming tool called Team Viewer. It's not as user-friendly as Screen Hero, but it gets the job done (and works on Linux!).",
- "Go to http://www.teamviewer.com/en/index.aspx and download Team Viewer. Be sure not to download the beta version, which isn't compatible with the current stable version everyone else will be using.",
- "Install it and launch it",
- "We have a special chat room for people ready to pair program. Go to https://gitter.im/FreeCodeCamp/LetsPair and type \"Hello Pair Programmers!\". you on a CoderByte challenge.",
- "If someone is available, they will be your \"pair\" - the person you pair programming with.",
- "First, you will pair program on your pair's computer. Ask your pair for his or her Team Viewer ID and password.",
- "Enter this id, and then password, to start the session.",
- "Once the Team Viewer session starts, look at the the top of the screen. You will see 6 buttons. If you hover your cursor over the buttons, they will slide down so that you can read them. Click the audio/video button. This will allow you to turn on Voice Over IP and unmute your microphone, opening up your voice channel.",
- "Note that you can now control your pair's keyboard and mouse, enabling you to step in and code yourself on your pair's computer when desired",
- "Now you can click the X to end the pair programming session.",
- "Next, you will pair program on your computer. Copy your Team Viewer ID and paste it into the private chat, so that your pair can use it to connect with you.",
- "You will need to share your randomly generated password with your pair as well.",
- "Once your pair connects, you will see a Team Viewer side menu. ",
- "Click the audio button that drops down.",
- "Click the headset icon and choose Voice over IP",
- "Click the microphone button to unmute your microphone. Once your pair does the same, you two will have an open voice channel.",
- "Now you can click the X to end the pair programming session.",
- "Now it's time to tackle CoderByte.",
- "Create a CoderByte account at http://coderbyte.com/sl/",
- "Now go to http://coderbyte.com/CodingArea/Challenges/#easyChals and start working through Coderbyte's easy algorithm scripting challenges using JavaScript.",
- "When you are finished pair programming, click the X to end the session.",
- "Congratulations! You have completed your first pair programming session.",
- "You should pair program with different campers until you've completed all the Easy, Medium and Hard CoderByte challenges. This is a big time investment, but the JavaScript practice you'll get, along with the scripting and algorithm experience, are well worth it!",
- "You can complete CoderByte problems while you continue to work through Free Code Camp's challenges.",
- "Be sure to pair program on these challenges, and remember to apply the RSAP methodology.",
- "Click the button below to return to the Pair Programming challenge, then mark it complete."
- ],
"verbs": [
"aced",
"nailed",
diff --git a/controllers/user.js b/controllers/user.js
index 1c0f0bfca2..d637fb8906 100644
--- a/controllers/user.js
+++ b/controllers/user.js
@@ -233,7 +233,6 @@ exports.returnUser = function(req, res, next) {
username: user.profile.username,
name: user.profile.name,
location: user.profile.location,
- coderbyteProfile: user.profile.coderbyteProfile,
githubProfile: user.profile.githubProfile,
linkedinProfile: user.profile.linkedinProfile,
codepenProfile: user.profile.codepenProfile,
@@ -329,7 +328,6 @@ exports.postUpdateProfile = function(req, res, next) {
user.profile.username = req.body.username.trim() || '';
user.profile.location = req.body.location.trim() || '';
user.profile.githubProfile = req.body.githubProfile.trim() || '';
- user.profile.coderbyteProfile = req.body.coderbyteProfile.trim() || '';
user.profile.linkedinProfile = req.body.linkedinProfile.trim() || '';
user.profile.codepenProfile = req.body.codepenProfile.trim() || '';
user.profile.twitterHandle = req.body.twitterHandle.trim() || '';
diff --git a/models/Bonfire.js b/models/Bonfire.js
index d8785f7196..cee4c8413a 100644
--- a/models/Bonfire.js
+++ b/models/Bonfire.js
@@ -15,8 +15,7 @@ var bonfireSchema = new mongoose.Schema({
difficulty: String,
description: Array,
tests: Array,
- challengeSeed: String,
- challengeEntryPoint: String,
+ challengeSeed: String
});
module.exports = mongoose.model('Bonfire', bonfireSchema);
diff --git a/public/js/lib/bonfire/bonfireFramework_v0.1.1.js b/public/js/lib/bonfire/bonfireFramework_v0.1.2.js
similarity index 96%
rename from public/js/lib/bonfire/bonfireFramework_v0.1.1.js
rename to public/js/lib/bonfire/bonfireFramework_v0.1.2.js
index 03d531a5a0..4b2edebb0e 100644
--- a/public/js/lib/bonfire/bonfireFramework_v0.1.1.js
+++ b/public/js/lib/bonfire/bonfireFramework_v0.1.2.js
@@ -73,11 +73,10 @@ var editorValue;
var challengeSeed = challengeSeed || null;
var tests = tests || [];
-var challengeEntryPoint = challengeEntryPoint || null;
if (challengeSeed !== null) {
- editorValue = challengeSeed + '\n\n' + challengeEntryPoint;
+ editorValue = challengeSeed;
} else {
editorValue = nonChallengeValue;
}
@@ -121,9 +120,7 @@ function bonfireExecute() {
userJavaScript = removeComments(userJavaScript);
userJavaScript = scrapeTests(userJavaScript);
// simple fix in case the user forgets to invoke their function
- if (challengeEntryPoint && challengeSeed) {
- //userJavaScript = challengeEntryPoint + ' ' + userJavaScript;
- }
+
submit(userJavaScript, function(cls, message) {
if (cls) {
codeOutput.setValue(message.error);
diff --git a/public/js/lib/coursewares/coursewaresFramework_v0.1.1.js b/public/js/lib/coursewares/coursewaresHCJQFramework_v0.1.1.js
similarity index 80%
rename from public/js/lib/coursewares/coursewaresFramework_v0.1.1.js
rename to public/js/lib/coursewares/coursewaresHCJQFramework_v0.1.1.js
index 026f36c04e..236c80b05a 100644
--- a/public/js/lib/coursewares/coursewaresFramework_v0.1.1.js
+++ b/public/js/lib/coursewares/coursewaresHCJQFramework_v0.1.1.js
@@ -59,28 +59,42 @@ editor.on("change", function () {
});
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);
/**
- * Window postMessage receiving funtionality
+ * "post" methods
*/
-var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
-var eventer = window[eventMethod];
-var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
-// Listen to message from child window
-eventer(messageEvent,function(e) {
- if (e.data === 'CompleteAwesomeSauce') {
+var postSuccess = function(data) {
+ var testDoc = document.createElement("div");
+ $(testDoc)
+ .html("")
+ .appendTo($('#testSuite'));
+ testSuccess();
+};
+
+var postError = function(data) {
+ var testDoc = document.createElement("div");
+ $(testDoc)
+ .html("")
+ .prependTo($('#testSuite'))
+};
+var goodTests = 0;
+var testSuccess = function() {
+ goodTests++;
+ if (goodTests === tests.length) {
showCompletion();
}
-},false);
-
+};
var challengeSeed = challengeSeed || null;
var tests = tests || [];
var allSeeds = '';
@@ -115,13 +129,12 @@ function doLinting () {
});
};
-
+//$('#testSuite').empty();
function showCompletion() {
var time = Math.floor(Date.now() / 1000) - started;
ga('send', 'event', 'Challenge', 'solved', challengeName + ', Time: ' + time);
$('#next-courseware-button').removeAttr('disabled');
$('#next-courseware-button').addClass('animated tada');
- console.log(!userLoggedIn);
if (!userLoggedIn) {
$('#complete-courseware-dialog').modal('show');
}
diff --git a/public/js/lib/coursewares/coursewaresJSFramework.js b/public/js/lib/coursewares/coursewaresJSFramework.js
new file mode 100644
index 0000000000..60af334324
--- /dev/null
+++ b/public/js/lib/coursewares/coursewaresJSFramework.js
@@ -0,0 +1,234 @@
+var widgets = [];
+var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("codeEditor"), {
+ lineNumbers: true,
+ mode: "javascript",
+ theme: 'monokai',
+ runnable: true,
+ lint: true,
+ matchBrackets: true,
+ autoCloseBrackets: true,
+ scrollbarStyle: 'null',
+ lineWrapping: true,
+ gutters: ["CodeMirror-lint-markers"],
+ onKeyEvent: doLinting
+});
+var editor = myCodeMirror;
+editor.setSize("100%", "auto");
+
+// Hijack tab key to enter two spaces intead
+editor.setOption("extraKeys", {
+ Tab: function(cm) {
+ var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+ cm.replaceSelection(spaces);
+ },
+ "Ctrl-Enter": function() {
+ bonfireExecute();
+ return false;
+ }
+});
+
+
+
+var attempts = 0;
+if (attempts) {
+ attempts = 0;
+}
+
+
+var codeOutput = CodeMirror.fromTextArea(document.getElementById("codeOutput"), {
+ lineNumbers: false,
+ mode: "text",
+ theme: 'monokai',
+ readOnly: 'nocursor',
+ lineWrapping: true
+});
+
+codeOutput.setValue('/**\n' +
+' * Your output will go here.\n' + ' * Console.log() -type statements\n' +
+' * will appear in your browser\'s\n' + ' * DevTools JavaScript console.\n' +
+' */');
+codeOutput.setSize("100%", "100%");
+var info = editor.getScrollInfo();
+var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
+if (info.top + info.clientHeight < after)
+ editor.scrollTo(null, after - info.clientHeight + 3);
+
+var editorValue;
+
+
+var challengeSeed = challengeSeed || null;
+var tests = tests || [];
+
+var allSeeds = '';
+(function() {
+ challengeSeed.forEach(function(elem) {
+ allSeeds += elem + '\n';
+ });
+})();
+
+editorValue = allSeeds;
+
+
+myCodeMirror.setValue(editorValue);
+
+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
+ }));
+ }
+ });
+};
+
+$('#submitButton').on('click', function () {
+ bonfireExecute();
+});
+
+function bonfireExecute() {
+ attempts++;
+ ga('send', 'event', 'Challenge', 'ran-code', challengeName);
+ userTests= null;
+ $('#codeOutput').empty();
+ var userJavaScript = myCodeMirror.getValue();
+ userJavaScript = removeComments(userJavaScript);
+ userJavaScript = scrapeTests(userJavaScript);
+ // simple fix in case the user forgets to invoke their function
+
+ submit(userJavaScript, function(cls, message) {
+ if (cls) {
+ codeOutput.setValue(message.error);
+ runTests('Error', null);
+ } else {
+ codeOutput.setValue(message.output);
+ message.input = removeLogs(message.input);
+ runTests(null, message);
+ }
+ });
+}
+
+
+var userTests;
+var testSalt = Math.random();
+
+
+var scrapeTests = function(userJavaScript) {
+
+ // insert tests from mongo
+ for (var i = 0; i < tests.length; i++) {
+ userJavaScript += '\n' + tests[i];
+ }
+
+ var counter = 0;
+ var regex = new RegExp(/(expect(\s+)?\(.*\;)|(assert(\s+)?\(.*\;)|(assert\.\w.*\;)|(.*\.should\..*\;)/);
+ var match = regex.exec(userJavaScript);
+ while (match != null) {
+ var replacement = '//' + counter + testSalt;
+ userJavaScript = userJavaScript.substring(0, match.index) + replacement + userJavaScript.substring(match.index + match[0].length);
+
+ if (!userTests) {
+ userTests= [];
+ }
+ userTests.push({"text": match[0], "line": counter, "err": null});
+ counter++;
+ match = regex.exec(userJavaScript);
+ }
+
+ return userJavaScript;
+};
+
+function removeComments(userJavaScript) {
+ var regex = new RegExp(/(\/\*[^(\*\/)]*\*\/)|\/\/[^\n]*/g);
+ return userJavaScript.replace(regex, '');
+}
+
+function removeLogs(userJavaScript) {
+ return userJavaScript.replace(/(console\.[\w]+\s*\(.*\;)/g, '');
+}
+
+var pushed = false;
+var createTestDisplay = function() {
+ if (pushed) {
+ userTests.pop();
+ }
+ for (var i = 0; i < userTests.length;i++) {
+ var test = userTests[i];
+ var testDoc = document.createElement("div");
+ if (test.err != null) {
+ console.log('Should be displaying bad tests');
+ $(testDoc)
+ .html("
" + test.text + "
" + test.err + "
Hello
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -39,8 +79,7 @@
"challengeSeed": [
"hello world
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -59,8 +98,7 @@
"hello world
",
"hello html
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -80,8 +118,7 @@
"hello html
",
"hello paragraph
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -105,8 +142,7 @@
"",
"hello paragraph
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -116,7 +152,7 @@
"description": [
"Comment out the h1 element and the p element, but leave the h2 element uncommented.",
"Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->.",
- "Here you'll need to end the comment before the h2 element begins."
+ "Here you'll need to end the comment before the h2 element begins."
],
"tests": [
"expect($('h1')).to.not.exist;",
@@ -131,8 +167,7 @@
"",
"hello paragraph
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -141,9 +176,9 @@
"difficulty" : "0.06",
"description": [
"Change the text in the p element to use the first few words of lorem ipsum text.",
- "Designers use lorem ipsum as placeholder text. It's called lorem ipsum text because it's those are the first two words of a passage by Cicero of Ancient Rome.",
- "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
- "Here are the first 25 words of lorem ipsum text, which you can copy and paste into the right position: \"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.\""
+ "Designers use lorem ipsum as placeholder text. It's called lorem ipsum text because it's those are the first two words of a passage by Cicero of Ancient Rome.",
+ "lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
+ "Here are the first 25 words of lorem ipsum text, which you can copy and paste into the right position: 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."
],
"tests": [
"expect((/Lorem(\\s)+ipsum(\\s)+dolor/gi).test($('p').text())).to.be.true;"
@@ -153,8 +188,7 @@
"cat photo app
",
"hello paragraph
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -164,19 +198,18 @@
"description": [
"Change the h2 element's style so that its text color is red.",
"We can do this by changing the style of the h2 element.",
- "The style responsible for the color of an element's text is the \"color\" style.",
+ "The style responsible for the color of an element's text is the color style.",
"Here's how you would set the h2 element's text color to blue: <h2 style=\"color: blue\">cat photo app<h2>"
],
"tests": [
- "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');"
+ "expect($('h2')).to.have.css('color', '#ff0000');"
],
"challengeSeed": [
"hello world
",
"cat photo app
",
"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.
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -184,7 +217,7 @@
"name": "Create a Style Tag for CSS",
"difficulty" : "0.08",
"description": [
- "Create a style tag and write the CSS to make all h2 elements blue.",
+ "Create a style tag and write the CSS to make all h2 elements blue.",
"With CSS, there are hundreds of CSS attributes that you can use to change the way an element looks on a web page.",
"When you entered <h2 style=\"color: red\">hello html<h2>, you were giving that individual h2 element an inline style",
"That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).",
@@ -193,15 +226,14 @@
"Note that it's important to have an opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of the element's styles."
],
"tests": [
- "expect($('h2')).to.have.css('color', 'rgb(0, 0, 255)');"
+ "expect($('h2')).to.have.css('color', '#0000ff');"
],
"challengeSeed": [
"hello world
",
"cat photo app
",
"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.
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -209,13 +241,13 @@
"name": "Use a CSS Class to Style an Element",
"difficulty" : "0.09",
"description": [
- "Create a CSS class called .red-text and apply it to the h2 element.",
- "Classes are reusable styles that can be added to HTML elements.",
- "Classes always start with a period. You can see that we've created a CSS class called .blue-text within the <style> tag.",
- "You can follow that pattern to make a .red-text class, which you can attach to HTML elements by using the class=\"class\" within the relevant element's opening tag."
+ "Create a CSS class called red-text and apply it to the h2 element.",
+ "classes are reusable styles that can be added to HTML elements.",
+ "Classes always start with a period. You can see that we've created a CSS class called blue-text within the <style> tag.",
+ "You can follow that pattern to make a red-text class, which you can attach to HTML elements by using the class=\"class\" within the relevant element's opening tag."
],
"tests": [
- "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
+ "expect($('h2')).to.have.css('color', '#ff0000');",
"expect($('h2')).to.have.class('red-text');"
],
"challengeSeed": [
@@ -224,12 +256,11 @@
" color: blue;",
" }",
"",
- "hello world
",
+ "hello world
",
"cat photo app
",
"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.
"
],
- "challengeType": 0,
- "completionMessage": ""
+ "challengeType": 0
},
{
@@ -244,9 +275,9 @@
"expect($('h1')).to.have.class('red-text');",
"expect($('h2')).to.have.class('red-text');",
"expect($('p')).to.have.class('red-text');",
- "expect($('h1')).to.have.css('color', 'rgb(255, 0, 0)');",
- "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
- "expect($('p')).to.have.css('color', 'rgb(255, 0, 0)');"
+ "expect($('h1')).to.have.css('color', '#ff0000');",
+ "expect($('h2')).to.have.css('color', '#ff0000');",
+ "expect($('p')).to.have.css('color', '#ff0000');"
],
"challengeSeed": [
"