CriarWeb.com > Manuais > Workshop de Javascript

Apesar do computador não ser o remédio do futuro ensino, ninguém põe em dúvida que é um meio didático muito potente que pode mudar a forma de ensinar dos professores e o modo de aprender dos alunos.

Quando o aluno se depara com o computador e com um software educativo ou com a própria Internet, o protagonista já não é o professor, e sim o próprio aluno, quem lê, compreende e aprende por si mesmo.

O professor Jesús A. Beltrán Lera distingue a pedagogia da reprodução passiva e a pedagogia da imaginação ativa e inovadora.

As páginas web também podem ser divididas em duas classes: as que apresentam textos e desenhos que se podem copiar e imprimir (porém são passivas e estáticas) e as páginas interativas (com um diálogo entre o computador e o aluno). No mundo do ensino é muito aconselhável que os exercícios sejam do segundo tipo.

Um modelo interativo pode ser este: A tela lhe apresenta uma "Ajuda" com o conteúdo que o aluno necessita para fazer bem os exercícios; depois o computador lhe apresenta uma pergunta com várias alternativas de resposta e o aluno responde a uma delas; se a resposta for certa o computador lhe pontua mudando a cor da resposta de preto a vermelho e se for falsa lhe informa de seu erro com um alerta dando a informação correta. A interatividade permite a correção instantânea da resposta do aluno, o que supõe um fator motivador.

Ao terminar todas as perguntas, o aluno acessa a um botão de "Pontuação" que ao clicá-lo nos dá três informações: o número de acertos, o número de erros e uma qualificação a partir destes três comentários de avaliação: "Muito bem. Magnífico", se não cometeu erros; "Bem, porém pode melhorar", se a pontuação (de 0 a 10) for de 7 ou superior; e "Deve repetir o exercício", se a pontuação for inferior a 7 pontos. Esta interatividade produz uma realimentação positiva que incrementa a motivação do aluno e estimula a atividade escolar.

Com HTML e Javascript pode-se preparar exercícios como os comentados anteriormente e sobre distintos temas como ortografia, leitura compreensiva, poesias, adivinhação e cálculo.

Vejamos dois exemplos de ortografia em espanhol, um com a ajuda em "alert" e o outro utilizando o "popup".

No primeiro exemplo, colocaremos dentro do cabeçalho da página (entre o e ) um script com as funções que controlam os acertos, erros e pontuações:

<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>

Depois colocaremos o formulário no corpo da página. Contém o exercício propriamente dito e os botões de "Ajuda", "Pontuação" e "Apagar contestações":

<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 o exemplo primeiro em funcionamento em uma página à parte.

O segundo exemplo que se propõe tem o mesmo script de pontuações, um script com a função do popup e o código de ortografia de G e J. O código do script do popup é:

<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>

E o código do corpo da 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>

O segundo exemplo pode ser visto em uma página à parte.