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:
Pero antes de empezar, recordamos brevemente la estructura general de cualquier 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 utilzamos 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>
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:
var numPreg = 10; //*** numero de preguntas ***
var numElecciones = 3; //*** numero de alternativas de respuesta ***
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";
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>
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";
numPreg en la parte de JavaScript.numElecciones en la parte de JavaScript.