Universidad de Costa Rica
Escuela de Ciencias de la Computación e Informática
CI-2413 Desarrollo de aplicaciones web
Profesor: Jeisson Hidalgo Céspedes

Examen 02

El examen es de carácter práctico y debe realizarse en una computadora con acceso al web. El estudiante puede disponer de cualquier recurso o referencia que guste, sean hechos durante el curso, estén disponibles en Internet, o en libros. Se dispone de dos horas para entregar la prueba y debe realizarse en forma individual.

Suponga que usted fue contratado(a) por la organización ficticia que construye el sitio virtual de material educativo en línea. Se quiere ofrecer a la comunidad un generador automático de exámenes para que los estudiantes puedan practicar y ser evaluados, cuantas veces gusten, sobre los temas de su interés.

Suponga que la comunidad cuenta con una gran base de datos de preguntas y el servidor puede escoger aleatoriamente entre ellas. Con el fin de ahorrar recursos y evitar congestiones, el servidor envía al cliente un objeto JSON (JavaScript Object Notation) con las preguntas seleccionadas, y una rutina en JavaScript se encargará de construir la página web con las preguntas a partir del objeto JSON.

Una vez que el estudiante ha ingresado las respuestas en la página web, presionará un botón para indicar que ha terminado. La rutina JavaScript revisará las respuestas del estudiante y le presentará la calificación, además le indicará visualmente cuáles preguntas contestó correcta o incorrectamente.

Para efectos de esta evaluación, asuma que el servidor web genera cada examen utilizando la notación que puede verse en el listado siguiente. Un examen es una secuencia de preguntas, por lo que se puede representar como un arreglo. Por simplicidad, asuma que todas las preguntas son del mismo tipo: de selección única. Cada pregunta se representa con un objeto y por ende tiene propiedades: el texto de la pregunta, el peso (cantidad de puntos que vale la pregunta), las opciones de respuesta y un índice que referencia la opción con la respuesta correcta. Dado que una pregunta puede tener una cantidad arbitraria de respuestas, estas deben representarse con un arreglo.

Sintaxis de los objetos JSON enviados por el servidor

Al convertir el objeto JSON del listado anterior en (X)HTML se podría obtener un formulario como el siguiente.

  1. [75%] Texto de la pregunta 1




  2. [25%] ¿La fuerza de gravitación es inversamente proporcional a:?




Formulario resultado de expandir el objeto JSON

El cual es resultado del código siguiente.



    
   
  1. 
      
    [75%] Texto de la pregunta 1
    
      
    
      
    
      
    
      
   
    2. 
   
  2. 
      
    [25%] ¿La fuerza de gravitación es inversamente proporcional a:?
    
      
    
      
    
      
    
      
   
    3. 




   
   



]]>
Un formulario en (X)HTML

En (X)HTML un <input type="radio"> genera un botón de radio: un control únicamente, sin ningún texto. El elemento label permite asociar un control con un texto, de tal forma que cuando se acciona el texto, se afecta el control. Sólo un botón de radio puede estar seleccionado en un grupo. La forma de crear un grupo de botones de radio en (X)HTML, es dándole a todos el mismo valor en el atributo name.

Evaluación

  1. Descargue el material de trabajo del examen. Asuma que el servidor web del sitio ficticio le ha proporcionado el objeto exam que se encuentra en el archivo exam.js, con el cual construirá la página web dinámicamente.
  2. [5%] Modifique el documento exam.xhtml para que incluya su programa de JavaScript exam.js. No debe hacer ningún otro cambio al archivo exam.xhtml, ni se debe invocar ninguna función de JavaScript desde él. Asegúrese de que sea XHTML5 válido.
  3. [5%] Modifique el archivo exam.js para invocar automáticamente una función inicializadora cuando el documento web se ha terminado de cargar en el navegador.
  4. [35%] Implemente la función inicializadora la cual crea el formulario en el documento recorriendo el arreglo de preguntas exam, recibido del servidor web. Todos los elementos del formulario deben crearse utilizando la jerarquía de Nodos del DOM (Document Object Model), ya que XHTML no implementa, ni es aconsejado, utilizar el método document.write() ni la propiedad Element.innerHTML.
  5. [35%] Implemente el botón "Calificar". Cuando el estudiante presiona este botón, calcule la nota obtenida sumando los puntos de las preguntas que contestó correctamente. Imprima esta calificación arriba de los botones. Haga que si la calificación es igual o superior a 70 se imprima en verde, de lo contrario en rojo. Con el fin de permitirle al estudiante saber cuáles preguntas contestó equivocadamente y cuáles eran las respuestas correctas, haga que tras presionar el botón "Corregir" las opciones de respuesta correctas aparezcan siempre en verde (se hayan marcado o no), y sólo aquellas contestadas erróneamente aparezcan en rojo. Defina estos estilos en el archivo exam.css y no en su código código JavaScript.
  6. [15%] Haga que el botón "Calificar" esté siempre deshabilitado. Habilítelo únicamente cuando el estudiante haya terminado de responder todas las preguntas. Una vez presionado, vuelve a su estado deshabilitado.
  7. [5%] Implemente el botón "Nuevo examen", el cual destruye el formulario y construye uno nuevo a partir del objeto exam enviado del servidor web. Para efectos de este examen, el objeto exam no varía, por lo que el efecto visual de presionar este botón será el de limpiar el formulario.

Para presentar su solución, comprima su página web, la hoja de estilo y el archivo de JavaScript. Suba el archivo comprimido a la plataforma educativa de la ECCI, en la evaluación con nombre Examen 02.