{"type":"test","title":"Calculator","exercises":"[{\"type\":\"exercise\",\"title\":\"Introduction\",\"description\":\"This is a very simple calculator that can only do additions with 2 arguments.\\nPressing the button Run code (play) you can see the HTML page.\\nPressing the title Calculator or the selector you can access the different exercises of this self-graded exercise.\\nPress the button Run Code, test the calculator and go to the next step.\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n
\\n\\t
tag) with identifier \\\"myheader\\\", class \\\"big\\\", an attribute \\\"title\\\" with value \\\"Main header\\\" and content \\\"Welcome to my calculator\\\"\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n\\n\\t
tag without modifying the DOM tree of the page so that:\\n* The screen of the calculator has a black background but the numbers are shown in white.\\n* All buttons inside have black background and white font.\\n* All buttons inside with an attribute \\\"operation\\\" equals to \\\"true\\\" have a blue border.\\n* All inputs of type text (including the screen) have a red border when their containing has class \\\"error\\\"\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n\\n\\tCalculator \\n\\t\\n \\n \\n\\n\\n\\n\\t\\n\\t\\tNumber: \\n\\t\\t\\n\\t\\t\\n\\t\\n\\n\\t\\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 //Replace content\\n if((typeof document != \\\"undefined\\\")&&(typeof document.documentElement != \\\"undefined\\\")){\\n var bodyContent = ' Number: ';\\n $(document).find(\\\"body\\\").html(bodyContent);\\n \\n //Restore events\\n $(document).find(\\\"#screen\\\").click(function(){\\n\\t\\t\\t$(this).val(\\\"\\\");\\n\\t\\t});\\n\\t\\t$(document).find(\\\"#add\\\").click(function(){\\n\\t\\t\\tacc = parseFloat($(document).find(\\\"#screen\\\").val());\\n\\t\\t\\top = \\\"+\\\";\\n\\t\\t});\\n\\t\\t$(document).find(\\\"#equals\\\").click(function(){\\n\\t\\t\\tvar n = parseFloat($(document).find(\\\"#screen\\\").val());\\n\\t\\t\\tif(op === \\\"+\\\"){\\n\\t\\t\\t\\tacc += n;\\n\\t\\t\\t} else {\\n\\t\\t\\t\\tacc = n;\\n\\t\\t\\t}\\n\\t\\t\\t$(document).find(\\\"#screen\\\").val(acc);\\n\\t\\t\\tacc = 0;\\n\\t\\t\\top = undefined;\\n\\t\\t});\\n }\\n \\n //Tests\\n\\tif($(document).find(\\\"#screen\\\").css(\\\"background-color\\\") != \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"Calculator screen should have background black.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"#screen\\\").css(\\\"color\\\") != \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"screen should show text in white color.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"input\\\").not(\\\"#screen\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"Only screen should be black.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"input\\\").not(\\\"#screen\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n\\t grade.errors.push(\\\"Only screen should have white text.\\\");\\n\\t return grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div.calculator.keyboard button\\\").css(\\\"background-color\\\") != \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"All buttons inside should have black background.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div.calculator.keyboard button\\\").css(\\\"color\\\") != \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"All buttons inside should have white font.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div.calculator.keyboard button[operation='true']\\\").css(\\\"border-top-color\\\") != \\\"rgb(0, 0, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"All buttons inside with attribute \\\\\\\"operation\\\\\\\" equals \\\\\\\"true\\\\\\\" should have blue border.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\t//Check CSS double class selector\\n\\tif($(document).find(\\\"div#test2.keyboard button\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"The CSS selector to apply the style to all buttons inside is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test2.keyboard button\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"The CSS selector to apply the style to all buttons inside is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test2.keyboard button[operation='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside with attribute 'operation' is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div#test1.calculator button\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test1.calculator button\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test1.calculator button[operation='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"article#test3.calculator.keyboard button\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"article#test3.calculator.keyboard button\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"article#test3.calculator.keyboard button[operation='true']\\\").css(\\\"color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside with attribute 'operation' is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div.calculator.keyboard button[operation!='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside with attribute 'operation' is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div.calculator.keyboard input#test6[operation='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n grade.feedback.push()\\t \\n grade.errors.push(\\\"The CSS selector to apply the style to all buttons inside with attribute 'operation' is not right.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div input[type='text']\\\").css(\\\"border-top-color\\\") == \\\"rgb(255, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"Inputs should only have a red border if their containing has class \\\\\\\"error\\\\\\\".\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div#test4.error input[type='text']\\\").css(\\\"border-top-color\\\") != \\\"rgb(255, 0, 0)\\\"){\\n grade.errors.push(\\\"Inputs should only have a red border if their containing has class \\\\\\\"error\\\\\\\".\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"article#test5.error input[type='text']\\\").css(\\\"border-top-color\\\") == \\\"rgb(255, 0, 0)\\\"){\\n grade.errors.push(\\\"Inputs should only have a red border if their containing has class \\\\\\\"error\\\\\\\".\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div#test4.error input[type!='text']\\\").css(\\\"border-top-color\\\") == \\\"rgb(255, 0, 0)\\\"){\\n grade.errors.push(\\\"Inputs should only have a red border if their are text type\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div#test4.error div[type='text']\\\").css(\\\"border-top-color\\\") == \\\"rgb(255, 0, 0)\\\"){\\n grade.errors.push(\\\"Only inputs and no other elements should only have a red border if their containing has class \\\\\\\"error\\\\\\\".\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\n grade.score = 10;\\n grade.successes.push(\\\"Right.\\\");\\n\\n return grade;\\n};\"},{\"type\":\"exercise\",\"title\":\"c) Error management\",\"description\":\"Modify the calculator so that when any of the arguments introduced are a text instead of a number, it shows in the screen the message 'Error'.\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n\\n\\tCalculator \\n\\t\\n \\n\\n\\n\\n\\t\\n\\t\\tNumber: \\n\\t\\t\\n\\t\\t\\n\\t\\n\\n\\t\\n\\n\",\"progress\":{\"score\":0,\"passed\":false},\"score_function\":\"var score = function(document){\\n var grade = {};\\n grade.score = 0;\\n grade.successes = [];\\n grade.errors = [];\\n grade.feedback = [];\\n\\n //Content\\n var content;\\n if((typeof document != \\\"undefined\\\")&&(typeof document.documentElement != \\\"undefined\\\")){\\n content = document.documentElement.outerHTML;\\n }\\n\\n //Check DOM.\\n\\tif($(document).find(\\\"input#screen\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\"Could not find with id 'screen'.\\\");\\n\\t}\\n\\tif($(document).find(\\\"button#add\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\"Could not find