Navegación : recursos : plantilla para test sin evaluación: tutorial fácil

Plantilla para test sin evaluación: tutorial fácil

El objetivo de este artículo es mostrar al lector cómo escribir el código de una página web con un formulario sencillo al que se añade interactividad mediante un formulario y un poquito de DOM y JavaScript. Cuando el lector termine de leer este tutorial será capaz de entender cómo funciona el siguiente ejemplo terminado de plantilla, y de modificarlo para adaptarlo a sus necesidades.

Primer paso: esquema del documento html

Para empezar mostramos el elemento del que vamos a partir: un sencillo esquema de página web que se puede copiar de la siguiente caja para pegar en un editor sencillo de texto, como TextEdit (en ordenadores Mac) o el bloc de notas (o WordPad, de PC)

<html>
<head>
    <title>Plantilla de ejercicio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
</body>
</html>

Hasta aquí tenemos lo que cualquier editor web nos puede ofrecer (incluido el espantoso FrontPage)

A continuación añadimos la siguiente línea de código, que introduce el texto que servirá de introducción al ejercicio interactivo. Se trata de las instrucciones básicas para los alumnos en html. El siguiente código hay que insertarlo entre las etiquetas <body></body>

<p>Contesta a las siguientes preguntas eligiendo la respuesta correcta.</p>

Introducimos el formulario

El siguiente paso es muy sencillo: introducimos la etiqueta de apertura y cierre del formulario que vamos a utilizar, y le asignamos un nombre, para poder identificarlo posteriormente. En el HTML de toda la vida la etiqueta de apertura de un formulario es <form> y la de cierre: </form>.

También necesitaremos asignar un nombre único al formulario, un nombre que nosotros podemos elegir, pero que conviene que tenga alguna relación con el uso que le vayamos a dar. Para nombrar los distintos elementos de HTML basta con dar un valor al atributo name. Nosotros llamaremos “ejercicio” a nuestro formulario, porque permitirá a nuestros alumnos ejercitarse en una determinada materia. El código para nombrar al formulario name ="ejercicio", se añade a la etiqueta de inicio del formulario, de forma que dicha etiqueta quedará así: <form name ="ejercicio">.

Veamos como va todo nuestro código hasta ahora:

<html>
<head>
    <title>Plantilla de ejercicio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<p>Contesta a las siguientes preguntas eligiendo la respuesta correcta.</p>
<form name ="ejercicio">

</form>
</body>
</html>

Poniendo el texto la primera pregunta

A continuación vamos a crear la estructura de la primera pregunta. Para ello, nos vamos a valer de la etiqueta HTML <div></div>, “división”. Esta etiqueta nos servirá para separar unas preguntas de otras (cada pregunta en su propia división) y así crear un documento bien estructurado desde el punto de vista semántico.

Para ello comenzamos poniento el enunciado de la primera pregunta entre las etiquetas que semánticamente le corresponden, que son las que indican párrafo: <p></p>. Por tanto, añadiremos justo después de la etiqueta de apertura del formulario el siguiente código:

<div>
<p>Enunciado de la pregunta 1:</p>
</div>

Añadiendo las opciones de respuesta

Las opciones de respuesta las vamos a incluir en una “lista desordenada”, delimitada por las etiquetas HTML <ul></ul>. Dentro de estas etiquetas van las propias de cada elemento de la lista, en nuestro caso de cada opción de respuesta: las etiquetas HTML correspondientes son <li></li>. Como esto es más fácil viéndolo que explicándolo, allá va el código (en rojo las etiquetas de apertura y cierre de la lista desordenada, y azul las etiquetas que delimitan cada uno de los elementos de dicha lista):

<div>
<p>Enunciado de la pregunta 1:</p>
<ul>
<li>Opción a</li>
<li>Opción b</li>
<li>Opción c</li>
</ul>
</div>

Y ahora ponemos todo el código de la pregunta (etiquetas de apertura y cierre en verde) junto con todo lo anterior dentro de las etiquetas de inicio y final del formulario (en marrón), para obtener el código del ejemplo 1:

