Skip to content

Commit

Permalink
add ID related challenges
Browse files Browse the repository at this point in the history
  • Loading branch information
Quincy Larson committed Jul 29, 2015
1 parent fd3374f commit 2d00977
Showing 1 changed file with 291 additions and 8 deletions.
299 changes: 291 additions & 8 deletions seed/challenges/html5-and-css.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2316,6 +2316,97 @@
"Versuche deine öffnende <code>div</code> Auszeichnung überhalb des <code>p</code> Elements von \"Things cats love\" und das schließende <code>div</code> unterhalb der schließenden <code>ol</code> Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>."
]
},
{
"id": "bad87fed1348bd9aede07836",
"name": "Waypoint: Give a Background Color to a Div Element",
"dashedName": "waypoint-give-a-background-color-to-a-div-element",
"difficulty": 0.039,
"description": [
"You can set an element's background color with the \"background-color\" attribute.",
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element."
],
"tests": [
"assert($('div').hasClass('gray-background'), 'Give your <code>div</code> element the class \"gray-background\".')",
"assert($('.gray-background').css('background-color') === 'rgb(128, 128, 128)', 'Your <code>div</code> element should have a gray background.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<div>",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
" </ul>",
" <p>Top 3 things cats hate:</p>",
" <ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
" </ol>",
"</div>",
"",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <label><input type='checkbox' name='personality' checked> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Energetic</label>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Gib dem Div Element einen farbigen Hintergrund",
"descriptionDe": [
"Erstelle eine Klasse namens \"gray-background\" mit der Hintergrund-Farbe grau. Füge diese Klasse deinem <code>div</code> Element hinzu.",
"Du kannst die Hintergrund-Farbe eines Elements mit der Eigenschaft \"background-color\" bestimmen.",
"Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du <code>.green-background { background-color: green; }</code> innerhalb deines <code>style</code> Elements verwenden."
]
},
{
"id": "bad87fee1348bd9aede07836",
"name": "Waypoint: Give a Background Color to a Div Element",
Expand Down Expand Up @@ -2407,6 +2498,184 @@
"Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du <code>.green-background { background-color: green; }</code> innerhalb deines <code>style</code> Elements verwenden."
]
},
{
"id": "bad87eee1348bd9aede07836",
"name": "Waypoint: Set the ID of an Element",
"dashedName": "waypoint-set-the-id-of-an-element",
"difficulty": 0.0391,
"description": [
"In addition to classes, each HTML element can also have an <code>id</code> attribute.",
"There are several benefits to using <code>id</code> attributes, and you'll learn more about them once you start using jQuery.",
"<code>id</code> attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same <code>id</code> attribute.",
"Here's an example of how you give your <code>h2</code> element the id of \"cat-photo-app\": <code>&#60;ul id=\"cat-photo-app\"></code>",
"Give your <code>form</code> element the id \"cat-photo-form\"."
],
"tests": [
"assert($('form').attr('id') === 'cat-photo-form', 'Give your <code>form</code> element the id of \"cat-photo-form\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<div>",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
" </ul>",
" <p>Top 3 things cats hate:</p>",
" <ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
" </ol>",
"</div>",
"",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <label><input type='checkbox' name='personality' checked> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Energetic</label>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad87dee1348bd9aede07836",
"name": "Waypoint: Use a CSS ID to Style an Element",
"dashedName": "waypoint-use-a-css-id-to-style-an-element",
"difficulty": 0.0392,
"description": [
"One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
"Here's an example of how you can take your element with the <code>id</code> attribute of \"cat-photo-element\" and give it the background color of green. In your <code>style</code> element: <code>#cat-photo-element { background-color: green; }></code>",
"Note that inside your <code>style</code> element, you always reference classes by putting a \".\" in front of their names. You always reference ids by putting a \"#\" in front of their names.",
"Try giving your form, which now has the <code>id</code> attribute of \"cat-photo-form\", a green background."
],
"tests": [
"assert($('form').attr('id') === 'cat-photo-form', 'Give your <code>form</code> element the id of \"cat-photo-form\".')",
"assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)', 'Your <code>form</code> element should have the \"background-color\" of green.')",
"assert(editor.match(/<form.*cat-photo-form.*>/gi) && editor.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has both an <code>id</code> attribute.')",
"assert(!editor.match(/<form.*style.*>/gi) && !editor.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<div>",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
" </ul>",
" <p>Top 3 things cats hate:</p>",
" <ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
" </ol>",
"</div>",
"",
"<form action=\"/submit-cat-photo\" id=\"cat-photo-form\">",
" <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <label><input type='checkbox' name='personality' checked> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Energetic</label>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad88fee1348bd9aedf08825",
"name": "Waypoint: Adjusting the Padding of an Element",
Expand Down Expand Up @@ -2984,6 +3253,9 @@
"dashedName": "waypoint-prioritize-one-style-over-another",
"difficulty": 0.048,
"description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your <code>h1</code> element can't be both green and pink at the same time.",
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class \"override\" the <code>body</code> element's <code>color: green;</code> CSS attribute?",
"Create a CSS class called \"pink-text\" that gives an element the color pink.",
"Give your <code>h1</code> element the class of \"pink-text\"."
],
Expand Down Expand Up @@ -3021,8 +3293,10 @@
"dashedName": "waypoint-override-styles-in-subsequent-css",
"difficulty": 0.049,
"description": [
"HTML has an element that is automatically a part of every web page called the <code>body</code> element.",
"You can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles."
"Our \"pink-text\" class overrode our <code>body</code> element's CSS declaration!",
"We just proved that our classes will override the <code>body</code> element's CSS. So the next logical question is, what can we do to override our \"pink-text\" class?",
"Create an additional CSS class called \"blue-text\" that gives an element the color blue. Make sure it's below your \"pink-text\" class declaration.",
"Apply the \"blue-text\" class to your <code>h1</code> element in addition to your \"pink-text\" class, and let's see which one wins."
],
"tests": [
"assert($('h1').hasClass('pink-text'), 'Your <code>h1</code> element should have the class \"pink-text\".')",
Expand All @@ -3034,7 +3308,7 @@
" body {",
" background-color: black;",
" font-family: Monospace;",
" color: red;",
" color: green;",
" }",
" .pink-text {",
" color: pink;",
Expand Down Expand Up @@ -3062,7 +3336,10 @@
"dashedName": "waypoint-override-class-declarations-with-inline-styles",
"difficulty": 0.052,
"description": [
"<code>&lt;h1 style=\"color: white\"&rt;</code>"
"We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.",
"But we're not done yet. There are other ways that you can override CSS. Do you remember inline styles?",
"Use an in-line style to try to make our <code>h1</code> element white. Remember, in line styles look like this: <code>&#60;h1 style=\"color: green\"&#62;</code>",
"Leave the \"blue-text\" and \"pink-text\" classes on your <code>h1</code> element."
],
"tests": [
"assert($('h1').hasClass('pink-text'), 'Your <code>h1</code> element should have the class \"pink-text\".')",
Expand All @@ -3075,7 +3352,7 @@
" body {",
" background-color: black;",
" font-family: Monospace;",
" color: red;",
" color: green;",
" }",
" .pink-text {",
" color: pink;",
Expand Down Expand Up @@ -3106,20 +3383,25 @@
"dashedName": "waypoint-override-all-other-styles-by-using-important",
"difficulty": 0.053,
"description": [
"<code>.pink-text { color: pink !important; }</code>"
"Yay! we just proved that in-line styles will override the CSS declarations in your <code>style</code> element.",
"But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
"In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>.",
"Let's go all the way back to our body declaration. This was the weakest of all, being overridden by class declarations, id declarations, and in-line styles.",
"Add the keyword <code>!important</code> to your body' element's color declaration to make 100% sure that your <code>h1</code> element will be green.",
"An example of how to do this is: <code>color: red !important;</code>"
],
"tests": [
"assert($('h1').hasClass('pink-text'), 'Your <code>h1</code> element should have the class \"pink-text\".')",
"assert($('h1').hasClass('blue-text'), 'Your <code>h1</code> element should have the class \"blue-text\".')",
"assert(!$('h1').hasClass('white-text'), 'Your <code>h1</code> element should have the inline style of \"color: white\".')",
"assert($('h1').css('color') === 'rgb(255, 192, 203)', 'Your <code>h1</code> element should be pink.')"
"assert($('h1').css('color') === 'rgb(0, 192, 0)', 'Your <code>h1</code> element should be green.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: black;",
" font-family: Monospace;",
" color: red;",
" color: green;",
" }",
" .pink-text {",
" color: pink;",
Expand Down Expand Up @@ -3150,6 +3432,7 @@
"dashedName": "waypoint-use-hex-code-for-specific-colors",
"difficulty": 0.054,
"description": [
"",
"Use hex code instead of a color."
],
"tests": [
Expand Down

0 comments on commit 2d00977

Please sign in to comment.