{"type":"test","title":"Calculadora","exercises":"[{\"type\":\"exercise\",\"title\":\"Introducción\",\"description\":\"A continuación se muestra el código de una página HTML con una calculadora muy simple que permite realizar únicamente sumas con 2 operandos.\\nPulsando sobre el botón de Ejecutar Código (play) puedes visualizar la página HTML.\\nPulsando sobre el título Calculadora o el selector puedes acceder a los diferentes ejercicios de este test de autoevaluación.\\nPulsa el botón Ejecutar Código, prueba la calculadora y avanza al primer ejercicio.\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n\\n\\tCalculadora\\n\\t\\n\\t\\n\\n\\n\\n\\t
\\n\\t\\tNúmero: \\n\\t\\t\\n\\t\\t\\n\\t
\\n\\n\\t\\n\\n\",\"progress\":{\"score\":0,\"passed\":false}},{\"type\":\"exercise\",\"title\":\"a) Etiquetas HTML\",\"description\":\"Añada al documento HTML una cabecera (mediante la etiqueta ) con identificador \\\"cabecera\\\", clase \\\"grande\\\", un atributo \\\"title\\\" con valor \\\"Cabecera principal\\\" y contenido \\\"Bienvenido a mi calculadora\\\".\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n\\n\\tCalculadora\\n\\t\\n\\t\\n\\n\\n\\n\\t
\\n\\t\\tNúmero: \\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 //Existencia de la cabecera .\\n\\tif($(document).find(\\\"header\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"No añadiste la cabecera .\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"La cabecera debe estar dentro de .\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#cabecera\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"La cabecera debe tener el identificador 'cabecera'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#cabecera.grande\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"La cabecera debe tener la clase 'grande'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#cabecera.grande[title]\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"La cabecera debe tener un atributo 'title'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"body header#cabecera.grande[title='Cabecera principal']\\\").length === 0){\\n\\t \\tgrade.errors.push(\\\"La cabecera debe tener un atributo 'title' con valor 'Cabecera principal'.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tvar header = $(document).find(\\\"body header#cabecera.grande[title='Cabecera principal']\\\");\\n\\tvar headerContent = $(header).html();\\n\\t\\n\\tif(headerContent.replace(/ +/g,\\\"\\\").toLowerCase().indexOf(\\\"bienvenidoamicalculadora\\\")==-1){\\n\\t grade.errors.push(\\\"El contenido de la cabecera debe ser 'Bienvenido a mi calculadora'.\\\");\\n\\t return grade;\\n\\t}\\n\\t\\n grade.score = 10;\\n grade.successes.push(\\\"Perfecto.\\\");\\n\\n return grade;\\n};\"},{\"type\":\"exercise\",\"title\":\"b) Estilos CSS\",\"description\":\"Complete y modifique el contenido de la etiqueta \\n\\n\\n\\n\\t
';\\n $(document).find(\\\"body\\\").html(bodyContent);\\n \\n //Restore events\\n $(document).find(\\\"#pantalla\\\").click(function(){\\n\\t\\t\\t$(this).val(\\\"\\\");\\n\\t\\t});\\n\\t\\t$(document).find(\\\"#suma\\\").click(function(){\\n\\t\\t\\tacc = parseFloat($(document).find(\\\"#pantalla\\\").val());\\n\\t\\t\\top = \\\"+\\\";\\n\\t\\t});\\n\\t\\t$(document).find(\\\"#igual\\\").click(function(){\\n\\t\\t\\tvar n = parseFloat($(document).find(\\\"#pantalla\\\").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(\\\"#pantalla\\\").val(acc);\\n\\t\\t\\tacc = 0;\\n\\t\\t\\top = undefined;\\n\\t\\t});\\n }\\n \\n //Tests\\n\\tif($(document).find(\\\"#pantalla\\\").css(\\\"background-color\\\") != \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"La pantalla de la calculadora debería tener el fondo negro.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"#pantalla\\\").css(\\\"color\\\") != \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"La pantalla de la calculadora debería mostrar el texto en color blanco.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"input\\\").not(\\\"#pantalla\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"Solo el de la pantalla de la calculadora debería tener el fondo negro.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"input\\\").not(\\\"#pantalla\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n\\t grade.errors.push(\\\"Solo el de la pantalla de la calculadora debería mostrar el texto en color blanco.\\\");\\n\\t return grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div.calculadora.botonera button\\\").css(\\\"background-color\\\") != \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"Todos los botones dentro de
deben tener fondo negro.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div.calculadora.botonera button\\\").css(\\\"color\\\") != \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"Todos los botones dentro de
deben tener letra blanca.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div.calculadora.botonera button[operacion='true']\\\").css(\\\"border-top-color\\\") != \\\"rgb(0, 0, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"Todos los botones de
que tengan un atributo \\\\\\\"operación\\\\\\\" igual a \\\\\\\"true\\\\\\\" deben tener borde azul.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\t//Check CSS double class selector\\n\\tif($(document).find(\\\"div#test2.botonera button\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test2.botonera button\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test2.botonera button[operacion='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
con atributo \\\\\\\"operación\\\\\\\" igual a \\\\\\\"true\\\\\\\" no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div#test1.calculadora button\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test1.calculadora button\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div#test1.calculadora button[operacion='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
con atributo \\\\\\\"operación\\\\\\\" igual a \\\\\\\"true\\\\\\\" no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"article#test3.calculadora.botonera button\\\").css(\\\"background-color\\\") == \\\"rgb(0, 0, 0)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"article#test3.calculadora.botonera button\\\").css(\\\"color\\\") == \\\"rgb(255, 255, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"article#test3.calculadora.botonera button[operacion='true']\\\").css(\\\"color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
con atributo \\\\\\\"operación\\\\\\\" igual a \\\\\\\"true\\\\\\\" no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\t\\n\\tif($(document).find(\\\"div.calculadora.botonera button[operacion!='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
con atributo \\\\\\\"operación\\\\\\\" igual a \\\\\\\"true\\\\\\\" no es correcto.\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\tif($(document).find(\\\"div.calculadora.botonera input#test6[operacion='true']\\\").css(\\\"border-top-color\\\") == \\\"rgb(0, 0, 255)\\\"){\\n grade.feedback.push()\\t \\n\\t \\tgrade.errors.push(\\\"El selector CSS para aplicar el estilo a todos los botones dentro de
con atributo \\\\\\\"operación\\\\\\\" igual a \\\\\\\"true\\\\\\\" no es correcto.\\\");\\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(\\\"Los inputs de tipo texto solo deberían tener borde rojo si su
contenedor tiene la clase \\\\\\\"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\\t \\tgrade.errors.push(\\\"Los inputs de tipo texto deberían tener borde rojo si su
contenedor tiene la clase \\\\\\\"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\\t \\tgrade.errors.push(\\\"Los inputs de tipo texto solo deberían tener borde rojo si contenedor es un
.\\\");\\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\\t \\tgrade.errors.push(\\\"Los inputs solo deberían tener borde rojo si son de tipo texto.\\\");\\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\\t \\tgrade.errors.push(\\\"Solamente los inputs y no otros elementos HTML deberían tener borde rojo si su
contenedor tiene la clase \\\\\\\"error\\\\\\\".\\\");\\n\\t \\treturn grade;\\n\\t}\\n\\n grade.score = 10;\\n grade.successes.push(\\\"Correcto.\\\");\\n\\n return grade;\\n};\"},{\"type\":\"exercise\",\"title\":\"c) Gestión de errores\",\"description\":\"Modifique la calculadora para que cuando alguno de los operandos introducidos sea una cadena de texto en lugar de un número muestre por la pantalla el mensaje \\\"Error\\\".\",\"editorMode\":\"HTML\",\"content\":\"\\n\\n\\n\\tCalculadora\\n\\t\\n\\t\\n\\n\\n\\n\\t
\\n\\t\\tNúmero: \\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 //Existencia de elementos del DOM.\\n\\tif($(document).find(\\\"input#pantalla\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\"No se encontró el con id 'pantalla'.\\\");\\n\\t}\\n\\tif($(document).find(\\\"button#suma\\\").length === 0){\\n\\t \\treturn returnWithError(document,content,grade,\\\"No se encontró el