<html>
<head>
    <title>Plantilla de ejercicio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<p>Contesta a las siguientes preguntas eligiendo la respuesta correcta.</p>
<form name ="ejercicio">
</div>
<p>Enunciado de la pregunta 1:</p>
<ul>
<li>Opción a</li>
<li>Opción b</li>
<li>Opción c</li>
</ul>
 </div>
</form>
</body>
</html>

Poniendo los elementos de formulario

Empezamos añadiendo un botón de tipo radio () justo delante del enunciado de cada opción. Es muy sencillo: el código HTML para este tipo de botones es: <input type="radio" />. Para que, además, el navegador sepa que los tres botones pertenecen a la misma pregunta, hay que añadir a cada <input type="radio" /> el atributo name con el mismo valor. Nosotros elegiremos el valor name="P1" (Pregunta 1)

De este modo, hay que añadir <input type="radio" name="P1" /> delante del enunciado de cada opción de respuesta:

<div>
<p>Enunciado de la pregunta 1:</p>
<ul>
<li><input type="radio" name="P1" />Opción a</li>
<li><input type="radio" name="P1" />Opción b</li>
<li><input type="radio" name="P1" />Opción c</li>
</ul>
</div>

Lo siguiente que haremos será poner después de cada pregunta una caja de texto como esta: para que en ella aparezca un mensaje para el usuario cuando elija una respuesta. El mensaje será cuando se marque la opción correcta, y cuando se marque una opción equivocada.

El código HTML que necesitamos para la caja de texto es el siguiente: <input type="text" size="12" />. El valor 12 para el atributo size garantiza que en la caja de texto quepan, como mínimo 12 caracteres.

Aún necesitamos poner un nombre a esta caja, para poder referir posteriormente, el mensaje adecuado a esta caja. El nombre que vamos a poner a la caja de la pregunta 1 va a ser “feedback1”, de modo que el código que debemos poner al final de la pregunta 1 (antes de la etiqueta de cierre de esta pregunta </div>) es: <input type="text" name="feedback1" size="12" />

Resumiendo, después de poner todos los elementos de formulario en la pregunta 1, el código que nos queda es el siguiente:

<div>
<p>Enunciado de la pregunta 1:</p>
<ul>
<li><input type="radio" name="P1" />Opción a</li>
<li><input type="radio" name="P1" />Opción b</li>
<li><input type="radio" name="P1" />Opción c</li>
</ul>
<input type="text" name="feedback1" size="12" />
</div>

Añadiendo “inteligencia” al formulario

Ahora ya tenemos la pregunta, las opciones de respuesta, y los elementos de formulario. Sólo nos falta añadir “inteligencia” al conjunto, para comunicar al usuario si la opción de respuesta que ha elegido es la correcta o no. Para ello nos vamos a servir de unas sencillas instrucciones en JavaScript apoyadas en el DOM establecido por el organismo internacional que vela por los estándares web: el W3C.

El esquema de trabajo es muy simple: añadir al código de cada botón de opción una instrucción que comunique a la caja de texto de la parte inferior (que hemos denominado “feedback1”) si el texto que tiene que mostrar es la palabra “Correcto” o “Incorrecto”

Esa instrucción que consigue comunicarse con la caja de texto “feedback1” es el controlador de eventos onclick, y tiene que haber una para cada botón de opción. Ya sabemos que cuando el usuario haga clic en el botón de cada opción de respuestas, el navegador hará algo. Ahora hay que indicar cuál es ese algo.

Empecemos por el final, y analicemos la instrucción completa: onclick ="document.ejercicio.feedback1.value='Incorrecto'". Este fragmento de código dentro de la etiqueta de un botón de opción viene a decir al navegador algo parecido a lo siguiente: “Cuando el usuario haga clic en este botón de opción hay que escribir el texto ‘Incorrecto’ en el elemento llamado 'feedback1' del formulario 'ejercicio', de este documento”.

El conjunto de convenciones que permiten al navegador y al diseñ ponerse de acuerdo sobre lo que hacer es lo que se conoce con el nombre de Document Object Model o DOM.

