2307 lines
67 KiB
JSON
2307 lines
67 KiB
JSON
[
|
|
{
|
|
"_id" : "bd7123c8c441eddfaeb5bdef",
|
|
"name": "Start our Challenges",
|
|
"difficulty": "0.00",
|
|
"description": [
|
|
"Welcome to Free Code Camp's first challenge! Click on the button below for further instructions.",
|
|
"Awesome. Now you can read the rest of this challenge's instructions.",
|
|
"You can edit <code>code</code> in the <code>text editor</code> we've embedded into this web page.",
|
|
"Do you see the code in the text editor that says <code><h1>hello</h1></code>? That's an HTML <code>element</code>.",
|
|
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code><h1></code>. Closing tags look like this: <code></h1></code>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.",
|
|
"To advance to the next exercise, change the h1 tag's text to say \"hello world\" instead of \"hello\"."
|
|
],
|
|
"tests": [
|
|
"expect((/hello(\\s)+world/gi).test($('h1').text())).to.be.true;"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf0887a",
|
|
"name": "Use the h2 Element",
|
|
"difficulty" : "0.01",
|
|
"description": [
|
|
"Add an h2 tag that says \"cat photo app\" to create a second HTML element below the \"hello world\" h1 element.",
|
|
"The h2 element you enter will create an h2 element on the website.",
|
|
"This element tells the browser how to render the text that it contains.",
|
|
"h2 elements are slightly smaller than h1 elements. There are also an h3, h4, h5 and h6 elements."
|
|
],
|
|
"tests": [
|
|
"expect((/hello(\\s)+world/gi).test($('h1').text())).to.be.true;",
|
|
"expect((/cat(\\s)+photo(\\s)+app/gi).test($('h2').text())).to.be.true;"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08801",
|
|
"name": "Use the P Element",
|
|
"difficulty" : "0.02",
|
|
"description": [
|
|
"Create a p - or paragraph - element below the h2 element, and give it the text \"hello paragraph\".",
|
|
"P elements are the preferred element for normal-sized paragraph text on websites.",
|
|
"You can create a p element like so: <code><p>I'm a p tag!</p></code>"
|
|
],
|
|
"tests": [
|
|
"expect((/hello(\\s)+paragraph/gi).test($('p').text())).to.be.true;"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>",
|
|
"<h2>hello html</h2>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aeaf08801",
|
|
"name": "Add a Line Break to Visually Separate Elements",
|
|
"difficulty" : "0.03",
|
|
"description": [
|
|
"Add a <code>line break</code> between the <code><h2></code> and <code><p></code> elements.",
|
|
"You can create an line break element with <code><br/></code>.",
|
|
"Note that <code><br/></code> has no closing tag. It is a <code>self-closing</code> element. See how a forward-slash precedes the closing bracket?"
|
|
],
|
|
"tests": [
|
|
"expect($('br')).to.exist;"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>",
|
|
"<h2>hello html</h2>",
|
|
"<p>hello paragraph</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08802",
|
|
"name": "Uncomment HTML",
|
|
"difficulty" : "0.04",
|
|
"description": [
|
|
"Uncomment the h1, h2 and p elements.",
|
|
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
|
|
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
|
|
"You can start a comment with <code><!--</code> and end a comment with <code>--></code>."
|
|
],
|
|
"tests": [
|
|
"expect((/hello(\\s)+world/gi).test($('h1').text())).to.be.true;"
|
|
],
|
|
"challengeSeed": [
|
|
"<!--",
|
|
"<h1>hello world</h1>",
|
|
"",
|
|
"<h2>cat photo app</h2>",
|
|
"",
|
|
"<p>hello paragraph</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08804",
|
|
"name": "Comment out HTML",
|
|
"difficulty" : "0.05",
|
|
"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 <code><!--</code> and to end a comment, you need to use <code>--></code>.",
|
|
"Here you'll need to end the comment before the h2 element begins."
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.not.exist;",
|
|
"expect($('h2')).to.exist;",
|
|
"expect($('p')).to.not.exist;"
|
|
],
|
|
"challengeSeed": [
|
|
"<!--",
|
|
"<h1>hello world</h1>",
|
|
"",
|
|
"<h2>cat photo app</h2>",
|
|
"",
|
|
"<p>hello paragraph</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08833",
|
|
"name": "Use Lorem Ipsum Text as a Placeholder",
|
|
"difficulty" : "0.06",
|
|
"description": [
|
|
"Change the text in the p element to use the first few words of lorem ipsum text.",
|
|
"Designers use <code>lorem ipsum</code> 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: \"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;"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>hello paragraph</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08803",
|
|
"name": "Change the Color of Text",
|
|
"difficulty" : "0.07",
|
|
"description": [
|
|
"Change the h2 element's style so that its text color is red.",
|
|
"We can do this by changing the <code>style</code> of the h2 element.",
|
|
"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: <code><h2 style=\"color: blue\">cat photo app<h2></code>"
|
|
],
|
|
"tests": [
|
|
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08805",
|
|
"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.",
|
|
"With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page.",
|
|
"When you entered <code><h2 style=\"color: red\">hello html<h2></code>, you were giving that individual h2 element an <code>inline style</code>",
|
|
"That's one way to add style to an element, but a better way is by using <code>Cascading Style Sheets (CSS)</code>.",
|
|
"At the top of your code, create a <code>style tag</code> like this: <code><style></style></code>",
|
|
"Inside that style element, you can create a <code>global style</code> for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <code><style>h2: {color: red;}</style></code>",
|
|
"Note that it's important to have an <code>opening and closing curly braces</code> (<code>{</code> and <code>}</code>) 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)');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aecf08806",
|
|
"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 <code>.blue-text</code> within the <code><style></code> tag.",
|
|
"You can follow that pattern to make a <code>.red-text</code> class, which you can attach to HTML elements by using the <code>class=\"class\"</code> within the relevant element's opening tag."
|
|
],
|
|
"tests": [
|
|
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
|
|
"expect($('h2')).to.have.class('red-text');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .blue-text {",
|
|
" color: blue;",
|
|
" }",
|
|
"</style>",
|
|
"<h1 class=\"red-text\">hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aeff08806",
|
|
"name": "Use a CSS Class to Style Multiple Elements",
|
|
"difficulty" : "0.10",
|
|
"description": [
|
|
"Apply the \"red-text\" class to the h1, h2 and p elements.",
|
|
"Remember that you can attach classes to HTML elements by using the <code>class=\"class\"</code> within the relevant element's opening tag."
|
|
],
|
|
"tests": [
|
|
"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)');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"</style>",
|
|
"<h1 class=\"red-text\">hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08806",
|
|
"name": "Change the Font Size of an Element",
|
|
"difficulty" : "0.11",
|
|
"description": [
|
|
"Set the font size of all p elements to 16 pixels",
|
|
"Font size is controlled by the <code>font-size</code> CSS attribute.",
|
|
"We've already set the font-size attribute for all h2 elements. See if you can figure out how to give all p elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for h1."
|
|
],
|
|
"tests": [
|
|
"expect($('p')).to.have.css('font-size', '16px');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" h2 {",
|
|
" color: red;",
|
|
" font-size: 24px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08807",
|
|
"name": "Import a Google Font",
|
|
"difficulty" : "0.12",
|
|
"description": [
|
|
"Apply the font-family of Lobster to all h1 elements.",
|
|
"The first line of code in your text editor is a <code>call</code> to Google that grabs a font called Lobster and loads it into your HTML.",
|
|
"You'll notice that we've already applied the <code>font-family</code> of Lobster to all h2 elements. Now you should also apply it to all h1 elements."
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.css('font-family', 'Lobster');"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
|
"<style>",
|
|
" h2 {",
|
|
" color: red;",
|
|
" font-size: 24px;",
|
|
" font-family: \"Lobster\"",
|
|
" }",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08808",
|
|
"name": "Specify How Fonts Should Degrade",
|
|
"difficulty" : "0.13",
|
|
"description": [
|
|
"Make all h2 elements use Lobster as their font family, but degrade to the Serif font when the Lobster font isn't available.",
|
|
"We commented out our call to Google Fonts, and now our lobter isn't available.",
|
|
"You can leave Lobster as the font, and have it <code>degrade</code> to a different font if that font isn't available.",
|
|
"There are several default fonts that are availble in all browsers. These include Monospace, Serif and Sans-Serif. See if you can set the h2 elements to use Lobster and degrade to monospace."
|
|
],
|
|
"tests": [
|
|
"expect($('h2')).to.have.css('font-family').match(/serif/i);",
|
|
"expect($('h2')).to.have.css('font-family').match(/lobster/i);"
|
|
],
|
|
"challengeSeed": [
|
|
"<!--<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>-->",
|
|
"<style>",
|
|
" h1 {",
|
|
" font-family: \"Lobster\", Monospace",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08809",
|
|
"name": "Using Important to Override Styles",
|
|
"difficulty" : "0.14",
|
|
"description": [
|
|
"Apply both the \"blue-text\" and \"urgently-red\" classes to all h2 elements, but use <code>!important</code> to ensure the element is rendered as being red.",
|
|
"Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.",
|
|
"If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.",
|
|
"There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use <code>!important</code>.",
|
|
"Look at the example in the editor's style tag to see how you can use !important.",
|
|
"Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations."
|
|
],
|
|
"tests": [
|
|
"expect($('h2')).to.have.class('urgently-red');",
|
|
"expect($('h2')).to.have.class('blue-text');",
|
|
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" big-font : {",
|
|
" font-size: 50px !important;",
|
|
" }",
|
|
"",
|
|
" .urgently-red {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" .blue-text {",
|
|
" color: blue;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"blue-text urgently-red\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08810",
|
|
"name": "Use Hex Codes for Precise Colors",
|
|
"difficulty" : "0.15",
|
|
"description": [
|
|
"Change the hex code in the \"red-text\" class to hex code for the color red.",
|
|
"<code>Hexadecimal (hex) code</code> is a popular way of specifying color in CSS.",
|
|
"Hex code is called \"hex\" because each digit has 16 possible values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f",
|
|
"The six hex code correspond to red-red-green-green-blue-blue.",
|
|
"You can change these six values to make more than 16 million colors!",
|
|
"The higher the value in a field, the more intense its color. For example, #000000 is black, #ffffff is white, and #00ff00 is bright green. You can also get less intense colors by using values lower than f. For example, #00f000 with the second green digit set to 0 is a light green, and #00f900 is a slightly brighter green",
|
|
"Now figure out how to make the bright green in the \"red-text\" class into a bright red."
|
|
],
|
|
"tests": [
|
|
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
|
|
"expect($('h2')).to.have.class('red-text');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #00ff00;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9bedf08810",
|
|
"name": "Use Shortened 3 Digit Hex Codes",
|
|
"difficulty" : "0.16",
|
|
"description": [
|
|
"Change the hex code in the \"red-text\" class to the shortened 3-digit hex code for the color red.",
|
|
"You can also shorten the 6-digit color hex code to a 3-digit code. For example, <code>#00ff00</code> becomes <code>#0f0</code>. This is less precise, but equally effective."
|
|
],
|
|
"tests": [
|
|
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
|
|
"expect($('h2')).to.have.class('red-text');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #0f0;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08811",
|
|
"name": "Use RGB Codes for Precise Colors",
|
|
"difficulty" : "0.17",
|
|
"description": [
|
|
"Change the RGB code to be red.",
|
|
"Another way to represent color in CSS is with RGB, or red-green-blue notation.",
|
|
"For each of the three colors, you specify a value between 0 and 256.",
|
|
"For example, black is <code>rgb(0, 0, 0)</code>, white is <code>rgb(255, 255, 255)</code>, bright green is <code>rgb(0, 255, 0)</code>. You can also get less intense colors by using values lower than 255. For example, light green is <code>rgb(0, 123, 0).",
|
|
"If you think about it, this is just as precise as using hex code, because 16 times 16 is 256. In practice, most developers use hex code since it's faster to say out loud and to type."
|
|
],
|
|
"tests": [
|
|
"expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
|
|
"expect($('h2')).to.have.class('red-text');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: rgb(0, 255, 0);",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08812",
|
|
"name": "Add an Image to your Website",
|
|
"difficulty" : "0.18",
|
|
"description": [
|
|
"Use an img element to add the image <code>http://bit.ly/cutegraycat</code> to your website.",
|
|
"You can add images to your website by using the <code>img</code> element.",
|
|
"An example of this would be <code><img src=\"www.your-image-source.com/your-image.jpg\"/></code>. Note that in most cases, <code>img</code> elements are self-closing.",
|
|
"Try it with this image: <code>http://bit.ly/cutegraycat</code>."
|
|
],
|
|
"tests": [
|
|
"expect($('img').attr('src')).to.equal('http://bit.ly/cutegraycat');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #ff0000;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9acdf08812",
|
|
"name": "Specify an Image Size TEST",
|
|
"difficulty" : "0.19",
|
|
"description": [
|
|
"Create a class called <code>narrow-image</code> and use it to resize the image so that it's only 200 pixels wide",
|
|
"Uh-oh, our image is too big to fit on a mobile phone. As a result, our user will need to scroll horizontally to view the image. But we can fix this by specifying an image size.",
|
|
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the images width.",
|
|
"Create a class called <code>narrow-image</code> and added it to the image element. Change the width to 200 pixels."
|
|
],
|
|
"tests": [
|
|
"expect($('img')).to.have.class('narrow-image');",
|
|
"expect($('img')).to.have.css('width', 200px)"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #ff0000;",
|
|
" }",
|
|
"",
|
|
" .wide-image {",
|
|
" width: 400px;",
|
|
" }",
|
|
"</style>",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9bedf08813",
|
|
"name": "Add a Border Around an Element",
|
|
"difficulty" : "0.20",
|
|
"description": [
|
|
"Create a class called \"thick-green-border\" that puts a 5-pixel-wide black border around your cat photo.",
|
|
"<code>CSS Borders</code> have attributes like style, color and width.",
|
|
"We've created an example border around your h1 element. See if you can add a 10-pixel-wide green border around your cat photo."
|
|
],
|
|
"tests": [
|
|
"expect($('img')).to.have.class('thick-green-border');",
|
|
"expect($('img')).to.have.css('border-color', 'rgb(0,255,0)'));",
|
|
"expect($('img')).to.have.css('border-width', '10px');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .narrow-image {",
|
|
" width: 400px;",
|
|
" }",
|
|
"",
|
|
" .thin-red-border {",
|
|
" border-style: solid;",
|
|
" border-color: #ff0000;",
|
|
" border-width: 5px;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-style: solid;",
|
|
" }",
|
|
"</style>",
|
|
"<h1 class=\"thin-red-border\">hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"narrow-image thick-green-border\" src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08814",
|
|
"name": "Add Rounded Corners with a Border Radius",
|
|
"difficulty" : "0.21",
|
|
"description": [
|
|
"Give your cat photo a border radius of 10 pixels.",
|
|
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
|
|
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels."
|
|
],
|
|
"tests": [
|
|
"expect($('img')).to.have.class('thick-green-border');",
|
|
"expect($('img')).to.have.css('border-radius', '10px');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .narrow-image {",
|
|
" width: 200px;",
|
|
" }",
|
|
"",
|
|
" .thin-red-border {",
|
|
" border-style: solid;",
|
|
" border-color: #ff0000;",
|
|
" border-width: 5px;",
|
|
" border-radius: 5px;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-style: solid;",
|
|
" }",
|
|
"</style>",
|
|
"<h1 class=\"thin-red-border\">hello world</h1>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08815",
|
|
"name": "Make an Image Circular with a Border Radius",
|
|
"difficulty" : "0.22",
|
|
"description": [
|
|
"Give your cat photo a <code>border-radius</code> of 50%.",
|
|
"In addition to pixels, you can also specify a <code>border-radius</code> of a percentage."
|
|
],
|
|
"tests": [
|
|
"expect($('img')).to.have.css('border-radius', '50%');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .narrow-image {",
|
|
" width: 200px;",
|
|
" }",
|
|
"",
|
|
" .thin-red-border {",
|
|
" border-style: solid;",
|
|
" border-color: #ff0000;",
|
|
" border-width: 5px;",
|
|
" border-radius: 10%;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-style: solid;",
|
|
" border-color: #00ff00;",
|
|
" border-width: 10px;",
|
|
" }",
|
|
"</style>",
|
|
"<h2 class=\"thin-red-border\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08816",
|
|
"name": "Use an Anchor Tag to Link to an External Page",
|
|
"difficulty" : "0.23",
|
|
"description": [
|
|
"Create an <code>anchor tag</code> hyperlink that links to freecodecamp.com",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect((/free(\\s+)?code(\\s+)?camp(\\s+)?/gi).test($('a').text())).to.be.true;",
|
|
"expect($('a').filter(function(index) { return /freecodecamp\\.com/gi.test($('a')[index]); }).length).to.eql(1);"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .narrow-image {",
|
|
" width: 200px;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-style: solid;",
|
|
" border-color: #00ff00;",
|
|
" border-width: 10px;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>",
|
|
"<br/>",
|
|
"<a href=\"http://www.google.com\">This is a link to Google</a>",
|
|
"<br/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08817",
|
|
"name": "Make Named Anchors using the Hash Symbol",
|
|
"difficulty" : "0.24",
|
|
"description": [
|
|
"Use the hash symbol(#) to turn the link to the bottom of the page into a <code>named anchor</code>.",
|
|
"Sometimes you want to add <code>anchor elements</code> to your website before you know where they will link.",
|
|
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
|
|
"Replace the href in the link to freecodecamp.com with a hash symbol to turn it into a <code>named anchor</code>."
|
|
],
|
|
"tests": [
|
|
"expect((/this link leads nowhere/gi).test($('a').text())).to.be.true;",
|
|
"expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(1);"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .narrow-image {",
|
|
" width: 200px;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-style: solid;",
|
|
" border-color: #00ff00;",
|
|
" border-width: 10px;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"<h2>cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>",
|
|
"<br/>",
|
|
"<a href=\"http://www.freecodecamp.com\">This named anchor leads nowhere</a>",
|
|
"<br/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08820",
|
|
"name": "Turn an Image into a Link",
|
|
"difficulty" : "0.27",
|
|
"description": [
|
|
"Wrap the gray cat's image with an <code>anchor tag</code> that leads nowhere.",
|
|
"You can make elements into links by wrapping them in an <code>anchor tag</code>.",
|
|
"Check out the example snow-colored cat's photo. When you hover over it with your cursor, you'll see the finger pointer you usually see when you hover over a link. The photo is now a link.",
|
|
"Wrap your gray cat's photo in an <code>anchor tag</code>",
|
|
"Use the hash symbol as the <code>anchor tag</code>'s <code>href</code>."
|
|
],
|
|
"tests": [
|
|
"expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(2);"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .narrow-image {",
|
|
" width: 200px;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-style: solid;",
|
|
" border-color: #00ff00;",
|
|
" border-width: 10px;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"<h2>cat photo app</h2>",
|
|
"<a href=\"#\"><img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutesnowcat\"/></a>",
|
|
"<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08818",
|
|
"name": "Add Alt Text to an image",
|
|
"difficulty" : "0.25",
|
|
"description": [
|
|
"Add the alt text \"a photo of a cute gray cat\" to our cat photo",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('img').filter(function(){ return /cat/gi.test(this.alt) }).length).to.eql(2);"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .narrow-image {",
|
|
" width: 200px;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-style: solid;",
|
|
" border-color: #00ff00;",
|
|
" border-width: 10px;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"<h2>cat photo app</h2>",
|
|
"<a href=\"#\"><img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutesnowcat\" alt=\"a photo of a cute white cat\"/></a>",
|
|
"<a href=\"#\"><img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/></a>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad88fee1348bd9aedf08825",
|
|
"name": "Set the Background Color of an Element",
|
|
"difficulty" : "0.28",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08821",
|
|
"name": "Add Padding to an Element",
|
|
"difficulty" : "0.29",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08822",
|
|
"name": "Add a Margin to an Element",
|
|
"difficulty" : "0.30",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08823",
|
|
"name": "Add a Negative Margin to an Element",
|
|
"difficulty" : "0.31",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08824",
|
|
"name": "Add Padding Only to the Top and Bottom of an Element",
|
|
"difficulty" : "0.32",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08825",
|
|
"name": "Add Margin Only to the Left and Right of an Element",
|
|
"difficulty" : "0.33",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08826",
|
|
"name": "Use Clockwise Padding Notation",
|
|
"difficulty" : "0.34",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9acde08812",
|
|
"name": "Use Bootstrap for Responsive Images",
|
|
"difficulty" : "0.35",
|
|
"description": [
|
|
"Add the <code>img-responsive</code> Bootstrap class to the image.",
|
|
"Specifying a width of 200 pixels on our img element made it fit our phone's screen, but it's not a perfect fit. It would be great if the image could be exactly the width of our phone's screen.",
|
|
"Fortunately, there's a <code>Responsive CSS Framework</code> called written by Twitter called Bootstrap. You can add Bootstrap to any app just by including it with <code><link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/></code> at the top of your HTML, but we've gone ahead and included it for you here.",
|
|
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
|
|
"Now all you need to do is add the <code>img-responsive</code> class to your image."
|
|
],
|
|
"tests": [
|
|
"expect($('img')).to.have.class('img-responsive');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #ff0000;",
|
|
" }",
|
|
"</style>",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd8acde08812",
|
|
"name": "Center Text with Bootstrap",
|
|
"difficulty" : "0.36",
|
|
"description": [
|
|
"Add Bootstrap's <code>text-center</code> class to your h1 and h2 elements.",
|
|
"Now that we're using Bootstrap, we can center our heading elements (h1 and h2) to make them look better. All we need to do is add the class <code>text-center</code> to the h1 and h2 elements.",
|
|
"Note that you can add several classes to the same element by seperating each of them with a space, like this: <code><h2 class=\"text-red text-center\">your text</h2></code>."
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h2')).to.have.class('text-center');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #ff0000;",
|
|
" }",
|
|
"",
|
|
"</style>",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"img-responsive\" src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348cd8acde08812",
|
|
"name": "Create a Button",
|
|
"difficulty" : "0.37",
|
|
"description": [
|
|
"Create a bootstrap button with the class <code></code>.",
|
|
"Now that we're using Bootstrap, we can center our heading elements (h1 and h2) to make them look better. All we need to do is add the class <code>text-center</code> to the h1 and h2 elements.",
|
|
"Note that you can add several classes to the same element by seperating each of them with a space, like this: <code><h2 class=\"text-red text-center\">your text</h2></code>."
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h2')).to.have.class('text-center');"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #ff0000;",
|
|
" }",
|
|
"",
|
|
"</style>",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"img-responsive\" src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08813",
|
|
"name": "Add Alt Text to an Image TEST",
|
|
"difficulty" : "0.38",
|
|
"description": [
|
|
"Add the alt text \"A picture of a gray cat\" to the image.",
|
|
"<code>Alt text</code> is a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
|
|
"You can add alt text right in the img element like this: <code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/></code>."
|
|
],
|
|
"tests": [
|
|
"expect((/cat/gi).test($('img').attr('alt')).to.be.true;"
|
|
],
|
|
"challengeSeed": [
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: #ff0000;",
|
|
" }",
|
|
"</style>",
|
|
"<h1>hello world</h1>",
|
|
"<h2 class=\"red-text\">cat photo app</h2>",
|
|
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
|
"<img class=\"img-responsive\" src=\"http://bit.ly/cutegraycat\"/>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08827",
|
|
"name": "Create an Bulleted Unordered List",
|
|
"difficulty" : "0.39",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08828",
|
|
"name": "Created a Numbered Ordered List",
|
|
"difficulty" : "0.29",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08829",
|
|
"name": "Create a Text Field",
|
|
"difficulty" : "0.30",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08830",
|
|
"name": "Use HTML5 to Make a Field Required",
|
|
"difficulty" : "0.31",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08831",
|
|
"name": "Use HTML5 to Specify an Input Type",
|
|
"difficulty" : "0.32",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08832",
|
|
"name": "Create a Text Area",
|
|
"difficulty" : "0.33",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08834",
|
|
"name": "Create a Set of Radio Buttons",
|
|
"difficulty" : "0.35",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08835",
|
|
"name": "Create a Set of Checkboxes",
|
|
"difficulty" : "0.36",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08836",
|
|
"name": "Create a HTML Form",
|
|
"difficulty" : "0.37",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08837",
|
|
"name": "Use a Bootstrap Primary Button",
|
|
"difficulty" : "0.38",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08838",
|
|
"name": "Apply Responsive Design with the Bootstrap Grid",
|
|
"difficulty" : "0.39",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08839",
|
|
"name": "Create a Half Width Bootstrap Column",
|
|
"difficulty" : "0.40",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08840",
|
|
"name": "Create a Row of Bootstrap Elements",
|
|
"difficulty" : "0.41",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08841",
|
|
"name": "Change the background of element",
|
|
"difficulty" : "0.42",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08842",
|
|
"name": "Make an element translucent",
|
|
"difficulty" : "0.43",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08843",
|
|
"name": "Center an Image",
|
|
"difficulty" : "0.44",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08844",
|
|
"name": "Add a Drop Shadow",
|
|
"difficulty" : "0.45",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08845",
|
|
"name": "Make a Navbar",
|
|
"difficulty" : "0.46",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08847",
|
|
"name": "Add a Logo to a Navbar",
|
|
"difficulty" : "0.47",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08848",
|
|
"name": "Make a Footer",
|
|
"difficulty" : "0.48",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08849",
|
|
"name": "Use Icons as Links",
|
|
"difficulty" : "0.49",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08850",
|
|
"name": "Add Hover Effects to Icons",
|
|
"difficulty" : "0.50",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08851",
|
|
"name": "Add Depth to a Page with a Well",
|
|
"difficulty" : "0.51",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08852",
|
|
"name": "Add an ID to a Button",
|
|
"difficulty" : "0.52",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08853",
|
|
"name": "Fire a Modal by Clicking a Button",
|
|
"difficulty" : "0.53",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08854",
|
|
"name": "Style a Modal with a Header",
|
|
"difficulty" : "0.54",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08855",
|
|
"name": "Style a Modal with a Body",
|
|
"difficulty" : "0.55",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08856",
|
|
"name": "Make a Modal Dismissable",
|
|
"difficulty" : "0.56",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08857",
|
|
"name": "Create an Accordian Menu",
|
|
"difficulty" : "0.57",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08858",
|
|
"name": "Add a Bootstrap Info Button",
|
|
"difficulty" : "0.58",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08859",
|
|
"name": "Add a Bootstrap Warning Button",
|
|
"difficulty" : "0.59",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08860",
|
|
"name": "Add a Bootstrap Danger Button",
|
|
"difficulty" : "0.60",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08861",
|
|
"name": "Add a Bootstrap Success Button",
|
|
"difficulty" : "0.61",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08862",
|
|
"name": "Use a Block-width Button",
|
|
"difficulty" : "0.62",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08863",
|
|
"name": "Add a Gradient to a Button",
|
|
"difficulty" : "0.63",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08864",
|
|
"name": "Adjust the Line Height of Text",
|
|
"difficulty" : "0.64",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08865",
|
|
"name": "Use Responsive Images to Fit Containing Elements",
|
|
"difficulty" : "0.65",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08866",
|
|
"name": "",
|
|
"difficulty" : "0.66",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08867",
|
|
"name": "",
|
|
"difficulty" : "0.67",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08868",
|
|
"name": "",
|
|
"difficulty" : "0.68",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08869",
|
|
"name": "",
|
|
"difficulty" : "0.69",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08870",
|
|
"name": "",
|
|
"difficulty" : "0.70",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08871",
|
|
"name": "",
|
|
"difficulty" : "0.71",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08872",
|
|
"name": "",
|
|
"difficulty" : "0.72",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08873",
|
|
"name": "",
|
|
"difficulty" : "0.73",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08874",
|
|
"name": "",
|
|
"difficulty" : "0.74",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08875",
|
|
"name": "",
|
|
"difficulty" : "0.75",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08876",
|
|
"name": "",
|
|
"difficulty" : "0.76",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08877",
|
|
"name": "",
|
|
"difficulty" : "0.77",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08878",
|
|
"name": "",
|
|
"difficulty" : "0.78",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08879",
|
|
"name": "",
|
|
"difficulty" : "0.79",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08880",
|
|
"name": "",
|
|
"difficulty" : "0.80",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08881",
|
|
"name": "",
|
|
"difficulty" : "0.81",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08882",
|
|
"name": "",
|
|
"difficulty" : "0.82",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08883",
|
|
"name": "",
|
|
"difficulty" : "0.83",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08884",
|
|
"name": "",
|
|
"difficulty" : "0.84",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08885",
|
|
"name": "",
|
|
"difficulty" : "0.85",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08886",
|
|
"name": "",
|
|
"difficulty" : "0.86",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08887",
|
|
"name": "",
|
|
"difficulty" : "0.87",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08888",
|
|
"name": "",
|
|
"difficulty" : "0.88",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08889",
|
|
"name": "",
|
|
"difficulty" : "0.89",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08890",
|
|
"name": "",
|
|
"difficulty" : "0.90",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08891",
|
|
"name": "",
|
|
"difficulty" : "0.91",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08892",
|
|
"name": "",
|
|
"difficulty" : "0.92",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08893",
|
|
"name": "",
|
|
"difficulty" : "0.93",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08894",
|
|
"name": "",
|
|
"difficulty" : "0.94",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08895",
|
|
"name": "",
|
|
"difficulty" : "0.95",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08896",
|
|
"name": "",
|
|
"difficulty" : "0.96",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08897",
|
|
"name": "",
|
|
"difficulty" : "0.97",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08898",
|
|
"name": "",
|
|
"difficulty" : "0.98",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08899",
|
|
"name": "",
|
|
"difficulty" : "0.99",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
},
|
|
|
|
{
|
|
"_id" : "bad87fee1348bd9aedf08100",
|
|
"name": "",
|
|
"difficulty" : "1.00",
|
|
"description": [
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"expect($('h1')).to.have.class('text-center');",
|
|
"expect($('h1')).to.have.text('hello world');"
|
|
],
|
|
"challengeSeed": [
|
|
"<h1>hello world</h1>"
|
|
],
|
|
"challengeType": 0
|
|
}
|
|
]
|