Usted está aquíPlantilla para examen con evaluación: tutorial fácil
Plantilla para examen con evaluación: tutorial fácil
En un trabajo anterior mostrábamos 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. Dicho trabajo permitía elaborar un ejercicio interactivo que no ofrecía ningún tipo de evaluación del rendimiento del usuario.
El presente artículo asume que el lector está familiarizado con el mencionado artículo, y pretende que el lector aprenda a poner en práctica un sistema de evaluación para un cuestionario interactivo con formato de respuesta de elección múltiple. Si en el anterior trabajo explicábamos pormenorizadamente los detalles del código, en este caso no seremos tan exhaustivos. Explicaremos con detalle lo suficiente para configurar y personalizar el cuestionario, pero sin dar demasiadas explicaciones sobre los entresijos de las secuencias de comandos de JavaScript que sirven de “cerebro” al invento. Al finalizar la lectura de este artículo, el lector podrá configurar y personalizar la plantilla del cuestionario con evaluación.
Así pues, explicaremos básicamente dos cosas sobre nuestra plantilla:
- Configuración del código JavaScript, y
- Configuración de las preguntas y respuestas.
Pero antes de empezar, recordamos brevemente la estructura general de cualquier documento HTML.
La estructura del documento HTML
Para empezar mostramos el elemento del que vamos a partir: el mismo 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). Es exactamente igual que el que utilizamos en el tutorial para elaborar un ejercicio interactivo sin evaluación (sólo cambia el título):
<html>
<head>
<title>Plantilla de examen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
Paso 1: configuración del guión JavaScript
En nuestro documento distinguiremos tres elementos diferentes: el guión JavaScript, el código HTML de las preguntas y el de las respuestas.
El guión JavaScript, está ubicado entre las etiquetas <head></head>, y en nuestro caso tiene el siguiente aspecto (fíjese sólo en el código de color verde de los comentarios, y rojo de los parámetros que se pueden configurar por el profesor: lo demás es necesario que esté, pero no necesitamos entenderlo para usarlo):
<script type="text/javascript">
<!--
var numPreg = 10; //*** numero de preguntas ***
var numElecciones = 3; //*** numero de alternativas de respuesta ***
var respCorrectas = new Array(numPreg); //*** entre parentesis el numero de preguntas ***
respCorrectas[0] = "Texto de la respuesta correcta a la pregunta número 1";
respCorrectas[1] = "Texto de la respuesta correcta a la pregunta número 2";
respCorrectas[2] = "Texto de la respuesta correcta a la pregunta número 3";
respCorrectas[3] = "Texto de la respuesta correcta a la pregunta número 4";
respCorrectas[4] = "Texto de la respuesta correcta a la pregunta número 5";
respCorrectas[5] = "Texto de la respuesta correcta a la pregunta número 6";
respCorrectas[6] = "Texto de la respuesta correcta a la pregunta número 7";
respCorrectas[7] = "Texto de la respuesta correcta a la pregunta número 8";
respCorrectas[8] = "Texto de la respuesta correcta a la pregunta número 9";
respCorrectas[9] = "Texto de la respuesta correcta a la pregunta número 10";
//*** a partir de aqui no es necesario modificar el codigo ***
function corregir(form) {
var puntuacion = 0;
var eleccActual;
var currSelection;
for (i=0; i<numPreg; i++) {
eleccActual = i*numElecciones;
for (j=0; j<numElecciones; j++) {
currSelection = form.elements[eleccActual + j];
if (currSelection.checked) {
if (currSelection.value == respCorrectas[i]) {
puntuacion++;
break;
}
}
}
}
puntuacion = Math.round(puntuacion/numPreg*100);
form.porcentaje.value = puntuacion + "%";
if (puntuacion > 99) {document.examen.nota.value = "Matrícula de Honor";}
else if (puntuacion > 89) {document.examen.nota.value = "Sobresaliente";}
else if (puntuacion > 79) {document.examen.nota.value = "Notable alto";}
else if (puntuacion > 69) {document.examen.nota.value = "Notable bajo";}
else if (puntuacion > 59) {document.examen.nota.value = "Bien";}
else if (puntuacion > 49) {document.examen.nota.value = "Suficiente";}
else {document.examen.nota.value = "Insuficiente";}
var correctrespCorrectas = "";
for (i=1; i<=numPreg; i++) {
correctrespCorrectas += i + ". " + respCorrectas[i-1] + "\r\n";
}
form.soluciones.value = correctrespCorrectas;
}
// -->
</script>
La configuración de este fragmento de código es muy sencilla porque hay que configurar tres cosas:
- El número de preguntas de que constará nuestro examen, y el número de opciones de respuesta que tendrá cada pregunta. Este número figura al principio, en la siguiente línea de código:
var numPreg = 10; //*** numero de preguntas ***
- El número de alternativas de respuesta para cada una de las preguntas, en la línea siguiente:
var numElecciones = 3; //*** numero de alternativas de respuesta ***
- El texto de todas las alternativas de respuesta correcta, por orden.
respCorrectas[0] = "Texto de la respuesta correcta a la pregunta número 1";
...
...
respCorrectas[9] = "Texto de la respuesta correcta a la pregunta número 10";
Paso 2: configuración del código HTML de las preguntas y respuestas
En este paso dejamos la parte de las etiquetas <head></head>, y nos centramos en la parte del <body></body>. en ella distinguiremos dos partes: la de preguntas y respuestas (que es la que hemos de configurar, en rojo en el siguiente fragmento de código), y la dedicada a mostrarnos los resultados (que no es preciso modificar, en verde en el siguiente framento de código):
<form name="examen">
<div class="numero">1</div>
<div class="pregunta">
<p>Enunciado de la pregunta 1:</p>
<ol>
<li><input type="radio" name="p1" value="Texto de la respuesta correcta a la pregunta número 1" />Texto de la respuesta a la pregunta número 1</li>
<li><input type="radio" name="p1" value="incorrecto" />Enunciado distractor</li>
<li><input type="radio" name="p1" value="incorrecto" />Enunciado distractor</li>
</ol>
</div>
<div class="numero">2</div>
<div class="pregunta">
<p>Enunciado de la pregunta 2:</p>
<ol>
<li><input type="radio" name="p2" value="incorrecto" />Enunciado distractor</li>
<li><input type="radio" name="p2" value="Texto de la respuesta correcta a la pregunta número 2" />Texto de la respuesta correcta a la pregunta número 2</li>
<li><input type="radio" name="p2" value="incorrecto" />Enunciado distractor</li>
</ol>
</div>
...
...
<div class="resultados">
<input type="button" value="Corregir" onClick="corregir(this.form)" />
<input type="reset" value="Borra todo"><br />
Puntuación = <input type=text size=15 name="porcentaje" /><br />
Nota = <input type=text size=15 name="nota" /><br />
Respuestas correctas:<br />
<textarea name="soluciones" wrap="virtual" rows="4" cols="40"></textarea>
</div>
</form>
La estructura de cada pregunta
A continuación explicaremos detenidamente cómo está estructurada cada pregunta, para que el lector sea capaz de configurar sus propias preguntas y respuestas.
En el siguiente fragmento de código hemos puesto de color azul el texto de los enunciados, y de verde las opciones de respuesta.
<div class="numero">1</div>
<div class="pregunta">
<p>Enunciado de la pregunta 1:</p>
<ol>
<li><input type="radio" name="p1" value="Texto de la respuesta correcta a la pregunta número 1" />Texto de la respuesta a la pregunta número 1</li>
<li><input type="radio" name="p1" value="incorrecto" />Enunciado distractor</li>
<li><input type="radio" name="p1" value="incorrecto" />Enunciado distractor<;/li>
</ol>
</div>
Se puede alterar el orden de las tres opciones de respuesta, teniendo en cuenta que el código de la respuesta correcta tiene que tener como valor del atributo value el mismo texto que la alternativa de respuesta correcta exactamente a como aparece en la parte del guión de JavaScript que hemos configurado al principio. Veamos:
<li><input type="radio" name="p1" value="Texto de la respuesta correcta a la pregunta número 1" />Texto de la respuesta a la pregunta número 1</li>
Es importante notar lo que comentábamos: el texto del valor del atributo value (en rojo en el fragmento de código anterior) coincide con el valor de la respuesta correcta que configuramos en la parte del JavaScript (en rojo a continuación):
respCorrectas[0] = "Texto de la respuesta correcta a la pregunta número 1";
Observaciones finales
- Es evidente que la alternativa de respuesta correcta puede estar en cualquier orden dentro de cada pregunta.
- Aunque por defecto hay 10 preguntas en la plantilla, esta se puede modificar para que haya más o menos preguntas, pero hay que recordar que es preciso poner ese número como argumento de la variable numPreg en la parte de JavaScript.
- En el caso de que se modifique el número de preguntas también habrá que añdir o eliminar elementos a la lista con los textos de las alternativas de respuesta correcta en la parte de JavaScript.
- Aunque por defecto hay 3 alternativas de respuesta en la plantilla, esta se puede modificar para que haya más o menos alternativas en cada pregunta, pero hay que recordar que es preciso poner ese número como argumento de la variable numElecciones en la parte de JavaScript.
