Una función programada en JavaScript recorre y examina las respuestas marcadas por el usuario
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplo de JavaScript: corrigiendo un test de radio buttons</title> <style type="text/css"> div#contenedor{ width: 35em; overflow: hidden; margin: 0 auto; background-color: #000000; padding: 0.5em; color: #FFF; } a:link { color: #FFF; } a:visited { color: #FFF; } a:active { color: #FFF; } </style> <script type="text/javascript"> //aquí la solución </script> </head> <body> <div id="contenedor"> <h1>Ejemplo de JavaScript:<br/> corrigiendo un test de radio buttons</h1> <table style="float:left; border: 1px solid white; margin-right:.5em;"> <tr> <td>A1<input type="radio" value="a1" name="1" /></td> <td>A2<input type="radio" value="a2" name="1"/></td> <td>A3<input type="radio" value="a3" name="1" /></td> <td>A4<input type="radio" value="a4" name="1" /></td> </tr> <tr> <td>B1<input type="radio" value="b1" name="2" /></td> <td>B2<input type="radio" value="b2" name="2"/></td> <td>B3<input type="radio" value="b3" name="2" /></td> <td>B4<input type="radio" value="b4" name="2" /></td> </tr> <tr> <td>C1<input type="radio" value="c1" name="3" /></td> <td>C2<input type="radio" value="c2" name="3"/></td> <td>C3<input type="radio" value="c3" name="3" /></td> <td>C4<input type="radio" value="c4" name="3" /></td> </tr> <tr> <td>D1<input type="radio" value="d1" name="4" /></td> <td>D2<input type="radio" value="d2" name="4"/></td> <td>D3<input type="radio" value="d3" name="4" /></td> <td>D4<input type="radio" value="d4" name="4" /></td> </tr> <tr> <td>F1<input type="radio" value="f1" name="5" /></td> <td>F2<input type="radio" value="f2" name="5"/></td> <td>F3<input type="radio" value="f3" name="5" /></td> <td>F4<input type="radio" value="f4" name="5" /></td> </tr> <tr> <td colspan="2"> <input type="button" value="Corregir" onclick="comprobarRadio(respuestaCorrecta)" /></td></tr> </table> <div id="solucion"></div> </div> </body> </html> |
Pensamos en una forma sencilla de hacerlo. A ver qué os parece. Espero vuestras opiniones en los comentarios.