Hemos visto la instrucción que hay que añadir al código de un botón de opción para que muestre que una respuesta es incorrecta. Para que muestre cualquier otra información textual, simplemente tenemos que cambiar el valor de toda la instrucción de ‘Incorrecto’ a lo que queramos.

Suponiendo que las opciones “a” y “c” son las incorrectas, y que la “b” es la correcta, el código que acabamos de aprender quedaría así (ejemplo 2):

<html>
<head>
    <title>Plantilla de ejercicio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<p>Contesta a las siguientes preguntas eligiendo la respuesta correcta.</p>
<form name ="ejercicio">
<div>
<p>Enunciado de la pregunta 1:</p>
<ul>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opción a</li>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Correcto'" />Opción b</li>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opción c</li></ul>
<input type="text" name="feedback1" size="12" />
</div>
</form>
</body>
</html>

Añadiendo comentarios

Para mejorar el aspecto de nuestro código, y para que nos resulte más fácil consultarlo, entenderlo y editarlo en el futuro es muy recomendable comentar el código que uno escribe. Los comentarios se introducen entre la etiqueta <!-- esto es un comentario -->. Los navegadores ignoran lo que incluyamos en los comentarios, es decir, lo que aparece entre esta etiqueta: <!-- y esta otra: -->

A continuación presentamos el código que tenemos hasta ahora con comentarios añadidos:

<html>
<head>
    <title>Plantilla de ejercicio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<p>Contesta a las siguientes preguntas eligiendo la respuesta correcta.</p>
<form name ="ejercicio"><!-- INICIO DEL EJERCICIO -->
<div><!-- inicio pregunta 1 -->
<p>Enunciado de la pregunta 1:</p>
<ul>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opción a</li>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Correcto'" />Opción b</li>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opción c</li></ul>
<input type="text" name="feedback1" size="12" />
</div><!-- fin pregunta 1 -->
</form><!-- FINAL DEL EJERCICIO -->
</body>
</html>

Añadiendo más preguntas

Para añadir más preguntas, el proceso es muy sencillo. Se trata de seguir cuatro sencillos pasos:

  1. Seleccionar el código de la primera pregunta (desde la línea <div><!-- inicio pregunta 1 --> hasta la línea </div><!-- fin pregunta 1 -->).
  2. Copiar el código seleccionado en el paso anterior.
  3. Pegar el código seleccionado después de la línea </div><!-- fin pregunta 1 --> y antes de la línea </form><!-- FINAL DEL EJERCICIO -->
  4. El último paso es muy sencillo: se trata de cambiar los unos marcados en rojo, por doses, y cambiar también los comentarios.

<div><!-- inicio pregunta 1 -->
<p>Enunciado de la pregunta 1:</p>
<ul>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opción a</li>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Correcto'" />Opción b</li>
<li><input type="radio" name ="P1" onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opción c</li></ul>
<input type="text" name="feedback1" size="12" />
</div><!-- fin pregunta 1 -->

El código de nuestro ejercicio, con dos preguntas, quedaría de la siguiente manera (ejemplo 3):

<html>
<head>
<title>Plantilla de ejercicio (test sin evaluaci&oacute;n)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Contesta a las siguientes preguntas eligiendo la respuesta correcta.</p>
<form name ="ejercicio"><!-- INICIO DEL EJERCICIO -->

<div class="pregunta"><!-- inicio pregunta 1 -->
<p>Enunciado de la pregunta 1:</p>
<ul>
<li><input type="radio" name ="P1"  onclick = "document.ejercicio.feedback1.value ='Incorrecto'" />Opci&oacute;n a</li>
<li><input type="radio" name ="P1"  onclick = "document.ejercicio.feedback1.value = 'Correcto'" />Opci&oacute;n b</li>
<li><input type="radio" name ="P1"  onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opci&oacute;n c</li>
</ul>
<input type="text" name="feedback1" size="12" />
</div><!-- fin pregunta 1 -->
<div class="pregunta"><!-- inicio pregunta 2 -->
<p>Enunciado de la pregunta 2:</p>
<ul>
<li><input type="radio" name ="P2"  onclick = "document.ejercicio.feedback2.value = 'Correcto'" />Opci&oacute;n a</li>
<li><input type="radio" name ="P2"  onclick = "document.ejercicio.feedback2.value = 'Incorrecto'" />Opci&oacute;n b</li>
<li><input type="radio" name ="P2"  onclick = "document.ejercicio.feedback2.value = 'Incorrecto'" />Opci&oacute;n c</li>
</ul>
<input type="text" name="feedback2" size="12" />
</div><!-- fin pregunta 2 -->
</form><!-- FINAL DEL EJERCICIO -->
</body>
</html>

