{"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\\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}},{\"type\":\"exercise\",\"title\":\"a) HTML tags\",\"description\":\"Add a header to the HTML document (with the
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\\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.successes = [];\\n grade.errors = [];\\n grade.feedback = [];\\n grade.score = 0;\\n \\n //Is there a
.\\n\\tif($(document).find(\\\"header\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"There is no
tag.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"
should be inside .\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#myheader\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"
should have identifier 'myheader'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#myheader.big\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"
should have class 'big'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#myheader.big[title]\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"
should have attribute 'title'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#myheader.big[title='Main header']\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"
should have a 'title' attribute with value 'Main header'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tvar header = $(document).find(\\\"body header#myheader.big[title='Main header']\\\");\\n\\tvar headerContent = $(header).html();\\n\\t\\n\\tif(headerContent.replace(/ +/g,\\\"\\\").toLowerCase().indexOf(\\\"welcometomycalculator\\\")==-1){\\n\\t grade.errors.push(\\\"The content of the
should be 'Welcome to my calculator'.\\\");\\n\\t return grade;\\n\\t}\\n\\t\\n grade.score = 10;\\n grade.successes.push(\\\"Perfect.\\\");\\n\\n return grade;\\n};\"},{\"type\":\"exercise\",\"title\":\"b) CSS styles\",\"description\":\"Complete and modify the content of the \\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 \\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 \\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 //Existencia de elementos del DOM.\\n\\tif($(document).find(\\\"input#screen\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\" with id 'screen' could not be found.\\\");\\n\\t}\\n\\tif($(document).find(\\\"button#add\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\" with id 'add' could not be found.\\\");\\n\\t}\\n\\tif($(document).find(\\\"button#equals\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\" with id 'equals' could not be found.\\\");\\n\\t}\\n\\tif($(document).find(\\\"button#fbx\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\" with id 'fbx' could not be found.\\\");\\n\\t}\\n\\n\\tif($(document).find(\\\"button#fbx\\\").html().toLowerCase().trim() != \\\"f(b,x)\\\"){\\n\\t \\treturn returnWithError(document,content,grade,\\\"\\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 //Existencia de elementos del DOM.\\n //Existencia de elementos del DOM.\\n\\tif($(document).find(\\\"input#screen\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\" with id 'screen' could not be found.\\\");\\n\\t}\\n\\tif($(document).find(\\\"button#add\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\" with id 'add' could not be found.\\\");\\n\\t}\\n\\tif($(document).find(\\\"button#equals\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\" with id 'equals' could not be found.\\\");\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div#counter\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\"
with id 'counter' could not be found.\\\");\\n\\t}\\n\\tif(parseInt($(document).find(\\\"div#counter\\\").html()) !== 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\"Counter should have a initial value of 0.\\\");\\n\\t}\\n\\t\\n var screen = $(document).find(\\\"input#screen\\\");\\n $(screen).trigger(\\\"click\\\");\\n $(screen).val(5);\\n $(document).find(\\\"#add\\\").trigger(\\\"click\\\");\\n $(screen).trigger(\\\"click\\\");\\n $(screen).val(2);\\n $(document).find(\\\"#equals\\\").trigger(\\\"click\\\");\\n \\n if(parseFloat($(screen).val()) != 7){\\n return returnWithError(document,content,grade,\\\"Add funtion does not work as expected.\\\");\\n }\\n \\n $(screen).trigger(\\\"click\\\");\\n $(screen).val(3);\\n $(document).find(\\\"#add\\\").trigger(\\\"click\\\");\\n $(screen).trigger(\\\"click\\\");\\n $(screen).val(7);\\n $(document).find(\\\"#equals\\\").trigger(\\\"click\\\");\\n \\n if(parseFloat($(screen).val()) != 10){\\n return returnWithError(document,content,grade,\\\"Add funtion does not work as expected.\\\");\\n }\\n \\n //Trigger error\\n $(screen).trigger(\\\"click\\\");\\n $(screen).val(\\\"Gato\\\");\\n $(document).find(\\\"#add\\\").trigger(\\\"click\\\");\\n $(screen).trigger(\\\"click\\\");\\n $(screen).val(\\\"Perro\\\");\\n $(document).find(\\\"#equals\\\").trigger(\\\"click\\\");\\n \\n if($(screen).val() != \\\"Error\\\"){\\n return returnWithError(document,content,grade,\\\"Calculator should show \\\\\\\"Error\\\\\\\" when any of the arguments is a string instead of a number.\\\");\\n }\\n \\n if(parseInt($(document).find(\\\"div#counter\\\").html()) != 1){\\n\\t return returnWithError(document,content,grade,\\\"Counter should have a value of 1 after the first Error.\\\");\\n\\t}\\n\\t\\n\\tvar errorsToTrigger = 5;\\n\\tfor(var i=0; iRun 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\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},"id":1},{"type":"exercise","title":"a) HTML tags","description":"Add a header to the HTML document (with the
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\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.successes = [];\n grade.errors = [];\n grade.feedback = [];\n grade.score = 0;\n \n //Is there a
.\n\tif($(document).find(\"header\").length === 0){\n\t \tgrade.errors.push(\"There is no
tag.\");\n\t \treturn grade;\n\t}\n\tif($(document).find(\"body header\").length === 0){\n\t \tgrade.errors.push(\"
should be inside .\");\n\t \treturn grade;\n\t}\n\tif($(document).find(\"body header#myheader\").length === 0){\n\t \tgrade.errors.push(\"
should have identifier 'myheader'.\");\n\t \treturn grade;\n\t}\n\tif($(document).find(\"body header#myheader.big\").length === 0){\n\t \tgrade.errors.push(\"
should have class 'big'.\");\n\t \treturn grade;\n\t}\n\tif($(document).find(\"body header#myheader.big[title]\").length === 0){\n\t \tgrade.errors.push(\"
should have attribute 'title'.\");\n\t \treturn grade;\n\t}\n\tif($(document).find(\"body header#myheader.big[title='Main header']\").length === 0){\n\t \tgrade.errors.push(\"
should have a 'title' attribute with value 'Main header'.\");\n\t \treturn grade;\n\t}\n\tvar header = $(document).find(\"body header#myheader.big[title='Main header']\");\n\tvar headerContent = $(header).html();\n\t\n\tif(headerContent.replace(/ +/g,\"\").toLowerCase().indexOf(\"welcometomycalculator\")==-1){\n\t grade.errors.push(\"The content of the
should be 'Welcome to my calculator'.\");\n\t return grade;\n\t}\n\t\n grade.score = 10;\n grade.successes.push(\"Perfect.\");\n\n return grade;\n};","id":2},{"type":"exercise","title":"b) CSS styles","description":"Complete and modify the content of the \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};","id":3},{"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 \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 \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 //Existencia de elementos del DOM.\n\tif($(document).find(\"input#screen\").length === 0){\n\t \treturn returnWithError(document,content,grade,\" with id 'screen' could not be found.\");\n\t}\n\tif($(document).find(\"button#add\").length === 0){\n\t \treturn returnWithError(document,content,grade,\" with id 'add' could not be found.\");\n\t}\n\tif($(document).find(\"button#equals\").length === 0){\n\t \treturn returnWithError(document,content,grade,\" with id 'equals' could not be found.\");\n\t}\n\tif($(document).find(\"button#fbx\").length === 0){\n\t \treturn returnWithError(document,content,grade,\" with id 'fbx' could not be found.\");\n\t}\n\n\tif($(document).find(\"button#fbx\").html().toLowerCase().trim() != \"f(b,x)\"){\n\t \treturn returnWithError(document,content,grade,\"\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 //Existencia de elementos del DOM.\n //Existencia de elementos del DOM.\n\tif($(document).find(\"input#screen\").length === 0){\n\t \treturn returnWithError(document,content,grade,\" with id 'screen' could not be found.\");\n\t}\n\tif($(document).find(\"button#add\").length === 0){\n\t \treturn returnWithError(document,content,grade,\" with id 'add' could not be found.\");\n\t}\n\tif($(document).find(\"button#equals\").length === 0){\n\t \treturn returnWithError(document,content,grade,\" with id 'equals' could not be found.\");\n\t}\n\t\n\tif($(document).find(\"div#counter\").length === 0){\n\t \treturn returnWithError(document,content,grade,\"
with id 'counter' could not be found.\");\n\t}\n\tif(parseInt($(document).find(\"div#counter\").html()) !== 0){\n\t \treturn returnWithError(document,content,grade,\"Counter should have a initial value of 0.\");\n\t}\n\t\n var screen = $(document).find(\"input#screen\");\n $(screen).trigger(\"click\");\n $(screen).val(5);\n $(document).find(\"#add\").trigger(\"click\");\n $(screen).trigger(\"click\");\n $(screen).val(2);\n $(document).find(\"#equals\").trigger(\"click\");\n \n if(parseFloat($(screen).val()) != 7){\n return returnWithError(document,content,grade,\"Add funtion does not work as expected.\");\n }\n \n $(screen).trigger(\"click\");\n $(screen).val(3);\n $(document).find(\"#add\").trigger(\"click\");\n $(screen).trigger(\"click\");\n $(screen).val(7);\n $(document).find(\"#equals\").trigger(\"click\");\n \n if(parseFloat($(screen).val()) != 10){\n return returnWithError(document,content,grade,\"Add funtion does not work as expected.\");\n }\n \n //Trigger error\n $(screen).trigger(\"click\");\n $(screen).val(\"Gato\");\n $(document).find(\"#add\").trigger(\"click\");\n $(screen).trigger(\"click\");\n $(screen).val(\"Perro\");\n $(document).find(\"#equals\").trigger(\"click\");\n \n if($(screen).val() != \"Error\"){\n return returnWithError(document,content,grade,\"Calculator should show \\\"Error\\\" when any of the arguments is a string instead of a number.\");\n }\n \n if(parseInt($(document).find(\"div#counter\").html()) != 1){\n\t return returnWithError(document,content,grade,\"Counter should have a value of 1 after the first Error.\");\n\t}\n\t\n\tvar errorsToTrigger = 5;\n\tfor(var i=0; i