Ejemplo de JavaScript: corrigiendo un test de radio buttons

Una función programada en JavaScript recorre y examina las respuestas marcadas por el usuario

Tabla de Radio Buttons

Test de RadioButtons

En esta ocasión os propongo un ejercicio de programación. La idea no es mía sino de uno de mis  alumnos. Me pareció un buen ejemplo para trabajar con bucles, condicionales, arrays,  controles de tipo radio button, estructuras anidadas y por supuesto con el DOM.

Como mi alumno estaba preparando una prueba de acceso para un ciclo formativo tenía varios modelos de examen con preguntas de tipo test sobre distintas materias. Se le ocurrió entonces elaborar en HTML una tabla con las posibles respuestas a uno de estos exámenes y un programa que las corrigiera automáticamente. Ahí la tenéis en la imagen.

En clase estábamos estudiando JavaScript así que decidimos hacerlo en este lenguaje. Primero debíamos crear el documento HTML que nos sirviera de base. Se trata de una tabla de 5 preguntas con 4 posibles respuestas cada una, además de un botón que activará la corrección del test.

Pensamos en una forma sencilla de hacerlo. A ver qué os parece. Espero vuestras opiniones en los comentarios.

Solución

Se nos ocurrió guardar en un array, al que llamaremos aquí “respuestaCorrecta“, los valores correspondientes a las respuestas acertadas. Luego crearíamos una función a la que daremos el nombre de “comprobarRadio( )” que comprobaría si estas respuestas coinciden con las seleccionadas por el usuario.

Al pulsar el botón “Corregir“, esta función recibirá como parámetro matriz el array respuestaCorrecta”  pero debería servir para cualquier número de preguntas y opciones. Comparto aquí el código JavaScript de nuestra solución, y la comento más abajo:

Como se puede observar, primero declaramos una serie de variables que serán empleadas a lo largo del código.

  • numeroRespuestasOK” es el contador de respuestas acertadas.
  • numeroRespuestasKO“, el contador de respuestas fallidas.
  • solucion” guarda una referencia al div con id=”solucion”, donde se mostrará el resultado del examen.
  • tablaResultados”  inicializa la tabla donde la función escribirá una fila por cada pregunta seleccionada y al final el total acumulado en los contadores.

Después anidamos un bucle for dentro de otro.

Dentro de la función “comprobarRadio( )“, el primer bucle completará tantos ciclos como preguntas (en este caso 5, de la A a la F, la misma longitud (length) del array “matriz que se corresponde con “respuestaCorrecta” pues se le pasará a la función cuando sobre el botón se produzca el evento onclick ).

El segundo bucle, anidado dentro del primero, recorrerá las distintas opciones (en este caso 4 radio buttons) con el fin de comprobar cuál de ellas ha sido seleccionada.

Programar en JavaScript, un ejemplo.Para cada pregunta, la variable “radios” guarda en un array una referencia a las 4 opciones posibles. Utilizamos la función getElementsByName aprovechando que cada conjunto de radio buttons asociados a su respectiva pregunta lleva como nombre un número consecutivo. Así que para la primera pregunta es 1, (j+1), y sus posibles respuestas, a1, a2, a3, a4. Y eso para cada pregunta, de la A a la F.

Dentro del segundo bucle for, el más interno, ocurre lo más interesante.

Como decía, por cada pregunta el segundo bucle for recorre las cuatro posibles respuestas, el array de radio buttons,  “radios“. Aquí tenemos la primera estructura condicional. Si encuentra una marcada (checked) recoge su “valor (value) y lo contrasta con el correspondiente valor en el array de respuestas correctas (“matriz).

En el caso de que la respuesta marcada coincida con la respuesta acertada (segundo condicional, anidado en el primero), concatenamos a la variable tablaResultados una fila donde se indica que la respuesta es correcta. Si no coincide, else, se indicará lo contrario. En ambos casos se utiliza la sentencia break” para salir del bucle interno y pasar a la siguiente pregunta. Además se les suma una unidad a los contadores de respuestas correctas e incorrectas por medio del operador ++ de autoincremento.

 Finalmente una sencilla operación aritmética calcula la respuestas en blanco.

Se calculan las respuestas no marcadas, “numeroRespuestasNulas, y a continuación concatenamos una fila más a la tabla de resultados escribiendo los valores acumulados en los tres contadores. Se cierra la tabla y la incorporamos al bloque “solucion“, mediante el método innerHTML.

Aquí lo tenemos en funcionamiento. ¿Qué te parece? ¿Se te ocurre otra solución?

6 reflexiones sobre “Ejemplo de JavaScript: corrigiendo un test de radio buttons

  1. Ariel Santiago Castro Alvarez Autor del Post

    En respuesta a @dannyjusep, quien me preguntaba, y empiezo por el final:

    Debo decir que el test seguirá funcionando si cambia el array “respuestaCorrecta” por ejemplo así:
    Original: var respuestaCorrecta = new Array(“a1”, “b2”, “c3”, “d4”, “f1”);
    Nuevo: var respuestaCorrecta = new Array(“a2”, “b2”, “c2”, “d2”, “f1”);

    Si añade más posibilidades, por ejemplo “g8”, no funcionará, porque no está en el html.

    En cuanto a la primera pregunta:

    Habría que modificar el ejercicio, darle un nuevo enfoque. Pero en todo caso se trataría de obtener mediante métodos del DOM el texto a mostrar.

    Por ejemplo. Se me ocurre una solución rápida, modificar el HTML así:

    El código javascript, debería mostrar el texto “Verde esperanza”, si la opción marcada fuera “a2”, ¿es esto a lo que se refería Danny?

    En JavaScript lo modificaríamos del siguiente modo en el caso de que fuera la respuesta correcta:

    ¿A alguien se le ocurre otra solución?

    Espero haberle aclarado sus dudas @dannyjusep. Gracias por su interés.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Por favor completa este campo de seguridad, gracias. * Time limit is exhausted. Please reload CAPTCHA.