{"type":"test","title":"CSS","exercises":"[{\"type\":\"exercise\",\"title\":\"Change CSS Styles\",\"description\":\"In the next page change the CSS styles performing the following changes:\\n- All three boxes should have a minimum height of 80px, use the class \\\"box\\\" and the property min-height to achieve this\\n- Change the background color of the first box to #ff704d\\n- Change the width of the second box to 300px\\n- Change the font color of the paragraph inside the second box to #d86a80\\n- Use the property font-size to change the font size of the h1 element to 48px\",\"content\":\"\\n\\n\\n Boxes everywhere\\n \\n\\n\\n
Some boxes
\\n
\\n This is the first box.\\n \\n
\\n
\\n This is the second box.\\n
\\n With a yellow paragraph inside.\\n
\\n
\\n
\\n This is the third box.\\n
\\n\\n\",\"editorMode\":\"HTML\",\"progress\":{\"score\":0,\"passed\":false},\"score_function\":\"var score = function(document){\\n var grade = {};\\n grade.successes = [];\\n grade.errors = [];\\n grade.feedback = [];\\n grade.score = 0;\\n\\n\\n if($(document).find(\\\".box\\\").css(\\\"min-height\\\") != \\\"80px\\\"){\\n grade.errors.push(\\\"Elements with class 'box' should have a min-height of 80px.\\\");\\n } else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"Elements with class 'box' have a min-height of 80px.\\\");\\n\\t}\\n\\n if($(document).find(\\\"#box1\\\").css(\\\"background-color\\\") != \\\"#ff704d\\\" && $(document).find(\\\"#box1\\\").css(\\\"background-color\\\") != \\\"rgb(255, 112, 77)\\\"){\\n grade.errors.push(\\\"First box should have a background-color #ff704d\\\");\\n } else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"First box has a background-color #ff704d\\\");\\n\\t}\\n\\n if($(document).find(\\\"#box2\\\").css(\\\"width\\\") != \\\"300px\\\"){\\n grade.errors.push(\\\"Second box should have a width 300px\\\");\\n } else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"Second box has a width 300px\\\");\\n\\t}\\n\\n if($(document).find(\\\"#box2 p\\\").css(\\\"color\\\") != \\\"#d86a80\\\" && $(document).find(\\\"#box2 p\\\").css(\\\"color\\\") != \\\"rgb(216, 106, 128)\\\"){\\n grade.errors.push(\\\"The paragraph inside the second box should have a font color #d86a80\\\");\\n } else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"The paragraph inside the second box has a font color #d86a80\\\");\\n\\t}\\n\\n if($(document).find(\\\"h1\\\").css(\\\"font-size\\\") != \\\"48px\\\"){\\n grade.errors.push(\\\"The h1 should have a font size of 48px\\\");\\n } else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"The h1 has a font size of 48px\\\");\\n\\t}\\n\\n return grade;\\n};\"},{\"type\":\"exercise\",\"title\":\"Apply CSS\",\"description\":\"This is the same page as in the previus test, but with different CSS selectors.\\nChange the HTML DOM so the new selectors apply.\\n\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n\\n Boxes everywhere\\n \\n\\n\\n
Some boxes
\\n
\\n This is the first box.\\n \\n
\\n
\\n This is the second box.\\n
\\n With a yellow paragraph inside.\\n
\\n
\\n
\\n This is the third box.\\n
\\n\\n\",\"progress\":{\"score\":0,\"passed\":true},\"score_function\":\"var score = function(document){\\n var grade = {};\\n grade.successes = [];\\n grade.errors = [];\\n grade.feedback = [];\\n grade.score = 0;\\n\\n if($(document).find(\\\"h1#title\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"The h1#title selector is not being applied\\\");\\n\\t} else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"You applied the h1#title selector, well done.\\\");\\n\\t}\\n\\n if($(document).find(\\\"article#box1\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"The article#box1 selector is not being applied\\\");\\n\\t} else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"You applied the article#box1 selector, well done.\\\");\\n\\t}\\n\\n if($(document).find(\\\"article#box2\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"The article#box2 selector is not being applied\\\");\\n\\t} else {\\n\\t grade.score +=1;\\n\\t grade.successes.push(\\\"You applied the article#box2 selector, well done.\\\");\\n\\t}\\n\\n if($(document).find(\\\"article#box3\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"The article#box3 selector is not being applied\\\");\\n\\t} else {\\n\\t grade.score +=1;\\n\\t grade.successes.push(\\\"You applied the article#box3 selector, well done.\\\");\\n\\t}\\n\\n if($(document).find(\\\"section#wrapper article.box\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"The 'section#wrapper article.box' selector is not being applied\\\");\\n\\t} else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"You applied the 'section#wrapper article.box' selector, well done.\\\");\\n\\t}\\n\\n if($(document).find(\\\"section#wrapper article.box p \\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"The 'section#wrapper article.box p ' selector is not being applied\\\");\\n\\t} else {\\n\\t grade.score +=2;\\n\\t grade.successes.push(\\\"You applied the 'section#wrapper article.box p' selector, well done.\\\");\\n\\t}\\n\\n return grade;\\n};\\n\"}]","exercisesQuantity":2,"parsed_exercises":[{"type":"exercise","title":"Change CSS Styles","description":"In the next page change the CSS styles performing the following changes:\n- All three boxes should have a minimum height of 80px, use the class \"box\" and the property min-height to achieve this\n- Change the background color of the first box to #ff704d\n- Change the width of the second box to 300px\n- Change the font color of the paragraph inside the second box to #d86a80\n- Use the property font-size to change the font size of the h1 element to 48px","content":"\n\n\n Boxes everywhere\n \n\n\n
Some boxes
\n
\n This is the first box.\n \n
\n
\n This is the second box.\n
\n With a yellow paragraph inside.\n
\n
\n
\n This is the third box.\n
\n\n","editorMode":"HTML","progress":{"score":0,"passed":false},"score_function":"var score = function(document){\n var grade = {};\n grade.successes = [];\n grade.errors = [];\n grade.feedback = [];\n grade.score = 0;\n\n\n if($(document).find(\".box\").css(\"min-height\") != \"80px\"){\n grade.errors.push(\"Elements with class 'box' should have a min-height of 80px.\");\n } else {\n\t grade.score +=2;\n\t grade.successes.push(\"Elements with class 'box' have a min-height of 80px.\");\n\t}\n\n if($(document).find(\"#box1\").css(\"background-color\") != \"#ff704d\" && $(document).find(\"#box1\").css(\"background-color\") != \"rgb(255, 112, 77)\"){\n grade.errors.push(\"First box should have a background-color #ff704d\");\n } else {\n\t grade.score +=2;\n\t grade.successes.push(\"First box has a background-color #ff704d\");\n\t}\n\n if($(document).find(\"#box2\").css(\"width\") != \"300px\"){\n grade.errors.push(\"Second box should have a width 300px\");\n } else {\n\t grade.score +=2;\n\t grade.successes.push(\"Second box has a width 300px\");\n\t}\n\n if($(document).find(\"#box2 p\").css(\"color\") != \"#d86a80\" && $(document).find(\"#box2 p\").css(\"color\") != \"rgb(216, 106, 128)\"){\n grade.errors.push(\"The paragraph inside the second box should have a font color #d86a80\");\n } else {\n\t grade.score +=2;\n\t grade.successes.push(\"The paragraph inside the second box has a font color #d86a80\");\n\t}\n\n if($(document).find(\"h1\").css(\"font-size\") != \"48px\"){\n grade.errors.push(\"The h1 should have a font size of 48px\");\n } else {\n\t grade.score +=2;\n\t grade.successes.push(\"The h1 has a font size of 48px\");\n\t}\n\n return grade;\n};","id":1},{"type":"exercise","title":"Apply CSS","description":"This is the same page as in the previus test, but with different CSS selectors.\nChange the HTML DOM so the new selectors apply.\n","editorMode":"HTML","content":"\n\n\n Boxes everywhere\n \n\n\n
Some boxes
\n
\n This is the first box.\n \n
\n
\n This is the second box.\n
\n With a yellow paragraph inside.\n
\n
\n
\n This is the third box.\n
\n\n","progress":{"score":0,"passed":false},"score_function":"var score = function(document){\n var grade = {};\n grade.successes = [];\n grade.errors = [];\n grade.feedback = [];\n grade.score = 0;\n\n if($(document).find(\"h1#title\").length === 0){\n\t \tgrade.errors.push(\"The h1#title selector is not being applied\");\n\t} else {\n\t grade.score +=2;\n\t grade.successes.push(\"You applied the h1#title selector, well done.\");\n\t}\n\n if($(document).find(\"article#box1\").length === 0){\n\t \tgrade.errors.push(\"The article#box1 selector is not being applied\");\n\t} else {\n\t grade.score +=2;\n\t grade.successes.push(\"You applied the article#box1 selector, well done.\");\n\t}\n\n if($(document).find(\"article#box2\").length === 0){\n\t \tgrade.errors.push(\"The article#box2 selector is not being applied\");\n\t} else {\n\t grade.score +=1;\n\t grade.successes.push(\"You applied the article#box2 selector, well done.\");\n\t}\n\n if($(document).find(\"article#box3\").length === 0){\n\t \tgrade.errors.push(\"The article#box3 selector is not being applied\");\n\t} else {\n\t grade.score +=1;\n\t grade.successes.push(\"You applied the article#box3 selector, well done.\");\n\t}\n\n if($(document).find(\"section#wrapper article.box\").length === 0){\n\t \tgrade.errors.push(\"The 'section#wrapper article.box' selector is not being applied\");\n\t} else {\n\t grade.score +=2;\n\t grade.successes.push(\"You applied the 'section#wrapper article.box' selector, well done.\");\n\t}\n\n if($(document).find(\"section#wrapper article.box p \").length === 0){\n\t \tgrade.errors.push(\"The 'section#wrapper article.box p ' selector is not being applied\");\n\t} else {\n\t grade.score +=2;\n\t grade.successes.push(\"You applied the 'section#wrapper article.box p' selector, well done.\");\n\t}\n\n return grade;\n};\n","id":2}],"metadata":{"title":"CSS","language":"en"}}
![\\\"HTML5](\\\"https://www.w3.org/html/logo/img/badge-samples.png\\\"/){kind=icon}
\\n ![\"HTML5](\"https://www.w3.org/html/logo/img/badge-samples.png\"/){kind=icon}
\n