Un par de mejoras sencillas

Analizando el funcionamiento del cuestionario, podemos darnos cuenta de mejoraría notablemente lo que ya hemos conseguido con un botón que borrara todos los elementos de cuestionario y permitiera hacer de nuevo el ejercicio desde cero. Lo mejor de todo es que esto es muy fácil de conseguir, porque basta con poner la siguiente línea de código justo antes de la etiqueta de cierre del formulario (</form>):

<input type="reset" value="Borra todo" />

Otra mejora podría consistir en permitir que el usuario pudiera imprimir la página después de haber realizado el ejercicio, con sólo pulsar un botón. Esto se consigue también de forma sencilla añadiendo la siguiente línea de código:

<input type="button" value="Imprimir" onClick="window.print()" />

Aquí mostramos cómo queda nuestro trabajo finalmente (ejemplo 4):

<html>
<head>
<title>Plantilla de ejercicio (test sin evaluaci&oacute;n)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Contesta a las siguientes preguntas eligiendo la respuesta correcta.</p>
<form name ="ejercicio"><!-- INICIO DEL EJERCICIO -->

<div class="pregunta"><!-- inicio pregunta 1 -->
<p>Enunciado de la pregunta 1:</p>
<ul>
<li><input type="radio" name ="P1"  onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opci&oacute;n a</li>
<li><input type="radio" name ="P1"  onclick = "document.ejercicio.feedback1.value = 'Correcto'" />Opci&oacute;n b</li>
<li><input type="radio" name ="P1"  onclick = "document.ejercicio.feedback1.value = 'Incorrecto'" />Opci&oacute;n c</li>
</ul>
<input type="text" name="feedback1" size="12" />
</div><!-- fin pregunta 1 -->
<div class="pregunta"><!-- inicio pregunta 2 -->
<p>Enunciado de la pregunta 2:</p>
<ul>
<li><input type="radio" name ="P2"  onclick = "document.ejercicio.feedback2.value = 'Correcto'" />Opci&oacute;n a</li>
<li><input type="radio" name ="P2"  onclick = "document.ejercicio.feedback2.value = 'Incorrecto'" />Opci&oacute;n b</li>
<li><input type="radio" name ="P2"  onclick = "document.ejercicio.feedback2.value = 'Incorrecto'" />Opci&oacute;n c</li>
</ul>
<input type="text" name="feedback2" size="12" />
</div><!-- fin pregunta 2 -->
<input type="reset" value="Borra todo" /> <input type="button" value="Imprimir" onClick="window.print()" />
</form><!-- FINAL DEL EJERCICIO -->
</body>
</html>

Conclusión

Y con esto damos por concluido nuestro tutorial para elaborar sencillos ejercicios de preguntas de elección múltiple. El lector podrá adaptar y ampliar de forma fácil el esquema de código aquí propuesto para adaptarlo a sus necesidades.

Obsérvese que hemos hablado de “ejercicio” y no de “examen”, porque nuestro formulario simplemente comunica al usuario si ha contestado bien o mal, pero no proporciona una evaluación numeérica o cualitativa. Dejamos estos refinamientos para un nuevo trabajo.

En otra ocasión tal vez nos decidamos a completar el trabajo mejorando la accesibilidad para discapacitados, y dándole un toque de estilo para mejorar el aspecto con CSS como en el ejemplo 5, (que no comentamos, pero cuyo código puede analizar el lector interesado).

Condiciones de uso