Ejemplo de página interactiva para el aprendizaje por internet.
Hay que admitir que este artículo aborda un tema muy interesante, el aprendizaje activo y el uso de la tecnología para conseguirlo. Sin embargo, las prácticas de programación que se han realizado no son muy adecuadas en el día de hoy, por lo que hemos sacado este artículo del taller de Javascript y lo ponemos en prácticas obsoletas.
Aunque el ordenador no es la panacea de la futura enseñanza, nadie pone en duda que es un medio didáctico muy potente que puede cambiar la forma de enseñar de los profesores y el modo de aprender de los alumnos.
Cuando el chico se enfrenta con el ordenador y con un software educativo o con Internet, el protagonista ya no es el profesor sino el propio alumno, quien lee, comprende y aprende por sí mismo.
El profesor Jesús A. Beltrán Lera distingue la pedagogía de la reproducción o pasiva de la pedagogía de la imaginación o activa e innovadora.
También las páginas web se pueden dividir en dos clases: las que presentan textos y dibujos que se pueden copiar e imprimir (pero son pasivas y estáticas) y las páginas interactivas (con un diálogo entre el ordenador y el niño). En el mundo de la enseñanza es muy aconsejable que los ejecicios sean del segundo tipo.
Un modelo interactivo puede ser éste: La pantalla le presenta una "Ayuda" con el contenido que el chico necesita para hacer bien los ejercicios; después el ordenador le plantea una pregunta con varias alternativas de respuesta y el alumno contesta a una de ellas; si la respuesta es acertada el ordenador le premia cambiando el color de la respuesta de negro a rojo y si es falsa le informa de su error con una alerta dándole la información correcta. La interactividad permite la corrección instantánea de la contestación del alumno, lo que supone un factor motivador.
Al terminar todas las preguntas, el alumno accede a un botón de Puntuación que al pulsarlo nos da tres informaciones: el número de aciertos, el número de errores y una calificación con uno de estos tres comentarios de evaluación: Muy bien. Magnífico, si no ha cometido errores; Bien, pero puedes mejorar, si la puntuación (de 0 a 10) es de 7 o superior; y Debes repetir el ejercicio, si la puntuación es inferior a 7 puntos. Esta interactividad produce una realimentación positiva que incrementa la motivación del chico y estimula la actividad escolar.
Con html y javascript se pueden preparar ejercicios como los comentados anteriormente y sobre distintos temas como ortografía, lectura comprensiva, poesías, adivinanzas y cálculo.
Veamos dos ejemplos de ortografía, uno con la ayuda en "alert" y el otro utilizando el "popup".
En el primer ejemplo pondremos dentro de la cabecera de la página (entre el <head> y </head>) un script con las funciones que controlan los aciertos, errores y puntuaciones:
<script LANGUAGE="JavaScript">
var sumafa=0
var sumaaci=0
var res=0
var nota=0
function resbien(sumafa2)
{
sumaaci=sumaaci+1;
return true
}
function resmal(sumafa2)
{
sumafa=sumafa+1;
return true
}
function averiguarNota(nota2){
res=sumaaci+sumafa
res=res/10
nota=sumaaci/res
if (res <=0)
{
alert("Puedes empezar este ejercicio. ¡Suerte!")
}
else
if (nota >=10)
{
alert("Has tenido "+sumaaci+" aciertos y "+sumafa+" errores. Muy Bien. Magnífico")
}
else
if (nota >7)
{
alert("Has tenido "+sumaaci+" aciertos y "+sumafa+" errores. Bien, pero puedes mejorar.")
}
else
{
alert("Has tenido "+sumaaci+" aciertos y "+sumafa+" errores. Debes repetir el ejercicio.")
}
sumaaci=0
sumafa=0 }
</script>
Después pondremos el formulario en el cuerpo de la página. Contiene el ejercicio prpiamente dicho y los botones de "Ayuda", "Puntuación" y "Borrar contestaciones":
<h1 align="center"><input Type="Button" Value="Ayuda" onclick="alert('abrir, advertir, afirmativo, amable, cueva, \n \nsubir, obstruir, atrever, avión, bandido.')"></h1>
<form NAME="bv">
<div align="center"><center><table border="8" width="346" cellspacing="1" cellpadding="1">
<tr>
<td width="182" bgcolor="#FFFFFF"><div align="center"><center><p><small><font face="Verdana" color="#FF0000"><b>a_rir</b></font></small></td>
<td width="152" align="center" bgcolor="#FFFFFF"><b><div align="center"><center><p>
<input Type="Button" Value=" b " onclick="resbien(); this.style.color='red'">
<input Type="Button" Value=" v " onclick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, \n \nsubir, obstruir, atrever, avión, bandido.')">
<input Type="Button" Value=" w " onclick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, \n \nsubir, obstruir, atrever, avión, bandido.')">
</b></td>
</tr>
<tr align="center">
<td width="182" bgcolor="#FFFFFF"><div align="center"><center><p><small><font
face="Verdana" color="#FF0000"><b>ad_ertir</b></font></small></td>
<b><td width="152" align="center" bgcolor="#FFFFFF"><b><input Type="Button" Value=" b "
onclick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, \n \nsubir, obstruir, atrever, avión, bandido. ')">
<input Type="Button" Value=" v " onClick="resbien(); this.style.color='red'"> <input
Type="Button" Value=" w "
onClick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, \n \nsubir, obstruir, atrever, avión, bandido.')">
</b></b></td>
</tr>
<tr align="center">
<td width="182" bgcolor="#FFFFFF"><div align="center"><center><p><small><font
face="Verdana" color="#FF0000"><b>afirmati_o</b></font></small></td>
<b><td width="152" align="center" bgcolor="#FFFFFF"><b><input Type="Button" Value=" b "
onclick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, \n \nsubir, obstruir, atrever, avión, bandido. ')">
<input Type="Button" Value=" v " onClick="resbien(); this.style.color='red'"> <input
Type="Button" Value=" w "
onClick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, \n \nsubir, obstruir, atrever, avión, bandido.')">
</b></b></td>
</tr>
</table>
</center></div><div align="center"><center><p><strong>
<input Type="Button" value="Puntuación" onclick="averiguarNota()">
<input TYPE="SUBMIT" VALUE="Borrar contestaciones" onblur="this.style.color='black'"> </p>
</center></div></form></strong>
Podemos ver el ejemplo primero en funcionamiento en una hoja aparte.
El segundo ejemplo que se propone tiene el mismo script de puntuaciones, un script con la función del popup y el código de ortografía de G y J. El código del script del popup es:
<script LANGUAGE="JavaScript">
cnt = 0;
var wnd;
function popup(pagina)
{
cnt++;
if( wnd != null )
{
wnd.close();
wnd = null;
}
wnd = open(pagina, "gl"+cnt, "width=650, left=70, top=128, height=270");
}
</script>
Y el código del cuerpo de la página:
<p align="center"><input TYPE="BUTTON" NAME="Ayuda" VALUE="AYUDA" onClick="popup('frayu05.htm');" <p> </p>
<form NAME="bv" onsubmit>
<div align="center"><center>
<table border="8" width="100%" cellspacing="1" cellpadding="1">
<tr>
<td width="75%" bgcolor="#FFFFFF"><div align="center"><center><p><small><b><font face="Verdana">Avísame cuando <font color="#FF0000">despe_e </font>el avión</font></b></small></td>
<td width="25%" align="center" bgcolor="#FFFFFF"><input Type="Button" Value=" g " onClick="resmal(); alert('El sonido G suave con A, O, U, se escribe GA, GO, GU y con E, I, se escribe GUE, GUI. \n \nEjemplos: goma, galleta, guapa, Miguel, guitarra, gorro, guerra.')">
<input Type="Button" Value=" gu " onClick="resbien(); this.style.color='red'"> </td></tr>
<tr align="center">
<td width="75%" bgcolor="#FFFFFF"><div align="center"><center><p><small><b><font
face="Verdana">Tu mamá es muy <font color="#FF0000">ele_ante</font></font></b></small></td>
<td width="25%" align="center" bgcolor="#FFFFFF"><input Type="Button" Value=" g "
onClick="resbien(); this.style.color='red'"> <input Type="Button" Value=" gu "
onClick="resmal(); alert('El sonido G suave con A, O, U, se escribe GA, GO, GU y con E, I, se escribe GUE, GUI. \n \nEjemplos: goma, galleta, guapa, Miguel, guitarra, gorro, guerra.')">
</td></tr>
<tr align="center">
<td width="75%" bgcolor="#FFFFFF"><div align="center"><center><p><small><b><font
face="Verdana">Los Reyes Magos me <font color="#FF0000">tra_eron </font>una
bicicleta</font></b></small></td>
<td width="25%" align="center" bgcolor="#FFFFFF"><input Type="Button" Value=" g "
onClick="resmal(); alert('Llevan J las formas de los verbos que no tienen G ni J en el infinitivo. \n \nEjemplos: de decir, dijeron; de traer, trajimos, trajeron.')">
<input Type="Button" Value=" j " onClick="resbien(); this.style.color='red'"> </td></tr>
</table></center></div>
<div align="center"><center><p><strong>
<input Type="Button" value="Puntuación" onClick="averiguarNota()">
<input TYPE="SUBMIT" VALUE="Borrar contestaciones" onblur="this.style.color='black'"> </p>
</center></div></form></strong>
Arturo Ramo García