Skip to content

Commit

Permalink
finish the color section of the basic html section
Browse files Browse the repository at this point in the history
  • Loading branch information
Quincy Larson committed Jul 1, 2015
1 parent bc8a677 commit 7035f1f
Showing 1 changed file with 309 additions and 30 deletions.
339 changes: 309 additions & 30 deletions seed/challenges/basic-html5-and-css.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3057,7 +3057,7 @@
"We can do this by adding <code>body { background-color: blue; }</code> to our <code>style</code> element."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of blue.')"
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')"
],
"challengeSeed": [
"<style>",
Expand Down Expand Up @@ -3296,45 +3296,324 @@
"dashedName": "waypoint-use-hex-code-for-specific-colors",
"difficulty": 0.054,
"description": [
""
"Use hex code instead of a color."
],
"tests": [

"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')",
"assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'Use hex code the color black instead of the word \"black\". For example <code>body: { color: #000000; }</code>.')"
],
"challengeSeed": [
"<style>",
" .injected-text {",
" margin-bottom: -25px;",
" text-align: center;",
" body {",
" background-color: black;",
" }",
"",
" .box {",
" border-style: solid;",
" border-color: black;",
" border-width: 5px;",
" text-align: center;",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08725",
"name": "Waypoint: Use Hex Code to Color Elements White",
"dashedName": "waypoint-use-hex-code-to-color-elements-white",
"difficulty": 0.055,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Your <code>body</code> element should have the background-color of white.')",
"assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'Use hex code the color white instead of the word \"white\". For example <code>body: { color: #FFFFFF; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #000000;",
" }",
"",
" .yellow-box {",
" background-color: yellow;",
" padding: 20px 40px 20px 40px;",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08724",
"name": "Waypoint: Use Hex Code to Color Elements Red",
"dashedName": "waypoint-use-hex-code-to-color-elements-red",
"difficulty": 0.056,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use hex code the color red instead of the word \"red\". For example <code>body: { color: #FF0000; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #FFFFFF;",
" }",
" ",
" .red-box {",
" background-color:red;",
" margin: 20px 40px 20px 40px;",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08723",
"name": "Waypoint: Use Hex Code to Color Elements Green",
"dashedName": "waypoint-use-hex-code-to-color-elements-green",
"difficulty": 0.057,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your <code>body</code> element the background-color of green.')",
"assert(editor.match(/#00FF00/g) && editor.match(/#00FF00/g).length > 0, 'Use hex code the color green instead of the word \"green\". For example <code>body: { color: #00FF00; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #FF0000;",
" }",
"",
" .green-box {",
" background-color: green;",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08722",
"name": "Waypoint: Use Hex Code to Color Elements Blue",
"dashedName": "waypoint-use-hex-code-to-color-elements-blue",
"difficulty": 0.058,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your <code>body</code> element the background-color of blue.')",
"assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use hex code the color blue instead of the word \"blue\". For example <code>body: { color: #0000FF; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #00FF00;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
"",
"<div class=\"box yellow-box\">",
" <h5 class=\"box red-box\">padding</h5>",
" <h5 class=\"box green-box\">padding</h5>",
"</div>"
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08721",
"name": "Waypoint: Use Hex Code to Mix Colors",
"dashedName": "waypoint-use-hex-code-to-mix-colors",
"difficulty": 0.059,
"description": [
"Use hex code instead of a orange."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your <code>body</code> element the background-color of orange.')",
"assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use hex code the color orange instead of the word \"orange\". For example <code>body: { color: #FFA500; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #0000FF;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aede08720",
"name": "Waypoint: Use Hex Code to Color Elements Gray",
"dashedName": "waypoint-use-hex-code-to-color-elements-gray",
"difficulty": 0.060,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your <code>body</code> element the background-color of gray.')",
"assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'Use hex code the color gray instead of the word \"gray\". For example <code>body: { color: #808080; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: FFA500;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08720",
"name": "Waypoint: Use Hex Code for Specific Shades of Gray",
"dashedName": "waypoint-use-hex-code-for-specific-shades-of-gray",
"difficulty": 0.061,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use hex code to make a light gray. For example <code>body: { color: #111111; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #808080;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08719",
"name": "Waypoint: Use Abbreviated Hex Code",
"dashedName": "waypoint-use-abbreviated-hex-code",
"difficulty": 0.062,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'Use abbreviated hex code instead of a named color. For example <code>body: { color: #F00; }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #111111;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
},
{
"id": "bad87fee1348bd9aedf08718",
"name": "Waypoint: Use RGB code for Colors Instead of Hex Code",
"dashedName": "waypoint-use-rgb-code-for-colors-instead-of-hex-code",
"difficulty": 0.063,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/rgb\\s?\\(\\s?255\\s?,\\s?0,\\s?0\\s?\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #F00;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
Expand Down

0 comments on commit 7035f1f

Please sign in to comment.