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

fix issue with codemirror framework and script tag rendering

Browse Source
This commit is contained in:
Quincy Larson
2015-07-31 16:38:12 -07:00
parent 2833e96091
commit ae38aab8cc
3 changed files with 69 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/js/lib/coursewares/coursewaresHCJQFramework_0.1.9.js
View File

@ -110,21 +110,6 @@ var testSuccess = function() {
}
};
var challengeSeed = challengeSeed || null;
var allSeeds = '';
(function() {
challengeSeed.forEach(function(elem) {
allSeeds += elem.replace(/fccss/g, '<script>').replace(/fcces/g,'</script>') + '\n';
});
editor.setValue(allSeeds);
(function() {
setTimeout(function() {
editor.refresh();
}, 200);
})();
})();
function doLinting () {
editor.operation(function () {
for (var i = 0; i < widgets.length; ++i)
@ -263,3 +248,17 @@ var resetEditor = function resetEditor() {
updatePreview();
codeStorage.updateStorage();
};
var challengeSeed = challengeSeed || null;
var allSeeds = '';
(function() {
challengeSeed.forEach(function(elem) {
allSeeds += elem.replace(/fccss/g, '<script>').replace(/fcces/g,'</script>') + '\n';
});
editor.setValue(allSeeds);
(function() {
setTimeout(function() {
editor.refresh();
}, 200);
})();
})();

54
seed/challenges/bootstrap.json
View File

@ -12,7 +12,7 @@
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
"With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
"You can add Bootstrap to any app just by including it with <code>&#60;link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/&#62;</code> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
"To get started, we should wrap all of our HTML in a <code>div</code> element with the class \"fluid-container\"."
"To get started, we should nest all of our HTML in a <code>div</code> element with the class \"fluid-container\"."
],
"tests": [
"assert($('div').hasClass('container-fluid'), 'Your <code>div</code> element should have the class \"row\"')",
@ -703,12 +703,12 @@
"<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, the <code>col-md-*</code> class is being used. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"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.",
"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.",
"The \"row\" class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it."
"Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by nesting 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.",
"The \"row\" class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
],
"tests": [
"assert($('div.row:has(button)').length > 0, 'Your buttons should all be wrapped within the same <code>div</code> element with the class \"row\".')",
"assert($('div.col-xs-4:has(button)').length > 2, 'Each of your Bootstrap buttons should be wrapped within its own <code>div</code> element with the class \"col-xs-4\".')",
"assert($('div.row:has(button)').length > 0, 'Your buttons should all be nested within the same <code>div</code> element with the class \"row\".')",
"assert($('div.col-xs-4:has(button)').length > 2, 'Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class \"col-xs-4\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure each of your <code>button</code> elements has a closing tag.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
@ -897,13 +897,13 @@
"<a href='http://getbootstrap.com/css/#grid' 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 \"col-md-*\" 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 \"col-xs-*\", where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
"Wrap your first image and your <code>h2</code> element within a single <code>&#60;div class='row'&#62;</code> element. Wrap your <code>h2</code> text within a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</code> so that they are on the same line.",
"Nest your first image and your <code>h2</code> element within a single <code>&#60;div class='row'&#62;</code> element. Nest your <code>h2</code> text within a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</code> so that they are on the same line.",
"Notice how the image is now just the right size to fit along the text?"
],
"tests": [
"assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0, 'Your <code>h2</code> element and topmost <code>img</code> element should both be wrapped together within a <code>div</code> element with the class \"row\".')",
"assert($('div.col-xs-4:has(img)').length > 0, 'Wrap your topmost <code>img</code> element within a <code>div</code> with the class \"col-xs-4\".')",
"assert($('div.col-xs-8:has(h2)').length > 0, 'Wrap your <code>h2</code> element within a <code>div</code> with the class \"col-xs-8\".')",
"assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0, 'Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class \"row\".')",
"assert($('div.col-xs-4:has(img)').length > 0, 'Nest your topmost <code>img</code> element within a <code>div</code> with the class \"col-xs-4\".')",
"assert($('div.col-xs-8:has(h2)').length > 0, 'Nest your <code>h2</code> element within a <code>div</code> with the class \"col-xs-8\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -985,7 +985,7 @@
],
"tests": [
"assert($('i').hasClass('fa fa-thumbs-up'), 'Add an <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')",
"assert($('button').children('i').length > 0, 'Wrap your <code>i</code> element within your <code>button</code> element.')",
"assert($('button').children('i').length > 0, 'Nest your <code>i</code> element within your <code>button</code> element.')",
"assert(editor.match(/<\\/i>/g), 'Make sure your <code>i</code> element has a closing tag.')"
],
"challengeSeed": [
@ -1151,11 +1151,11 @@
"difficulty": 2.14,
"description": [
"You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Wrap all of your radio buttons within a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them within a <code>&#60;div class='col-xs-6'&#62;</code> element."
"Nest all of your radio buttons within a <code>&#60;div class='row'&#62;</code> element. Then nest each of them within a <code>&#60;div class='col-xs-6'&#62;</code> element."
],
"tests": [
"assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Wrap all of your radio buttons inside one <code>div</code> with the class \"row\".')",
"assert($('div.col-xs-6:has(input[type=\\'radio\\'])').length > 1, 'Wrap each of your radio buttons inside its own <code>div</code> with the class \"col-xs-6\".')",
"assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Nest all of your radio buttons inside one <code>div</code> with the class \"row\".')",
"assert($('div.col-xs-6:has(input[type=\\'radio\\'])').length > 1, 'Nest each of your radio buttons inside its own <code>div</code> with the class \"col-xs-6\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1236,11 +1236,11 @@
"difficulty": 2.15,
"description": [
"You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Wrap all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</code> element."
"Nest all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then nest each of them in a <code>&#60;div class='col-xs-4'&#62;</code> element."
],
"tests": [
"assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Wrap all of your checkboxes inside one <code>div</code> with the class \"row\".')",
"assert($('div.col-xs-4:has(input[type=\\'checkbox\\'])').length > 2, 'Wrap each of your checkboxes inside its own <code>div</code> with the class \"col-xs-4\".')",
"assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Nest all of your checkboxes inside one <code>div</code> with the class \"row\".')",
"assert($('div.col-xs-4:has(input[type=\\'checkbox\\'])').length > 2, 'Nest each of your checkboxes inside its own <code>div</code> with the class \"col-xs-4\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1429,13 +1429,13 @@
"difficulty": 2.17,
"description": [
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class \"row\", and other <code>div</code> elements within it using the \"col-xs-*\" class.",
"Wrap both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class \"row\". Wrap your form's text <code>input</code> within a div with the class of \"col-xs-7\". Wrap your form's submit <code>button</code> in a <code>div</code> with the class \"col-xs-5\".",
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class \"row\". Nest your form's text <code>input</code> within a div with the class of \"col-xs-7\". Nest your form's submit <code>button</code> in a <code>div</code> 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($('div.row:has(input[type=\\'text\\'])').length > 0 && $('div.row:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button and text area in a div with class \"row\".')",
"assert($('div.col-xs-5:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button in a div with the class \"col-xs-5\".')",
"assert($('div.col-xs-7:has(input[type=\\'text\\'])').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')",
"assert($('div.row:has(input[type=\\'text\\'])').length > 0 && $('div.row:has(button[type=\\'submit\\'])').length > 0, 'Nest your form submission button and text area in a div with class \"row\".')",
"assert($('div.col-xs-5:has(button[type=\\'submit\\'])').length > 0, 'Nest your form submission button in a div with the class \"col-xs-5\".')",
"assert($('div.col-xs-7:has(input[type=\\'text\\'])').length > 0, 'Nest your form text area in a div with the class \"col-xs-7\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1566,7 +1566,7 @@
"difficulty": 2.18,
"description": [
"Now let's make sure all the content on your page is mobile-responsive.",
"Let's wrap your <code>h3</code> element within a <code>div<code> element with the class \"containter-fluid\"."
"Let's nest your <code>h3</code> element within a <code>div<code> element with the class \"containter-fluid\"."
],
"tests": [
"assert($('div').hasClass('container-fluid'), 'Your <code>div</code> element should have the class \"row\"')",
@ -1632,7 +1632,7 @@
"Create two <code>div</code> elements within your row, both with the class \"col-xs-6\"."
],
"tests": [
"assert($('div.row').children('div.col-xs-6').length > 1, 'Wrap two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert($('div.row').children('div.col-xs-6').length > 1, 'Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
],
"challengeSeed": [
@ -1661,12 +1661,12 @@
"difficulty": 2.21,
"description": [
"Bootstrap has a class called \"well\" that can create a visual sense of depth for your columns.",
"Wrap one <code>div</code> element with the class \"well\" within each of your \"col-xs-6\" <code>div</code> elements."
"Nest one <code>div</code> element with the class \"well\" within each of your \"col-xs-6\" <code>div</code> elements."
],
"tests": [
"assert($('div').length > 4, 'Add two <code>div</code> elements inside your <code>div class=\"row\"></code> element both with the class \"col-xs-6\"')",
"assert($('div.row').children('div.col-xs-6').length > 1, 'Wrap both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert($('div.col-xs-6').children('div.well').length > 1, 'Wrap both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert($('div.row').children('div.col-xs-6').length > 1, 'Nest both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert($('div.col-xs-6').children('div.well').length > 1, 'Nest both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
],
"challengeSeed": [
@ -1699,10 +1699,10 @@
"difficulty": 2.22,
"description": [
"Now we're several <code>div</code> elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our <code>button</code> elements.",
"Wrap three <code>button</code> elements within each of your \"well\" <code>div</code> elements."
"Nest three <code>button</code> elements within each of your \"well\" <code>div</code> elements."
],
"tests": [
"assert($('div.well').children('button').length > 5, 'Wrap three <code>button</code> elements within each of your <code>div</code> elements with class \"well\".')",
"assert($('div.well').children('button').length > 5, 'Nest three <code>button</code> elements within each of your <code>div</code> elements with class \"well\".')",
"assert($('button') && $('button').length > 5, 'You should have a total of 6 <code>button</code> elements.')"
],
"challengeSeed": [

50
seed/challenges/html5-and-css.json
View File

@ -1104,20 +1104,21 @@
},
{
"id": "bad87fee1348bd9aede08817",
"name": "Waypoint: Wrap an Anchor Element within a Paragraph",
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
"name": "Waypoint: Nest an Anchor Element within a Paragraph",
"dashedName": "waypoint-nest-an-anchor-element-within-a-paragraph",
"difficulty": 1.23,
"description": [
"Again, here's a diagram of an <code>a</code> element for your reference:",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"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>.",
"Now wrap your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text."
"\"Nesting\" just means putting one element inside of another element.",
"Now nest your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text."
],
"tests": [
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
"assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
"assert($('p') && $('p').length > 2, 'Create a new <code>p</code> element around your <code>a</code> element. \"click here for\".')",
"assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your <code>a</code> element should be wrapped within your new <code>p</code> element.')",
"assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your <code>a</code> element should be nested within your new <code>p</code> element.')",
"assert($('p').text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
@ -1252,14 +1253,14 @@
"dashedName": "waypoint-turn-an-image-into-a-link",
"difficulty": 1.25,
"description": [
"You can make elements into links by wrapping them within an <code>a</code> element.",
"Wrap your image within an <code>a</code> element. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>.",
"You can make elements into links by nesting them within an <code>a</code> element.",
"Nest your image within an <code>a</code> element. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>.",
"Remember to use the hash symbol (#) as your <code>a</code> element's <code>href</code> property in order to turn it into a dead 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": [
"assert(new RegExp('#').test($('a').children('img').parent().attr('href')), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')",
"assert($('a').children('img').length > 0, 'Wrap your image element within an <code>a</code> element.')",
"assert($('a').children('img').length > 0, 'Nest your image element within an <code>a</code> element.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1398,7 +1399,12 @@
"description": [
"HTML has a special element for creating unordered lists, or bullet point-style lists.",
"Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: <code>&#60;ul&#62;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;/ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\".",
"For example: ",
"<code>&#60;ul&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;milk&#60;/li&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;cheese&#60;/li&#62;</code>",
"<code>&#60;/ul&#62;</code>",
"would create a bulleted list of \"milk\" and \"cheese\".",
"Replace your <code>p</code> elements with an unordered list of three things that cats love."
],
"tests": [
@ -1710,10 +1716,10 @@
"description": [
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
"For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>.",
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
"Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
],
"tests": [
"assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
"assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Nest your text input element within a <code>form</code> element.')",
"assert($('form').attr('action'), 'Your <code>form</code> element should have an <code>action</code> attribute.')",
"assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'Make sure your <code>form</code> element has a closing tag.')",
"assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your <code>form</code> action is set to <code>/submit-cat-photo</code>.')"
@ -1958,15 +1964,15 @@
"description": [
"You can use \"radio buttons\" for questions where you want the user to only give you one answer.",
"Radio buttons are a type of <code>input</code>.",
"Each of your radio buttons should be wrapped within its own <code>label</code> element.",
"Each of your radio buttons should be nested within its own <code>label</code> element.",
"All related radio buttons should have the same <code>name</code> attribute.",
"Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>.",
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
"Add to your form a pair of radio buttons. Each radio button should be nested within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
],
"tests": [
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')",
"assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')",
"assert($('label').length > 1, 'Each of your two radio button elements should be nested in a label element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($('label').text().match(/indoor/gi), 'One of your radio buttons should have the label \"indoor\".')",
"assert($('label').text().match(/outdoor/gi), 'One of your radio buttons should have the label \"outdoor\".')"
@ -2051,14 +2057,14 @@
"description": [
"Forms commonly use \"checkboxes\" for questions that may have more than one answer.",
"Checkboxes are a type of <code>input</code>.",
"Each of your checkboxes should be wrapped within its own <code>label</code> element.",
"Each of your checkboxes should be nested within its own <code>label</code> element.",
"All related checkbox inputs should have the same <code>name</code> attribute.",
"Here's an example of a checkbox: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>.",
"Add to your form a set of three checkboxes. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
],
"tests": [
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
"assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be wrapped in its own <code>label</code> element.')",
"assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($('input[type=\"checkbox\"]:nth-child(1)').attr('name') === 'personality', 'Give your checkboxes buttons the <code>name</code> attribute of \"personality\".')"
],
@ -2223,20 +2229,20 @@
},
{
"id": "bad87fee1348bd9aede08835",
"name": "Waypoint: Wrap Many Elements within a Single Div Element",
"dashedName": "waypoint-wrap-many-elements-within-a-single-div-element",
"name": "Waypoint: Nest Many Elements within a Single Div Element",
"dashedName": "waypoint-nest-many-elements-within-a-single-div-element",
"difficulty": 1.38,
"description": [
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
"Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
],
"tests": [
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
"assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
"assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')",
"assert($('div').children('ol').length > 0, 'Nest your <code>ol</code> element inside your <code>div</code> element.')",
"assert($('div').children('p').length > 1, 'Nest your <code>p</code> element inside your <code>div</code> element.')",
"assert($('div').children('ul').length > 0, 'Nest your <code>ul</code> element inside your <code>div</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
],
"challengeSeed": [