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

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.

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?