ELABORAÇÃO DE MATERIAL DIDÁTICO
VIRTUAL INTERATIVO COM FLASH PARA O ENSINO DE MATEMÁTICA NA EDUCAÇÃO BÁSICA
Tânia
Michel Pereira
1 Introdução
Esta apostila
descreve um exemplo de uso do flash na construção de um objeto educacional
destinado ao ensino de Frações. Você pode ver o objeto funcionando ao clicar aqui.
Figura 1 – Objeto para o ensino de
frações
O objeto serve para
reforçar o conceito de fração ordinária e neste curso serve como exemplo de
material com peças que podem ser movimentadas com mouse. Com a técnica de
construção apresentada neste exemplo é possível reproduzir, na forma virtual,
qualquer material concreto construído em cartolina na forma de figuras planas,
ou seja, onde a espessura não é considerada. Por exemplo: dominós, pentaminós,
quebra-cabeças, unidades para medidas de área ou perímetros, base dez ou outras
bases, Tangran, blocos lógicos, trilhas, entre outros.
A seguir será
apresentado um exemplo de roteiro para ser seguido para a implementação do
objeto. Normalmente quem faz o roteiro não é a mesma pessoa que implementa o
material com um ou mais programas. Este trabalho pode ser feito,
preferencialmente por uma equipe, onde um dos componentes é um professor que
trabalha com o conteúdo envolvido, outro é professor da área de matemática, por
se tratar de material que trata de conceitos desta área. Os demais podem ser de
outras áreas, por exemplo: pedagogia ou psicologia.
2 Roteiro do objeto
Formando Inteiros com Frações
A tela do objeto deverá aparecer
inicialmente de seguinte forma:
Figura 2 – Tela do objeto Formando
Inteiros com Frações
O objeto iniciará apresentando barras
com valores fracionários onde cada cor indicará uma fração com denominador
distinto conforme a figura 1.
Todas as figuras em forma de tiras
identificadas com uma fração devem ser construídas de modo que possam ser
movimentadas ou arrastadas quando estas forem pressionadas pelo mouse. Ao soltar o mouse, estas devem ficar imóveis.
A ordem de construção dever ser
conforme citada abaixo:
1) A peça de cor verde com 600 px de
largura e 20 px de altura. Deve estar identificada com “1 um inteiro”.
Deve ter a propriedade de ser “móvel”, como todas as outras e ficar em
um nível abaixo de todas as outras tiras que representam as demais
frações. Devem ter 6 figuras idênticas a
esta sobrepostas, todas com as mesma características.
2) As peças de cor marrom devem ser identificadas
com o texto “1/2 um meio” com 300 px de largura e 20 px de altura. São necessárias
4 figuras idênticas sobrepostas. E devem ficar um nível acima das tiras de um
inteiro.
3) As peças de cor azul devem ser identificadas
com o texto “1/3 um terço” com 200 px de largura e 20 px de altura. São necessárias
6 figuras idênticas sobrepostas. E devem ficar um nível acima das tiras de 1/2.
4) As peças de cor cinza devem ser
identificadas com o texto “1/4 um quarto” com 150 px de largura e 20 px de
altura. São necessárias 8 figuras idênticas sobrepostas. E devem ficar um nível
acima das tiras de 1/3.
5) As peças de cor roxo devem ser
identificadas com o texto “1/5 um quinto” com 120 px de largura e 20 px de
altura. São necessárias 10 figuras idênticas sobrepostas. E devem ficar um
nível acima das tiras de 1/4.
6) A peça de cor vermelha devem ser
identificadas com o texto “1/6 um sexto” com 100 px de largura e 20 px de
altura. São necessárias 12 figuras idênticas sobrepostas. E devem ficar um
nível acima das tiras de 1/5.
Após a apresentação das barras serão
apresentadas perguntas onde o aluno deverá responder corretamente dentro do
retângulo que estará posicionado no lado direito da tela no final de cada pergunta.
As perguntas que serão elaboradas são
as seguintes:
1) Quantas tiras de 1/2 preciso para
formar uma tira de 1 inteiro?
2) Quantas tiras de 1/3 preciso para
formar uma tira de 1 inteiro?
3) Quantas tiras de 1/4 preciso para
formar uma tira de 1 inteiro?
4) Quantas tiras de 1/5 preciso para
formar uma tira de 1 inteiro?
5) Quantas tiras de 1/6 preciso para
formar uma tira de 1 inteiro?
No final de cada questão deverá
aparecer um retângulo que servirá para que o aluno coloque a resposta do que
está sendo pedido.
As respostas corretas das questões
são:
Questão 1 resposta = 2;
Questão 2 resposta = 3;
Questão 3 resposta = 4;
Questão 4 resposta = 5;
Questão 5 resposta = 6.
No lado direito dos retângulos onde o
aluno deve digitar as respostas deverá aparecer a palavra “Certo” caso ele
acertar se não deverá aparecer a palavra “Errado”.
Sempre que o aluno clicar em
“Verificar resultado” deverá aparecer abaixo de todas as questões, no lado
esquerdo do referido botão, um texto com uma das seguintes mensagens:
1-Caso o aluno não tenha preenchido
todas as questões:
“Você não respondeu todas as
perguntas! Responda todas.”
Figura 3 – Feedback para questões sem
preencher
2- Caso o aluno acerte todas as
questões aparecerá:
“Parabéns você acertou todas. Continue
assim!”
Figura 4 – Feedback para acerto de
todas as questões
3 - Caso o aluno responda alguma
questão errada deverá aparecer a mensagem
“Reveja suas respostas e corrija as erradas”
Figura 5 – Feedback para erro de
questões
3 Instruções
para a implementação do roteiro do
objeto com Flash
A seqüência de passos é uma das formas
de implementar este objeto. Optamos por
algumas etapas que poderiam ser realizadas de forma mais rápida, com códigos mais
potentes para aproveitar a oportunidade utilizar recursos ainda não utilizados
e que são muito úteis. A seguir serão apresentados passos que podem ser
seguidos para a implementação do roteiro apresentado no item anterior.
Passo
1
Abrindo o programa aparecerá uma tela
similar à figura 6 abaixo. Clique
Figura 6 – Abrindo o programa
Passo
2
Na tela que abre,
insira mais 5 camadas para que uma tira menor nunca fique em uma camada abaixo
de uma maior que esta. Veja a figura 7.
Figura 7 – Inserindo camadas (layers)
Passo 3
Clique na primeira camada do
primeiro quadro e desenhe, no palco, um retângulo. Utilize a ferramenta
retângulo (Retangle Tools) com 600px de largura e 20 de altura na posição x=0 e
y=0. Veja figura 8.
Figura 8 - Desenhando um retângulo
Passo
4
Insira uma caixa de textos sobre a
figura do retângulo e digite o texto que aparece na figura 9.
Figura 9 – Inserindo caixa de
textos
Passo
5
Ative o botão
Selecionar e selecione o retângulo juntamente com o texto.
Passo
6
Estando com o retângulo e o texto
selecionados, abra o Modify->Convert to Symbol ou acione a tecla F8.
Selecione a primeira opção na janelinha que abriu e coloque o nome para o
Clip(Movie clip).
Figura 9 – Criando um movie clip
Passo
7
Selecione o Clip um_inteiro e coloque
o seguinte código no editor Action do Clip e não do frame.
// Ao pressionar sobre o clip para o
qual estamos escrevendo este código, este fica móvel
on(press){ this.startDrag(); }
// Ao soltar este clip este deixa de
ser móvel
on(release) { this.stopDrag(); }
Veja como deve ficar o título do
editor do Actions na figura 11.
Figura 10 – Editor de actions
Passo
8
Salve o arquivo com o nome de
exemplo_3.fla. Mantenha pressionada a
tecla CTRL e acione Enter para verificar se você consegue mover a peça de um
inteiro. Se não funcionar, então você
deve ter colado o código no editor Actions do Frame principal e não no editor
Actions do Clip.
Passo
9
Se o clip da
tira que representa um inteiro estiver funcionando para ser arrastado quando o programa
está sendo executado, então faça uma cópia deste e cole 6 vezes de forma
especial, para que seja colado no mesmo
local de onde foi copiado. Desta forma os outros inteiros que foram
colados ficarão sobrepostos a este e continuam com as propriedades daquele Clip
que foram copiados. Veja figura 12.
Figura 11 – Fazendo cópia de clips
Passo
10
Siga os mesmos passos desde o passo 3
até o passo 9 para colocar as demais frações. Veja as dimensões que constam no
Roteiro descrito no item 2, ou seja:
Todos devem
ter altura 20 px;
As larguras
são: 300 para 1/2; 200 para 1/3; 150 para 1/4; 120 para 1/5 e 100 para 1/6.
Tenha o
cuidado para colocar cada fração numa camada acima da anterior. Conforme
seqüência das figuras de
Figura 12 – Dimensões das tiras
Figura 13
Figura 14
Figura 15
Figura 16
Observação:
Para fazer objetos de aprendizagem somente com peças similares aos encontrados
num laboratório de matemática convencional, sem colocar questões para os alunos
responderem, o processo de construção termina aqui e o objeto está pronto.
Para que apareçam questões para que o
aluno responda e cumpra o restante do roteiro apresentado no item 2, temos que
seguir em frente e utilizar muita lógica
de programação.
Passo
11
Vamos inserir três tipos de texto. Tipo
Static Text para colocar as questões, à direta de onde vai um texto do tipo
Imput Text, local onde o aluno irá digitar a resposta e por último a caixa de
texto do tipo Dynamic Text onde deve aparecer a palavra Certo ou a palavra
Errado.
Faça esta formatação, com todo cuidado
para a primeira questão, e para as demais, você pode copiar a primeira, colar
no palco e adaptar o texto, o nome da variável de entrada e o nome da variável
da saída.
Veja a seqüência de figuras de
Figura 17
Figura 19
Figura 18
Figura 19
Figura 20
Figura 21
Figura 22
Figura 23
Figura 24
Figura 25
Figura 26
Figura 29
Figura 27
Figura 28
Passo
12
Insira mais uma caixa de textos para
que apareça ali uma mensagem quando o aluno clicar sobre o botão Verificar
resposta. Este texto é do tipo Dynamic
Text, deve ser de múltiplas linhas e o nome da variável que recebe o valor é mensagem.
Figura 29 – Inserindo caixa de textos
Passo 13
Vamos inserir uma figura para
“fabricar” um botão e colocar um texto estático sobre este. Este será utilizado
pelo usuário clique nele quando terminou de colocar os dados.
Utilize a ferramenta para construir um retângulo
e formar o fundo do botão. Selecione a figura que servirá de fundo para o botão.
Passo 14
Com o
botão selecionado, vá ao menu superior principal e abra o Modify->Convert to
Symbol ou acione a tecla
F8 para fazer a transformação
desta figura
Figura 30
Figura 31
Figura 32
Clique sobre o botão recém criado para configurar a
parte interna deste.
Para que fiquem visíveis as duas camadas(Layer) clique
no local indicado, conforme aparece nas figuras 36 e 37.
Figura 33
Insira
a caixa de texto do tipo static na camada inserida
Figura 34
Insira mais 3 Keyframes na camada 1 dentro do botão. Você pode fazer
isto seguindo os passos da Figura 38.
Figura 38
Figura 39
Passo 15
Seja qual for a forma do botão, vamos selecioná-lo
e dar um nome no local indicado na figura 40.
Figura 35
O que foi feito no passo 15, serve para podermos
fazer referência ao botão em códigos escritos diretamente num frame principal
do palco.
Passo 16
Vamos selecionar o primeiro frame na primeira
camada, local onde foram colocadas as tiras de um inteiro, os textos e o botão.
Veja figura 41.
Figura 41
Código para ser copiado e colado no
primeiro frame e primeira camada.
//Inicializando com vazio,os campos das respontas
do aluno.
resposta1_aluno=resposta2_aluno=resposta3_aluno=resposta4_aluno=resposta5_aluno="";
// definindo e atrubuindo os valores corretos de
cada questão.
var resposta1_correta=2;
var resposta2_correta=3;
var resposta3_correta=4;
var resposta4_correta=5;
var resposta5_correta=6;
// variáveis auxiliares para definir o texto do
campo mensagem que se encontra na parte inferior da tela
var c1,c2,c3,c4,c5;
//inicialmente c1, c2, c3, c4 e c5 devem estar zeradas pois não há respostas.
Mais adiante Se a questão 1 estiver correta, c1 deve valer 1 senão vale 0
c1=c2=c3=c4=c5="";
// variáveis auxiliares para definir o texto do
campo mensagem que se encontra na parte inferior da tela cb1 conta 1 se o aluno não deixou esta
questão em branco; senão cb1 vale zero.
var cb1,cb2,cb3,cb4,cb5;
cb1=cb2=cb2=cb4=cb5=1; // inicialmente
estarão em branco
(Não está em branco)
(//inicialmente c1, c2, c3, c4 e c5 devem estar zeradas pois não há respostas.
Mais adiante Se a questão 1 estiver correta, c1 deve valer 1 senão vale 0
c1=c2=c3=c4=c5="";) -> (isso
está escrito lá em cima)
/*
Comentário em bloco: Segue o código referente ao
botão, mas escrito para ser colado no frame principal verificar que deve ter
sido definido nas propriedades que aparecem abaixo do tipo de símbolo, que
ficam visíveis quando o botão é selecionado e as propriedades mostradas.
*/
verificar.onPress=function(){ //Início da definição
da função do botão "verificar" para o evento Press ou seja, quando o
botão é pressionado.
//se a
resposta do aluno é igual resposta1_correta
if(isNaN(resposta1_aluno)==true) {
verifica1=""; cb1=1; }
// Se for verdadeiro que
resposta1_aluno Não é Número
então A caixa de texto dinâmica Verifica
1 ficará vazia.
else{ // início do else(senão)
caso o aluno tenha colocado algum número
no local da resposta.... temos duas opções ou
ele acertu ou errou.
cb1=0;
if(resposta1_aluno == resposta1_correta){ // Início
se o aluno acertou
verifica1="Certo!"; //
conteúdo campo destinado ao texto de nome "verifica1" à direita do
campo do tipo "ImputTex" de
nome resposta1_aluno
c1=1 //Contador de resposta
correta da questão 1
}
else{
verifica1="Errado!";
//conteúdo campo destinado ao texto de nome "verifica1" à
direita do campo do tipo "ImputTex"
de nome resposta1_aluno
c1=0 //Contador de resposta errada da questão 1
}
}//
fim else quando o aluno tenha digitado algum número
// Analisando
as demais questões
if(isNaN(resposta2_aluno)==true) {
verifica2=""; cb2=1;
}
else{//início de ***
cb2=0;
if(resposta2_aluno == resposta2_correta){
verifica2="Certo!"; c2=1;
}
else{
verifica2="Errado!";
c2=0;
}
} //fim
de ***
if(isNaN(resposta3_aluno)==true) {
verifica3=""; cb3=1;
}
else{//início
de ***
cb3=0;
if(resposta3_aluno == resposta3_correta){
verifica3="Certo!"; c3=1;
}
else{
verifica3="Errado!";
c3=0;
}
} //fim
de ***
if(isNaN(resposta4_aluno)==true)
{ verifica4=""; cb4=1;
}
else{//início de ***
cb4=0;
if(resposta4_aluno == resposta4_correta){
verifica4="Certo!"; c4=1;
}
else{
verifica4="Errado!";
c4=0;
}
} //fim
de ***
if(isNaN(resposta5_aluno)==true)
{ verifica5=""; cb5=1;
}
else{//início de ***
cb5=0;
if(resposta5_aluno == resposta5_correta){
verifica5="Certo!"; c5=1;
}
else{
verifica5="Errado!";
c5=0;
}
} //fim
de ***
var texto1="Você não respondeu todas as
perguntas";
var texto2="Parabéns você acertou todas.
Continue assim!"
var texto3="Reveja suas respostas e corrija as
erradas.";
if
(cb1+cb2+cb3+cb4+cb5>0 ) { //caso alguma estiver em branco, a soma será maior que zero. (Ficaria melhor: “caso alguma não estiver em branco, a
soma será maior que zero.”)
mensagem=texto1;
}
else {
if(c1+c2+c3+c4+c5==5){ //caso
alguma estiver errada, a soma será menor que 5.
mensagem= texto2;
}
else{
// caso todas estiverem respondidas e não tenha nenhuma errada .
mensagem= texto3;
}
}
} // fim da função verificar.onPress=function()
Salve e verifique se o programa está
funcionando. Caso não esteja funcionando, confira os passos anteriores para
encontrar o problema. Depois de tentar várias vezes sem sucesso, envie a dúvida
e o arquivo para o fórum ou para o e-mail tmichel@gmail.com
Tarefas
para entregar nos próximos 15 dias
1-Siga
todos os passos apresentado para reproduzir o objeto descrito nesta apostila
utilizando a sua criatividade com relação às cores e/ou textos apresentados na
tela e apresente o programa fonte (.fla) e o arquivo de formato .swf
correspondente. Utilize o manual do flash para saber detalhes sobre cada
comando que aparece no código do objeto “Formando inteiros com Frações”, aqui descrito.
2- Crie mais um ou dois objetos similares a este e apresente-os da seguinte
forma.
a) Documento doc com uma seqüência de
passos similar a esta apostila apresentando todos os itens a partir da
introdução;
b) arquivo fonte ( .fla);
c) arquivo no formato swf.
Obs. Você pode elaborar um ou dois
objetos cujos passos terminarão ao chegar ao passo 11 deste documento
apresentado aqui
Bom trabalho e muita persistência.