Manual Gerador de Aulas

Esta ferramenta permite a criação de páginas com o mesmo dinamismo e interatividade das
páginas das aulas web, além de possibilitar ao professor a utilização de vídeos, imagens,
textos, áudio, jogos, exercícios para personalizar sua aula.

1. Tela Principal

A tela principal do Gerador de Aulas possui as seguintes funcionalidades:

Figura 1. Tela principal do Gerador de Aulas.

1 – Limpar Página:
Remover todos os componentes do palco.
Sua tecla de atalho é SHIFT+N.
2 - Salvar Página:
Salvar a página atual. É possível editar o nome e a descrição da página.
Sua tecla de atalho é SHIFT+S.

3 – Salvar todos:

1
 Salvar todas as páginas da aula.
Sua tecla de atalho é SHIFT+T.

4 – Salvar Como:
Salva uma cópia da página atual com um nome diferente mantendo a página
com o nome anterior. É possível editar o nome e a descrição da página.
Sua tecla de atalho é SHIFT+M.

5 – Excluir
Excluir um componente selecionado do palco.
Sua tecla de atalho é SHIFT+DEL.

6 – Ir para frente
Avançar a profundidade do componente selecionado no palco permitindo sua
visualização sobrepondo os demais.
Sua tecla de atalho é SHIFT++.

7 – Ir para trás
Retroceder a profundidade do componente selecionado no palco.
Sua tecla de atalho é SHIFT+-.

8 – Hiperlink
Inserir um hiperlink no componente selecionado.
Durante a visualização da página, quando o usuário clicar no componente, é
aberto uma página web com o hiperlink cadastrado.
Sua tecla de atalho é SHIFT+K.

9 – Alterar Plano de Fundo

Alterar o plano de fundo do palco. É possível a seleção de uma imagem ou
uma cor como plano de fundo. Mais informações sobre a escolha do plano de fundo
pode ser encontrada na seção 3.
Sua tecla de atalho é SHIFT+J.

10 – Visualizar
Visualização da página em execução (na visão do aluno). Mais informações na
seção 4.
Sua tecla de atalho é SHIFT+R.

11 – Nome da Aula
Nome da aula atual.

12 – Aba da Página
Exibir a página referente à aba selecionada.

13 – Fechar Página

2
 Fechar a página selecionada do gerador de aulas. (Não exclui a página da
aula).

14 – Adicionar Nova Página

Adicionar uma nova página à aula.

15 – Palco Principal
Palco onde serão inseridos os componentes que formarão a página.

16 – Componentes de Texto
O Menu de componentes de texto é composto pelos componentes: Equação,
Olho Mágico, Tabela, Caixa de Texto e Hint.
Mais informações sobre esses componentes na seção 5.

17 – Componentes de Multimídia
O Menu de componentes de multimídias é composto pelos componentes:
Vídeo, Vídeo com Marcação, Animação, Imagem e Áudio.
Mais informações sobre esses componentes na seção 6.

18 – Componentes de Exercícios
O Menu de componentes de Exercícios é composto pelos componentes:
Redação e Lista de Exercícios.
Mais informações sobre esses componentes na seção 7.

19 – Componentes de Jogos
O Menu de componentes de Jogos é composto pelos componentes: Jogo das
Preposições, Jogo da Memória, Jogo do Tabuleiro, Robotix, Verdadeiro ou Falso,
Caça-Palavras, Palavras-Cruzadas, Jogo da Escada, Jogo do Corredor, Quebra Cabeça,
Palavra Secreta e Lucrecia Juvenal Ares.
Mais informações sobre esses componentes na seção 8.

20 – Componentes de Interação
O Menu de componentes de Interação é composto pelos componentes:
Desenho Livre, Criar Animação e Criar Menu.
Mais informações sobre esses componentes na seção 9.

2. Funcionalidades dos Componentes

O usuário pode selecionar um componente do palco clicando no mesmo. Ao selecionar um

componente, o usuário pode:
● Arrastar o componente por toda área do palco.
● Redimensionar o componente.

3
 ○ O usuário deve clicar em um dos pontos laterais do componente e arrastar
para o tamanho desejado desde que esteja dentro do palco.

Figura 2. Redimensionando um componente.

● Girar Componente
○ O usuário deve clicar no circulo da lateral direita do componente e girar para
o ângulo desejado desde que suas dimensões estejam dentro do palco.
○ Alguns componentes não permitem a sua rotação.

Figura 3. Girando um componente.

● Abrir Janela de Propriedades

○ Cada componente possui sua janela de propriedades para a edição do seu
conteúdo.
○ A janela de propriedades é aberta assim que o componente é criado, mas
também pode ser aberta com o duplo clique no componente selecionado ou
com o botão esquerdo do mouse.

4
 ○ A janela de propriedades pode ser fechada ao clicar no palco ou ao clicar no
botão fechar da janela no seu canto superior direito.

Figura 4. Abrindo Janela de Propriedades do componente.

3. Janela Selecionar Multimídia

Os componentes que contem elementos multimídia como imagem, animação, vídeo e áudio
possuem uma janela de propriedades especial.
Nessa janela, é possível selecionar uma multimídia do banco de multimídias do
gerador de acordo com o tipo do componente.
A figura 5 apresenta a janela de multimídia. O usuário pode buscar o elemento pelo
seu nome ou sua categoria (Física, Química, Português, etc.) utilizando os filtros 1 e 2. A aba
“Minhas Imagens” (item 4) indica as multimídias que o usuário cadastrou e a aba
“Midiateca” (item 5) apresenta as multimídias pré-cadastradas na midiateca do gerador. Só
é possível alterar ou excluir um elemento da aba “Minhas Imagens”.
Para as multimídias do tipo áudio e vídeo existe a opção “Preview” a qual é aberto
uma janela contendo um player possibilitando a pré-visualização da multimídia selecionada.
O usuário também pode cadastrar novas multimídias. Para isso ele deve selecionar o
botão “Upload” representado pelo item 3.

5
 Figura 5. Janela para selecionar uma Multimídia.

Em seguida, o usuário deve selecionar um arquivo (botão “Procurar”). Uma pré-

visualização da multimídia selecionada pelo usuário será exibido no item 3 da figura 6. Para
cadastrar, o usuário deverá criar um nome e uma categoria para o arquivo (caixa de texto 2
da figura 6) e clicar em no botão “Enviar”.

6
 Figura 6. Janela para fazer o upload de uma Multimídia.

4. Visualização da Página

O usuário pode, a qualquer momento da edição da página, visualizar como os componentes

se comportam e como será a interação entre o aluno e página que está sendo construida. As
figuras 7 e 8 apresentam um exemplo do palco de uma página e como será sua visualização.

7
 Figura 7. Palco.

Figura 8. Visualização da Página.

8
 5. Componentes de Texto

Figura 9. Menu dos Componentes de Texto.

5.1. Equação

O componente de equação é utilizado para gerar equações e formulas matemáticas. O

usuário tem a opção de utilizar um dos símbolos ou formulas pré-cadastradas ou escrever
suas próprias equações na caixa de texto. O usuário deve clicar no botão “Gerar” para que a
equação apareça no palco.

A componente Equação não sofre alterações na visualização, se comporta da mesma forma

vista no palco durante a edição.

Figura 10. Editando o componente Equação no palco.

O componente Equação não sofre alterações e na visualização é se comporta da

mesma forma que o componente visto no palco durante a edição.

9
 Figura 11. Componente Equação visto durante a visualização.

5.2. Olho Mágico

O olho mágico é composto por um botão animado e um espaço onde o usuário pode inserir
uma imagem ou um texto. Ao clicar nesse botão (olho), o conteúdo inserido pode ser exibido
ou escondido.
Inicialmente o usuário deve escolher o tipo de conteúdo do componente (imagem ou
texto).
Caso escolha texto, o usuário pode editar o texto, escolhendo fonte, cor,
alinhamento, tamanho, hiperlink, etc. Para poder iniciar a edição do texto o usuário deve dar
um duplo clique na caixa de texto do olho mágico.
Caso escolha imagem, o usuário deverá selecionar uma imagem da midiateca (seção
3) e em seguida pode ajustar a imagem no espaço reservado a ela (centralizada, estendida,
ajustada).
Em seguida, o usuário deve escolher o estado inicial do olho:
○ Aberto - Conteúdo inicialmente visível
○ Fechado - Conteúdo inicialmente invisível
O usuário pode também escolher a cor da borda do componente e a posição que o
olho aparecerá em relação ao conteúdo (acima, abaixo, na esquerda ou direita).

10
 Figura 12. Editando o componente Olho Mágico no Palco.

Na visualização, o componente Olho Mágico deve aparecer aberto ou fechado de

acordo com a opção escolhida no modo de edição. Ao clicar no olho ele deve abrir ou fechar
as informações. Os textos não podem ser editados no modo de visualização. A figura 12
apresenta o olho mágico na visualização. Inicialmente ele está fechado e após o clique no
olho ele é aberto.

Figura 13. Componente Olho Mágico visto na janela de Visualização.

5.3. Tabela

11
 Figura 14. Editando o componente Tabela no palco.

A figura 14 apresenta a janela de propriedades do componente tabela. Durante a edição do

componente o usuário pode:
● Selecionar o número de linhas e colunas (Botões 9 e 10)
● Inserir colunas à direita ou à esquerda da coluna selecionada (Botões 3 e 4)
● Inserir linhas acima ou abaixo da linha selecionada (Botões 5 e 6)
● Excluir coluna à esquerda da coluna selecionada (Botão 7)
● Excluir linha abaixo da linha selecionada (Botão 8)
● Desenhar linha ou coluna (Botão 1): Selecionar o botão de desenhar linha/coluna e
entre as células da tabela clicar e arrastar a linha/coluna vermelha para criar as
linhas/colunas.

Figura 15. Desenhando uma linha na tabela.

● Apagar linha ou coluna (Botão 2): Selecionar o botão de apagar linha/coluna e clicar
em uma linha/coluna.

12
 Figura 16. Apagando uma linha na tabela.

● Editar texto da tabela (Botões 11)

● Redimensionar Linha/Coluna: Clicar em uma linha ou coluna e arrastar até o tamanho
desejado.
Para poder iniciar a edição do texto o usuário deve dar um duplo clique em uma das
células da tabela.
Durante a visualização da tabela, os textos não podem ser editados.

Figura 17. Componente Tabela na visualização.

5.4. Caixa de Texto

O usuário pode inserir um texto na caixa de texto e editá-lo (fonte, cor, tamanho,
alinhamento, negrito, itálico, sublinhado, subescrito, sobescrito). Também pode inserir um
hint em um determinado trecho do texto e um hiperlink para uma página web o qual é
acessado ao ser clicado durante a visualização da aula.

Para inicializar a edição do texto o usuário deve dar um duplo clique na caixa de
texto.

13
 Figura 18. Edição do Componente Caixa de Texto.

Na visualização do componente Caixa de Texto, as bordas da caixa ficam invisíveis,

como visto na figura 19, e os textos não podem ser editados.

Figura 19. Visualização do componente Caixa de Texto.

5.5. Hint

O componente hint é uma pequena caixa de texto contendo alguma informação que é
exibida quando o usuário passa o mouse sobre uma área especifica.
Para criar um hint, o usuário deve inserir o texto dentro da janela de propriedades.
Esse texto será exibido no hint. O usuário também pode formatar o texto. Ao finalizar a
formatação deve-se clicar no botão “OK”.
Em seguida o usuário deve posicionar o hint no local do palco que deseja.

Figura 20. Editando o Componente Hint.

Durante a visualização, o componente hint fica invisível e somente é visualizado
quando o usuário passa o mouse sobre a área do componente. Ao passar o mouse sobre a
área, o texto inserido na caixa de propriedades é exibido como mostrado na figura 21.

14
 Figura 21. Visualização do componente Hint.

6. Componentes de Mídia

Figura 22. Menu dos componentes de Mídia.

6.1. Vídeo

O componente é um player de vídeo que só aceita formatos. flv. O usuário deve selecionar
um vídeo utilizando a janela de multimídias (seção 3).
O usuário pode escolher se o vídeo deve iniciar automaticamente (assim que a
página é iniciada) ou deve aguardar o usuário iniciar o vídeo através do botão “play”.

Figura 23. Edição do componente de vídeo.

Durante a visualização o usuário pode:

15
 ● Pausar ou continuar o player
● Reiniciar o player quando o vídeo chegar ao fim
● Pular a execução para um instante no tempo clicando na barra de execução.

Figura 24. Visualização do componente de vídeo.

6.2. Vídeo com Marcação

O componente tem como objetivo criar marcações e animações para o vídeo que
aparecerão durante a sua execução. O componente contém objetos que podem se deslocar
e alterar seu tamanho no palco através do tempo.
Para iniciar a edição do componente é obrigatória a escolha de um vídeo o qual será
marcado. O usuário deve selecionar o vídeo clicando no botão “Selecionar Vídeo” o qual
abre a janela de selecionar multimídia (seção 3).

16
 Figura 25. Edição do componente Vídeo com Marcação.

Figura 26. Janela de propriedades do Componente de Vídeo com Marcação.

O componente Vídeo com Marcação (figura 26) possui as seguintes ferramentas:

17
1 – Palco:
Local onde é exibido o vídeo escolhido para ser marcado e onde serão
adicionados os componentes. Exibe o retrato dos objetos no instante apontado pelo
marcador (item 5).

2 – Componentes no Palco:
Representação dos componentes no palco.

3 – Lista de Componentes:
Lista com todos os componentes adicionados no palco.

4 – Linha do Tempo:
Linha de tempo contendo a duração do vídeo e todos os componentes
inseridos no palco nos seus respectivos tempos iniciais e suas durações.

5 – Marcador de Tempo
Indica o tempo atual do vídeo.

6 – Componentes
Botões para adicionar componentes ao palco.
Os componentes que podem ser criados são: Imagem, Balão de Diálogo,
Destaque, Título e Observação.

7 – Alterar Tempo inicial e final do componente.

Ao inserir um componente no palco, é possível editar o seu tempo inicial e
final. Durante esse intervalo de tempo o componente ficará visível no vídeo.

8 – Edição do Conteúdo do Componente Adicionado.

Para os componentes do tipo imagem o usuário pode adiciona a mídia
correspondente ao componente, como visto na figura 27 (mais informações na seção
3). Para os componentes do tipo balão de diálogo, observação e título o usuário
poderá alterar a fonte e a cor do texto, visto na figura 28. O usuário pode inserir um
texto nesses componentes selecionando o componente e dando um duplo clique no
mesmo para poder escrever e selecionar o texto.

Figura 27. Edição do Conteúdo dos Componentes de Mídia.

Figura 28. Edição do Conteúdo dos Componentes de Texto.

9 – Configurações Gerais da Animação

18
 O usuário pode configurar alguns itens do vídeo como, por exemplo:
 Início automático do vídeo na visualização da página (autoplay) ou deve
aguardar a ação do usuário (botão play);
 Loop do vídeo. Reiniciar automaticamente o vídeo quando ele chegar ao fim.

10 – Preview
Pré-visualização do vídeo e suas marcações.

11 – Ir para frente/ Ir para trás

Avançar ou retroceder a profundidade do componente selecionado no palco
permitindo sua visualização sobrepondo os demais.

12 – Salvar Marcações
Salvar as marcações criadas no vídeo. As modificações feitas na janela de
propriedade só poderão ser vistas no palco do gerador e na visualização da página
quando forem salvas.

13 – Excluir Componente Selecionado.

Excluir do palco o componente selecionado.

Para criar uma marcação ou animação no vídeo, é necessário criar um dos

componentes do item 6 da figura 26. Ao ser criado, o componente será exibido no palco
(item 2), na linha do tempo (item 4) e na lista de componentes (item 3). Para que o
componente possa ser editado é necessário selecioná-lo. Isso poderá ser feito clicando no
componente no palco, selecionando-o na lista de componentes ou clicando na sua
representação na linha do tempo.
O usuário pode modificar o tempo inicial e final que o componente deve ser exibido
durante o vídeo. Isso pode ser feito, com o componente selecionado, através do item 7. Para
alterar somente o tempo inicial do componente, o usuário poderá clicar e arrastar sua
representação do componente na linha do tempo (item 4) através do tempo total do vídeo.
A figura 29 mostra com mais detalhes a linha do tempo. O componente “Balão 2” foi
arrastado até o tempo inicial de 3.4s. Seu tempo inicial e final pode ser visto no item 1.

Figura 29. Alterando o tempo inicial dos componentes através da linha do tempo.

Caso o usuário queira saber quais marcações aparecem no vídeo em determinado

instante do tempo basta ele clicar e arrastar o marcador até a posição (tempo) que deseja.

19
 Figura 30. Marcador do tempo atual.

Para manipular (arrastar e redimensionar) o componente no palco, o usuário deve

seguir os mesmos passos vistos na seção 2.

 Movimento dos componentes:

O movimento dos componentes pode ser feito da seguinte forma (figura 31):
1. Criar um componente (item 1).
2. Escolher o tempo inicial e final (item 3).
3. Arrastar o marcado de tempo até um instante inicial do movimento do
componente selecionado. (item 3).
4. Escolher a posição e o tamanho do componente em determinado instante de
tempo. (item 2).

Figura 31. Criando um componente.

20
 5. Arrastar o marcador de tempo até o instante final do movimento (item 5 da
figura 32).
6. Escolher a nova posição e tamanho do componente (item 6 da figura 32).

Figura 32. Criando a movimentação do componente.

Para acompanhar o movimento do componente, movimente o marcador até a

posição de tempo desejável. A figura 33 apresenta a posição e tamanho do componente
criado nas figuras 31 e 32 nos instantes 2.1, 4.1 e 6.1 segundos. Caso o usuário queira criar
mais um movimento além do já criado, é necessário arrastar o marcador até o tempo inicial
do movimento, em seguida deve-se arrastar o componente até a posição e tamanho ideal.

21
 Figura 33. Visualização do movimento do componente através do tempo.

Durante a visualização, o componente Vídeo Com Marcação é exibido da mesma

forma que o componente vídeo (seção 6.1), como mostra o exemplo na figura 34. Caso o
usuário tenha desmarcado a opção “AutoPlay” na janela de propriedades, o componente
fica em modo de espera até que o usuário aperte o botão “play”. Caso contrário, o vídeo
deve começar assim que a janela de visualização seja aberta.

22
 Figura 34. Visualização componente Vídeo Com Marcação.

6.3. Animação

O usuário pode selecionar uma animação (somente no formato. swf) utilizando a janela de
multimídias (seção 3).

23
 Figura 35. Edição do componente de animação.

Na visualização, o componente Animação possui fundo transparente.

Figura 36. Visualização do componente Animação.

6.4. Imagem

O usuário pode selecionar uma animação (somente nos formatos.jpg, png e.gif) utilizando a
janela de multimídias (seção 3).

Figura 37. Edição do componente de imagem.

Na visualização, o componente Imagem não sofre alterações e é o mesmo visto no

palco.

24
 Figura 38. Visualização do componente de imagem.

6.5. Áudio

O componente é um player de áudio o qual só aceita formatos. mp3. O usuário pode

selecionar um áudio utilizando a janela de multimídias (seção 3).
O usuário deve escolher se o áudio deve iniciar automaticamente (assim que a aula é
iniciada) ou deve aguardar o usuário iniciar o áudio através do botão “play”.

Figura 39. Edição do componente de áudio.

Durante a visualização o usuário pode:

● Pausar ou continuar o player
● Reiniciar o player quando o vídeo chegar ao fim
● Pular a execução para um instante no tempo clicando na barra de execução.

25
 Figura 40. Visualização do componente de vídeo.

7. Componentes Exercícios

Figura 41. Menu dos Componentes de Exercícios.

7.1. Redação

O usuário pode inserir um enunciado para a redação na caixa de texto 1 da figura 42. Esse
texto pode ser formatado com as opções de formatação presentes na janela de
propriedades.
Além de formatar o texto, o usuário pode editar algumas limitações aplicadas à redação
que o aluno escreverá. As limitações podem ser:
● Por caractere
● Por linha
● Por palavras.
No campo 6, o usuário pode ativar o valor máximo e o mínimo da limitação escolhida no
campo 5. Para poder iniciar a edição do enunciado o usuário deve dar um duplo clique na
caixa de texto 1.

26
 Figura 42. Edição do Componente redação.

Durante a visualização, o aluno deve escrever sua redação na caixa de texto 2 da

figura 42. À medida que o aluno escreve na caixa de texto, o número de linhas, caracteres ou
palavras é exibido. Também são exibidos os limites de linhas, caracteres ou palavras caso
existam. Ao finalizar a redação o aluno deve clicar no botão “Enviar”. A redação só será
enviada caso o texto esteja dento das limitações propostas.

27
 Figura 43. Visualização do Componente redação.

7.2. Lista de Exercícios

Lista de exercícios é um componente capaz de agrupar um conjunto de questões para ser

respondidas. O componente também é capaz de calcular a nota total da lista de exercícios e
identificar quais respostas foram certas e erradas. As ferramentas para a edição da lista de
exercícios são:

Figura 44. Janela de Propriedades da Lista de Exercícios.

1 – Palco:
Local onde são exibidas as questões criadas.

2 – Retroceder Questão:
Exibir se possível, a questão anterior da lista. Só é possível retroceder a
questão caso exista uma questão anterior ou a questão atual esteja completamente
preenchida.

3 – Avançar/Criar Questão:

28
 Exibir se possível, a próxima questão da lista. Só é possível avançar a questão
caso a questão atual esteja completamente preenchida. Se a questão atual for a
ultima da lista, ao executar a ação, um novo espaço para questão é criado.

4 – Tipo de Questão:
Escolher o tipo de questão que deve ser criado. Os tipos possíveis são:
Questão Discursiva, Questão Objetiva, Questão Verdadeiro ou Falso, Questão Ligar
Pontos, Questão Arrastar Itens, Questão Selecionar Imagens e Questão Completar
Lacunas.

5 – Excluir Questão
Exclui uma questão da lista.

6 – Configuração da Lista de Exercícios.

O usuário pode configurar alguns itens da lista de exercícios como, por
exemplo:
 Ordem Aleatória das Questões: se marcada, as questões são exibidas na
visualização de forma aleatória, caso contrário seguiram a ordem de cadastro.
 Nota da Lista: Se marcada, o usuário deve inserir o valor da nota final da lista
de exercícios.
 Tempo (segundos): Se marcado, o usuário deve inserir o valor do tempo, em
segundos, em que o aluno deve responder todas as questões da lista.
 Cor de Fundo: o usuário pode escolher a cor do fundo da lista de exercícios ou
deixar o fundo transparente.

7 – Importar Questões.
O usuário pode importar questões do Banco de Questões do Portal para a
lista de exercícios. Para isso o usuário deve selecionar o botão “Importar Questões”.
Uma janela pop-up é aberta com a lista de questões do banco de questões do portal
como visto na figura 45.
Inicialmente, o usuário deve filtrar as questões através das disciplinas e filtros
avançados (item 1). Em seguida o usuário deve selecionar as questões escolhidas
(item 2) e por fim, deve clicar no botão “Salvar Questões” (item 3). O pop-up fecha
automaticamente e as questões selecionadas devem aparecer na lista de questões.

29
30
 Figura 45. Pop-up para importar questões do banco para a lista de exercícios.

8 – Salvar Lista
Salvar a lista de exercícios. As modificações feitas na janela de propriedade só
poderão ser vistas no palco do gerador e na visualização da página quando forem
salvas.

7.2.1 Texto Fixo

Em uma lista de exercícios pode existir um conjunto de questões que são baseadas
em um texto em comum. Para que o usuário não necessite digitar esse mesmo texto em
todas as questões que o utilizem, a lista de exercícios possui a funcionalidade de cadastrar
textos fixos. O texto fixo não é obrigatório na composição da questão.
Ao escolher o tipo de questão na lista de exercícios, o usuário pode clicar no botão
“Inserir” na caixa de texto destinada ao texto fixo, como visto na figura 46.

Figura 46. Cadastrando Texto Fixo.

Na janela de cadastro de texto fixo (figura 47), o usuário pode selecionar um texto
fixo já existente (item 1). Ao selecionar o texto, ele aparece na caixa de texto para edição
(item 5). O usuário pode editar o texto e ao final deve salvá-lo (item 6). Caso queira utilizá-lo
para a questão, é necessário clicar no botão “Selecionar” (item 7).
Quando um texto fixo for selecionado, o número de questões ligadas ao texto fixo é
exibido. Só é possível excluí-lo caso não existam questões ligadas a ele.
O usuário pode retornar a edição das questões fechando a janela de texto fixo
através do botão fechar (item 3).

31
 Figura 47. Tela de cadastro do Texto Fixo.

7.2.2 Questões

A lista de exercícios é composta por 7 tipos de questões. Todas as questões contém

uma caixa de texto para o texto fixo, para a pergunta e as caixas de texto específicas das
respostas. Em todas as questões é obrigatório o cadastro da pergunta e da resposta, exceto
a questão discursiva.

Figura 48. Caixas de textos comuns a todas as questões.

32
 Questão Discursiva:
A questão discursiva é composta por um campo de texto fixo (opcional), pergunta
(obrigatório) e resposta (opcional). A resposta da questão discursiva é opcional
devido ao fato dessa questão não ser corrigida pelo componente.

Figura 49. Caixa de texto para a resposta da questão discursiva.

 Questão Objetiva
A questão objetiva possui no máximo 5 alternativas (de A a E) de resposta. O usuário
deve cadastrar pelo menos duas alternativas. A alternativa escolhida como resposta
certa não pode estar em branco, ela deve ser preenchida.

33
 Figura 50. Alternativas para resposta da questão objetiva.

 Questão Verdadeiro ou Falso

34
 Na questão verdadeiro ou falso, o usuário deve cadastrar, além da pergunta, um
conjunto de 1 ou mais sentenças. É necessário também marcar as sentenças que
forem verdadeiras e desmarcar as falsas.

Figura 51. Sentenças da questão verdadeiro ou falso.

 Questão Arrastar Itens

Esta questão tem o objetivo de arrastar um texto para o seu par relacionado.
Durante criação da questão, o usuário pode escolher a diagramação dos itens
(horizontal ou vertical) e o tipo de par. Os pares podem ser formados por
Imagem/Texto ou Texto/Texto. Para selecionar a imagem o usuário deve clicar no
par que contenha o espaço para a imagem e clicar no botão “Selecionar Imagem”.
Para editar o texto o usuário deve dar um duplo clique na caixa de texto do item e
escrever o texto. O texto selecionado pode ser formatado modificando a fonte, o
tamanho, a cor, etc.

35
 Figura 52. Questão arrastar itens.

 Questão Ligar Itens

Esta questão tem o objetivo de ligar 2 itens correspondentes.
Durante a criação da questão, o usuário pode escolher a diagramação dos itens
(horizontal ou vertical) e o tipo de par. Cada item do par correspondente pode ser
uma imagem ou um texto. Para selecionar a imagem o usuário deve clicar no par que
contenha o espaço para a imagem e clicar no botão “Selecionar Imagem”. Para editar
o texto o usuário deve dar um duplo clique na caixa de texto do item e escrever o
texto. O texto selecionado pode ser formatado modificando a fonte, o tamanho, a
cor, etc.

36
 Figura 53. Questão ligar itens.

 Questão Selecionar Imagens

Para esse exercício o usuário deve cadastrar um conjunto de imagens e informar
quais as imagens que devem ser marcadas como resposta certa. É necessário
também informar a quantidade de colunas para posicionar as imagens durante a
visualização da lista de exercícios.

Figura 54. Questão Selecionar Imagens.

 Questão Completar Lacunas

37
A questão é composta por um texto com uma ou mais lacunas dentro dele as quais
devem ser completadas. Para criar uma lacuna no texto o usuário deve clicar no
botão “Lacuna”. Uma janela para gerar a lacuna é exibida. O usuário deve escrever o
conteúdo da lacuna e em seguida clicar em “Gerar”. Após a criação, a lacuna é
exibida como uma caixa azul com o texto correspondente dentro. Durante a
visualização da lista de exercícios, o texto da lacuna não é exibido.

Figura 55. Questão Completar Lacunas.

Figura 56. Gerar Lacunas.

38
 Figura 57. Exemplo de lacuna criada.

Para iniciar a resolução da lista de exercícios, o usuário deve clicar no botão “Iniciar”,
como visto na figura 58.

Figura 58. Visualização da lista de exercícios.

Em seguida, o usuário pode navegar pela lista de exercícios para responder as

questões. A figura 59 apresenta os detalhes da lista. Os itens 1 e 2 avançam ou retrocedem
as questões. O item 3 identifica a questão atual. O item 4 exibe, se for o caso, o tempo
restante para responder todas as questões da lista. Quando o tempo acabar a lista de

39
questões é finalizada exibindo o resultado final mesmo que o usuário não tenha respondido
todas as questões.
O texto fixo da questão, casso possua, é exibido no item 5. O item 6 apresenta a
pergunta da questão atual e os campos 7 apresentam as particularidades para a resposta de
cada tipo de questão. No exemplo da figura 59, o item 7 apresenta as alternativas da
questão objetiva.

Figura 59. Elementos da lista de exercícios.

No final da lista é exibido o botão “Avaliar” (figura 60) que quando clicado exibe um
relatório de desempenho da lista de exercícios. Esse relatório possui as seguintes
informações:
 Nota final ou Resultado (%): Caso o usuário marque a opção de nota na criação da
lista, o relatório apresenta a nota de acordo com a quantidade de questões certas,
caso contrário, apresenta o desempenho em porcentagem de questões certas.
 Resultado individual de cada questão da lista: O resultado pode ser “Sem correção”
para as questões do tipo discursiva, e “Certa” ou “Errada” para todos os outros tipos
de questões.

40
Figura 60. Finalizando a lista de exercícios.

Figura 61. Relatório da lista de exercícios.

41
 8. Componentes Jogos

Figura 62. Menu Componentes Jogos.

8.1. Jogo das Proposições

Propõe ao jogador movimentar a bolinha pela tela, utilizando as setas, até a caixa
correspondente à proposição apresentada. É facilmente adaptável a qualquer assunto que o
professor queira abordar.
A janela de propriedades (figura 63) apresenta:

Figura 63. Janela de propriedade do jogo das proposições.

 Pontos por acerto: Define a quantidade de pontos ganhos quando a bola acerta a
caixa correspondente.

42
 Pontos para vencer: Define a quantidade de pontos necessários para que o usuário
vença o jogo. Ao alcançar essa quantidade de pontos, o jogo é interrompido por uma
mensagem de vitória.
 Número de perguntas: Define o número de chances para acertar as bolinhas nas
caixas correspondentes.
 Mensagem de alerta em vermelho: Certas combinações de pontuações para “Pontos
por acerto”, “Pontos para vencer” e “Número de perguntas” podem criar situações
na qual mesmo se acertando todas as perguntas o jogador não poderá vencer ou no
qual o jogo pode terminar com uma única resposta correta, tornando a partida muito
curta. As mensagens em vermelho desaparecem quando não houver nenhum alerta.
 Botão “Verificar”: Verifica se todos os campos dos 4 tipos de proposições foram
preenchidos corretamente, visa evitar erros no jogo.
 Abas: O Jogo das Proposições possui 4 abas, uma para cada tipo escolhido, cada uma
contendo campos para 6 sentenças e um campo de resposta.
 Controle: Controle através das setas direita e esquerda do teclado ou da interface do
jogo.
 Objetivo: Acertar a resposta inserindo a bolinha na caixa de resposta
correspondente. Para cada resposta correta o jogo se torna um pouco mais rápido.
 Vitória: Ao completar o número de pontos exigido para a vitória, o jogo é
interrompido por uma mensagem parabenizando o usuário.

43
 Figura 64. Visualização do jogo das proposições.

8.2. Jogo da Memória

Propõe ao jogador encontrar os pares de elementos, iguais entre si ou relacionados. Pode

ser criado a partir de imagens ou textos.
A janela de propriedades (figura 65) apresenta:

Figura 65. Janela de propriedades do jogo da memória.

 Abas: Apresenta as abas Informações e Peças.

Informações - Define textos de Introdução, Conclusão, Tempo e Áudio.
Peças – Define as peças que serão empregadas no jogo.
 Introdução: Define o texto de introdução do jogo.
 Conclusão: Define o texto de conclusão do jogo.
 Tempo Esgotado: Define a mensagem a ser mostrada caso o tempo se esgote
(funciona quando a opção “Tempo” estiver marcada).
 Tempo: Caso esta opção seja marcada, o jogo terá um tempo limite de duração
determinado. O Campo à sua direita determina a duração em segundos.

44
  Selecionar Áudio: Caso o usuário decida por tal, este botão permite selecionar um
som de fundo a ser executado no decorrer do jogo.
 Fonte, Cor, Formatar e Tamanho: É possível formatar o texto, ao selecionar um texto
ou parte dele, quanto aos atributos: “Fonte”, “Cor”, “Formatar” e “Tamanho”.
 Salvar: Botão que salva as modificações efetuadas nas propriedades do Jogo da
Memória.

Figura 66. Criando as peças do jogo da memória.

Aba Peças:
 Número de Pares: Indica o número de peças.
 Imagem X Texto: Adiciona um par para o jogo no qual um deles é uma imagem e o
outro é um texto.
 Imagem X Imagem: Adiciona um par de imagens, que podem ser iguais ou não.
 Texto X Texto: Adiciona um par de textos para o jogo no qual, que podem ser iguais
ou não.
 Remover: Botão que remove o par selecionado atualmente.
 Para inserir conteúdo:
- Tipo texto - clique nele e digite.
- Tipo imagens - clique no botão “Inserir Imagem” abaixo de quadro e selecione a
imagem desejada.

45
 Figura 67. Visualização do jogo da memória.

8.3. Jogo Verdadeiro ou Falso

O Jogo propõe a avaliação de sentenças como verdadeiras ou falsas.

Deve-se pressionar o botão verde (“V”) para sentenças verdadeiras e o botão vermelho (“F”)
para sentenças falsas.
Após a resposta, o jogo dá um feedback para o usuário avisando se a resposta está correta,
bem como uma tela com uma mensagem sobre a resposta dada.

46
 Figura 68. Jogo verdadeiro ou falso.

A janela de propriedades (figura 69) apresenta:

47
 Figura 69. Janela de propriedades do jogo verdadeiro ou falso.

 Pontos por pergunta: Aqui se seleciona a quantidade de pontos ganhos por vez que
se acertar se a sentença é falsa ou verdadeira.
 Pontos para vencer: Aqui se seleciona a quantidade de pontos necessários para que
se vença o jogo.
 Número de perguntas: Aqui se seleciona o número de sentenças que serão
mostradas ao aluno para que se responda se elas são verdadeiras ou falsas. Caso o
número de perguntas seja maior que o número de sentenças, então as perguntas se
repetirão.
 Perguntas embaralhadas: Caixa de seleção na qual o professor decide se as sentenças
serão mostradas em ordem aleatória ou não.
 Mensagem de alerta em vermelho: Certas combinações de pontuações para “Pontos
por pergunta”, “Pontos para vencer” e “Número de perguntas” podem criar situações
na qual mesmo se acertando todas as perguntas o jogador não poderá vencer ou no
qual o jogo pode terminar com uma única resposta correta, tornando a partida muito
curta. As mensagens em vermelho desaparecem quando não houver nenhum alerta.
 Botão “Verificar”: Aqui se verifica se todos os campos de todas as questões foram
preenchidos para que o jogo possa funcionar sem erros. A verificação não verifica se

48
 os campos de “Feedbacks” foram preenchidos, pois ainda que elas não forem
preenchidas o jogo pode dar respostas padrões para os erros e acertos.
 Abas: O Jogo Verdadeiro ou Falso pode criar de 1 a 10 abas. É possível criar e deletar
uma aba existente, cada uma destina-se a uma sentença.
Cada aba contém um campo para sentença, uma caixa de seleção para determinar
qual é a sentença é verdadeira, e um botão “Feedback”, no qual o professor
configura os padrões de respostas de acerto e erro do jogo.
 Sentença: Caixa de texto para a sentença.
 Verdadeiro: Caixa de seleção onde o professor indica a sentença verdadeira. A caixa marcada
indica a verdadeira e as desmarcadas indicam as falsas.

Figura 70. Configurando os feedbaks do jogo verdadeiro ou falso.

8.4 Jogo do Corredor

No Jogo do Corredor, é uma espécie de Quiz animado, no qual o objetivo é acertar às

questões para levar o atleta até a vitória.
Para cada acerto obtido, o corredor executa um salto sobre barreira e aumenta a distância
percorrida, caso erre a pergunta o aluno deve repetir o último trajeto na próxima pergunta.
O jogo apresenta o feedback para o aluno, após cada resposta.

49
 Figura 71. Visualização do jogo corredor

A janela de propriedades (figura 72) do jogo apresenta:

50
 Figura 72. Janela de propriedade do jogo do corredor.

 Metros por acerto: Define a quantidade de metros andados por acerto.

 Distância a vencer: Define a quantidade de metros necessários para se obter a
vitória.
 Número de perguntas: Determina o número de perguntas feitas ao aluno.
OBS: Caso o número de perguntas seja maior que o número de sentenças, então as
perguntas se repetirão.
 Perguntas embaralhadas: Caixa de seleção na qual o usuário decide se as sentenças
serão mostradas em ordem aleatória ou não.
 Mensagem de alerta em vermelho: Certas combinações de pontuações para “Metros
por acerto”, “Distância para vencer” e “Número de perguntas” podem criar situações
na qual mesmo se acertando todas as perguntas o jogador não poderá vencer ou no
qual o jogo pode terminar com uma única resposta correta, tornando a partida muito
curta. As mensagens em vermelho desaparecem quando não houver nenhum alerta.
 Botão “Verificar”: Verifica se todos os campos das questões foram preenchidos
corretamente, para que evitar erros de funcionamento. Os campos de “Feedbacks”
não são obrigatórios. Caso não sejam preenchidos, o jogo dará as respostas padrão
para erros e acertos.

51
  Abas: O Jogo pode criar de uma a dez abas. É possível criar e deletar uma aba
existente, cada uma destina-se a uma sentença.
Cada aba contém um campo para sentença, uma caixa de seleção para determinar
qual é a sentença é verdadeira, e um botão “Feedback”, no qual o professor
configura os padrões de respostas de acerto e erro do jogo.

Figura 73 Configurando feedbacks do jogo do corredor.

8.5. Jogo da Escada

Neste jogo, o objetivo é levar o personagem a subir os degraus respondendo uma série de
perguntas para ganhar um prêmio.

52
 Figura 74. Jogo da escada.

A janela de propriedades (figura 75) mostra:

53
 Figura 75. Janela de propriedades do jogo da escada.

 Degraus por acerto: Determina o número de degraus adquiridos por acerto.

 Degraus para vencer: A quantidades de degraus para vencer é fixa em 14 degraus, ela
é mostrada aqui em tom de cinza.
 Número de perguntas: Define o número de perguntas feitas ao aluno. Caso o número
de perguntas seja maior que o número de sentenças, as perguntas se repetirão.
 Perguntas embaralhadas: Caixa de seleção que define se as sentenças serão
apresentadas em ordem aleatória ou não.
 Mensagem de alerta em vermelho: Certas combinações de pontuações para
“Degraus por acerto”, “Degraus para vencer” e “Número de perguntas” podem criar
situações na qual mesmo se acertando todas as perguntas o jogador não poderá
vencer ou no qual o jogo pode terminar com uma única resposta correta, tornando a
partida muito curta. As mensagens em vermelho desaparecem quando não houver
nenhum alerta.
 Botão “Verificar”: Verifica se todos os campos das questões foram preenchidos
corretamente, para que evitar erros de funcionamento. Os campos de “Feedbacks”
não são obrigatórios. Caso não sejam preenchidos, o jogo dará as respostas padrão
para erros e acertos.

54
  Abas: O Jogo da Escada possui de 1 a 10 abas, sendo criadas ou desfeitas de acordo
com a vontade do usuário, servindo cada uma para uma sentença diferente que ele
queira fazer. Cada aba contém um campo para sentença, 5 campos de respostas
possíveis, campos de seleção à direita de todas as respostas para indicar qual das
respostas é a correta e um botão “Feedback” que leva até a tela na qual o usuário
pode mudar as respostas padrões de acerto e erro do jogo a serem mostradas no
caso do aluno acertar ou errar uma resposta.

Figura 76. Configurando feedbacks do jogo da escada.

8.6. Quebra-Cabeça

No Jogo Quebra-Cabeça, o objetivo é encaixar as peças corretamente para formar uma

imagem definida pelo professor. O aluno utilizará o mouse para arrastar as peças até suas
devidas posições.
A janela de propriedades (figura 77) apresenta:

55
 Figura 77. Configurando jogo do quebra-cabeça.

 Texto de apresentação: No campo à direita da interrogação determina-se o

Enunciado.
 Fonte, Cor, Formatar e Tamanho: Permite formatar um texto ou parte de um texto
selecionado. Possibilita a edição dos atributos: “Fonte”, “Cor”, “Formatar” e
“Tamanho”.
 Salvar: Botão que salva as modificações efetuadas nas propriedades do Jogo Quebra
Cabeça.
 Selecionar Imagem: Botão que leva para a tela de escolha da imagem.
 Formato de Quebra Cabeça: Existe uma seleção de 4x2, 5x3 e 6x4 para a disposição e
quantidade das peças utilizadas no jogo.

56
 Figura 78. Visualização do quebra-cabeça.

8.7. Palavras Cruzadas

As Palavras Cruzadas objetivam descobrir as palavras corretas de acordo com as dicas

sugeridas. Passando-se o mouse sobre os quadros pintados, são apresentadas as dicas sobre
as palavras.

57
 Figura 79. Visualização do jogo palavras-cruzadas.

A tela de propriedades (figura 80) apresenta:

58
 Figura 80. Configurando o jogo palavras-cruzadas.

 Texto de apresentação: No campo à direita da interrogação deve-se digitar o

Enunciado do Jogo.
 Fonte, Cor, Formatar e Tamanho: Permite formatar um texto ou parte de um texto
selecionado. Possibilita a edição dos atributos: “Fonte”, “Cor”, “Formatar” e
“Tamanho”.
 Salvar: Botão que salva as modificações efetuadas nas propriedades do Jogo.
 Grade de letras: Aqui o usuário digita as palavras a serem digitadas pelo aluno,
lembrando-se que as palavras devem estar cruzadas.
 Dica: Ao se clicar em um quadrado da grade de letras e pressionar o botão “Dica”. O
quadrado selecionado será pintado e, ao passar do mouse, apresentará a dica da
palavra.
 Texto das dicas: Ao se criar uma dica aparecerá uma caixa de texto à direita da grade
de letras que serve para escrever o texto a ser mostrado na dica selecionada. À
direita do texto temos o botão que serve para descartar a dica correspondente.

8.8. Lucrecia Juvenal Ares

O jogo do Lucrecia Juvenal Ares é uma atividade de perguntas e respostas objetivas. A

princípio, o aluno deve selecionar o personagem que deseja jogar. Com o mouse,
movimenta o personagem estourando os balões com as respostas corretas para a Questão.

59
O professor precisa criar as instruções e o conjunto de questões.
Na janela de propriedades, deve configurar:
- Descrição do jogo - clicando no botão “Descrição”.
- Texto de Instruções e conclusão - clicando no botão “+Info”. Além de escolher se as
perguntas aparecerão de forma aleatória ou não.
- Questões – É possível criar até 10 questões. Para adicionar clique no botões + e para
excluir no botão -.
- Para cada pergunta, cadastre uma alternativa correta e 4 alternativas erradas (no máximo).

Após configurar o jogo, o professor deve clicar no botão “Salvar” para que as alterações
sejam salvas.

60
 Figura 81. Configurando o jogo Lucrecia Juvenal Ares.

O jogo é finalizando quando todas as perguntas forem respondidas corretamente.

Figura 82. Escolhendo o personagem do jogo.

61
 Figura 83. Visualização do jogo Lucrecia Juvenal Ares.

8.9. Caça Palavras

O Caça Palavras é um jogo formado por letras aleatórias dispostas em uma grade, cujo
objetivo do jogo é encontrar as palavras escondidas nessa grade. As palavras podem estar na
vertical ou na horizontal e podem ser lidas de cima para baixo ou da esquerda para a direita.
O professor deve definir as Dicas sobre as palavras a serem descobertas, através de imagens
ou textos.
A janela de propriedades apresenta uma grade preenchida com letras aleatórias. É
possível inserir:
 Texto de apresentação: No campo à direita da interrogação deve-se digitar o
Enunciado do Jogo.
 Fonte, Cor, Formatar e Tamanho: Permite formatar um texto ou parte de um texto
selecionado. Possibilita a edição dos atributos: “Fonte”, “Cor”, “Formatar” e
“Tamanho”.
 Salvar: Botão que salva as modificações efetuadas nas propriedades do Jogo.
 Definir se as dicas, como imagem ou texto:

62
- Palavras – Clicando-se no botão “Texto” e clicando-se em OK. A palavra aparecerá na
grade. Também é possível modificar as letras aleatórias que aparecem na grade, basta clicar
na caixa de texto relativa à letra que deseja mudar e digitar a nova letra.
OBS: Caso queira que a palavra apareça em outra posição, clique novamente no botão “OK”.

- Imagens - Clicando-se no botão “Imagem”.

Figura 84. Configurando o jogo Caça-Palavras.

Como jogar?
O aluno deve observar as dicas para as palavras que deve encontrar e selecionar uma
palavra clicando nas letras, elas ficarão azuis. Para finalizar o jogo, deve clicar no botão
“Avaliar”.
As palavras que selecionadas corretamente ficarão destacadas em verde e as erradas
em vermelho. Caso não tenha encontrado todas as palavras certas o aluno deverá tentar
novamente até que todas sejam encontradas.

63
 Figura 85. Visualização do jogo caça-palavras.

8.10. Robotix

O jogo do Robotix é uma atividade de perguntas e respostas objetivas. Com as setas

direcionais do teclado, o aluno deve movimentar o Robotix para estourar as bolhas com as
respostas corretas.

O professor deve configurar as instruções e um conjunto de questões.

As bolhas que saem da máquina contém as letras A, B, ... E, o aluno deve estourar a resposta
correta.

O professor precisa criar as instruções e o conjunto de questões.

Na janela de propriedades, deve configurar:
- Descrição do jogo - clicando no botão “Descrição”.
- Texto de Instruções e conclusão - clicando no botão “+Info”. Além de escolher se as
perguntas aparecerão de forma aleatória ou não.
- Questões – É possível criar até 10 questões. Para adicionar clique no botões + e para
excluir no botão -.
- Para cada pergunta, cadastre uma alternativa correta e 4 alternativas erradas (no máximo).

64
Após configurar o jogo, o professor deve clicar no botão “Salvar” para que as alterações
sejam salvas.

Figura 86. Configurando jogo Robotix.

65
 Figura 87. Visualização do jogo Robotix.

8.11. Enigma das palavras

O objetivo do jogo é descobrir a palavra secreta digitando-se letras. Dicas são dadas ao
aluno, através do enunciado e da dica, apresentada em forma de texto ou imagem.
O professor deve configurar o jogo, cadastrando:
- As mensagens de acerto e de erro.
- Enunciado.
- Conclusão do jogo.
- Dicas, em forma de texto e/ou imagem.
Após definir todos os parâmetros do jogo, o professor deve salvar o jogo.
Para incluir mais palavras secretas deve-se clicar no botão + e par excluir, deve-se clicar no
botão -.

66
 Figura 88. Janela de propriedades do jogo palavra secreta.

Como jogar?
O aluno deve observar as dicas e tentar descobrir palavra oculta. A quantidade de letras da
palavra é representada por quadrados. O aluno deve escolher as letras que compõem a
palavra. Se a letra escolhida estiver correta ela é marcada de verde e aparece na sua posição
correta nos quadrados que representam a palavra, caso contrário, ela é marcada da cor
vermelha e o aluno perderá uma de suas 5 tentativas. O aluno ganhará o jogo quando
acertar todas as letras de todas as palavras cadastradas, antes que suas tentativas ou o
tempo de 5mim se esgotem.

67
 Figura 89. Jogo palavra secreta.

8.12. Jogo do Tabuleiro

O objetivo do jogo é percorrer o tabuleiro respondendo corretamente às perguntas e/ou

lendo textos informativos.
Configurações do jogo:
Número de casas – Define o número de casas que haverá no tabuleiro, ou seja, o número de
casas que o aluno deve percorrer para chegar ao final do jogo. As opções são de 20, 30, 40
ou 60 casas.
Número de eventos – Determina o número de eventos disponíveis no jogo. Os eventos são
casas especiais no tabuleiro. Podem ser textos com algum tipo de informação ou uma
pergunta a ser respondida. Ao criar um evento, o usuário deve informar o tipo de evento
(texto ou pergunta).

O número de eventos depende da quantidade de casas:

- 2 a 6 eventos para 20 casas;
- 3 a 9 eventos para 30 casas;
- 4 a 12 eventos para 40 casas;
- 6 a 18 eventos para 60 casas.

68
A janela para configuração do jogo do tabuleiro possui 3 abas: Enunciado, Eventos e
Configurações (itens 1, 2 e 3 da figura 90).
 Aba Enunciado - Local onde o usuário deve inserir a introdução do jogo.
 Aba Eventos _ Local onde o usuário deve cadastrar todos os eventos escolhidos.
- Evento do tipo Texto - só é necessário inserir um texto informativo.
- Evento do tipo Pergunta - é necessário inserir a pergunta, a alternativa correta e as
alternativas erradas (criar através do item 9 da figura 63), clicando-se nos ninais de + para
adicionar e – para excluir.

O máximo de alternativas erradas é 4.

É necessário definir os feedbacks a serem exibidos, na caixa Tratamento de Erro.
Caso o usuário queira cadastrar ou excluir mais eventos ele deve utilizar o item 10 e 11 da
figura 90. O número de eventos deve estar dentro do limite de eventos informado para o
número de casas escolhidas para o tabuleiro.
Ao concluir é necessário salvar o jogo, clicando no botão Salvar.

Figura 90. Inserir eventos no tabuleiro.

 Aba Configurações - Permite configurar alguns itens adicionais ao jogo.

O 1º item define se o jogo deve ter “falsos eventos”, que são perguntas
espalhadas pelo tabuleiro, mas nos quais o aluno nunca cairá. Eles servem apenas

69
 para oferecer realismo ao jogo, fazendo com que o aluno não perceba que já
passou por todos os eventos no jogo.
O 2º item é referente à ordem aleatória dos eventos cadastrados.
O 3º é o cadastro da mensagem de conclusão do jogo. Caso não seja definida,
será exibida uma animação padrão.

Figura 91. Configurações adicionais do jogo do tabuleiro.

Ao concluir a edição do jogo, é necessário clicar no botão “Salvar” para que todas as
informações sejam gravadas. Qualquer alteração feita na janela de propriedades que não
salva será perdida quando a janela for fechada.

Como jogar?
O aluno deverá clicar no dado para determinar quantas casas no tabuleiro deve andar. Casa
com o símbolo “A” - Exibe um evento do tipo texto.
Casa do tipo “?” - Exibe uma pergunta. O aluno só continuará o jogo caso acerte a pergunta.

O aluno vence o jogo ao percorrer todas as casas e chegar ao final do caminho.

70
 Figura 92. Visualização do jogo do tabuleiro.

9. Componentes de Interação

Figura 93. Menu dos Componentes de Interação

9.1. Desenho Livre

Desenho livre é uma ferramenta para que o usuário possa produzir suas próprias imagens e
salvá-las no gerador. O desenho livre (figura 94) é composto pelas seguintes ferramentas:

71
 Figura 94. Edição do Desenho Livre.

 Lápis (item 6).

 Pincel (item 7).
 Hidrocor (item 8).
 Borracha (item 9).
 Tamanho (item 4): Define a largura dos componentes lápis, pincel, hidrocor e
borracha.
 Cor (item 5): Define a cor do lápis, pincel, hidrocor e do preenchimento das formas
geométricas.
 Carimbo (item 10): Ao selecionar a opção, o usuário deve escolher uma das imagens
pré-cadastradas como carimbo para sua utilização. A cada clique na área de desenho,
essa imagem é reproduzida.

72
 Figura 95. Ferramenta Carimbo.

 Varinha (item 11): Ao selecionar a opção, o usuário deve escolher uma das imagens
pré-cadastradas como varinha para sua utilização. O usuário deve clicar e arrastar o
mouse pela área de desenho para que a sequência de imagens escolhidas seja
reproduzida.

Figura 96. Ferramenta Varinha.

73
  Formas Geométricas (item 12): As formas geométricas presentes no desenho livre
são: retângulo, círculo, triângulo e reta. O usuário tem a opção de escolher se tais
formas devem ter borda e caso tenham podem também escolher sua diferente (item
1).
 Plano de Fundo (item 13): O usuário poderá escolher uma imagem ou uma cor como
plano de fundo do seu desenho.
 Nome do desenho (item 1): O usuário pode escolher um nome para o seu desenho .
Caso não escolha, a imagem será salva com um nome pré-cadastrado.
 Apagar (item 2): Limpa toda a área de desenho.
 Salvar (item 3): Salva o desenho no gerador de aulas e exibe o componente desenho
livre no palco. O desenho livre salvo na biblioteca de imagens do usuário poderá ser
em outros componentes do mesmo modo que uma imagem cadastrada pelo usuário.

Durante a visualização, o desenho livre se comporta do mesmo modo que uma

imagem, ou seja, não sofre alterações e é o mesmo visto no palco.

Figura 97. Visualização do Desenho Livre.

9.2. Criar Animação

O componente tem como objetivo criar animações. Este componente tem seu
funcionamento semelhante ao componente vídeo com marcação (seção 6.2). O componente
contem objetos que podem se deslocar e alterar seu tamanho no palco através do tempo.

74
 Figura 98. Edição do Componente de Criar Animação.

O componente Criar Animação possui as seguintes ferramentas:

1 - Palco:
Local onde é exibido a animação serão adicionados os componentes. É o
retrato dos objetos no instante apontado pelo marcador (item 5 da figura 98).

2 – Componentes no Palco:
Representação dos componentes no palco.

3 – Lista de Componentes:
Lista com todos os componentes adicionados no palco.

4 – Linha do Tempo:
Linha de tempo contendo a duração da animação e todos os componentes
inseridos no palco nos seus respectivos tempos iniciais e suas durações.

5 – Marcador de Tempo
Indica o instante atual da animação.

6 – Duração da Animação
Indica o tempo total da animação. Esse valor pode ser alterado. O valor
mínimo é 5 segundos.

7 – Componentes

75
 Botões para adicionar componentes ao palco.
Os componentes que podem ser criados na animação são: Imagem, Balão de
Diálogo, Animação (swf), Título, Desenho Livre (mais informações na seção 9.1) e
Áudio.

8 – Alterar Tempo inicial e final do componente.

Ao inserir um componente no palco, pode-se editar o seu tempo inicial e final.
Durante esse intervalo de tempo o componente ficará visível na animação criada.

9 – Edição do Conteúdo do Componente Adicionado.

Para os componentes do tipo imagem, animação e áudio, o usuário poderá
adiciona a mídia correspondente ao componente, como visto na figura 99 (mais
informações na seção 3). Para os componentes do tipo balão de diálogo e título o
usuário poderá alterar a fonte e a cor do texto, visto na figura 100. O usuário pode
inserir um texto nesses componentes selecionando o componente e dando um duplo
clique no mesmo para poder escrever e selecionar o texto. Para o componente do
tipo desenho livre o usuário poderá abrir a janela de edição do desenho livre na
figura 101 (mais informações na seção 9.1).

Figura 99. Edição do Conteúdo dos Componentes de Mídia.

Figura 100. Edição do Conteúdo dos Componentes de Texto.

Figura 101. Edição do Conteúdo do Componente Desenho Livre.

10 – Configurações Gerais da Animação

O usuário pode configurar alguns itens da animação como, por exemplo:
 Fundo deverá ser transparente ou branco (padrão branco);
 Início automático da animação na visualização da página (autoplay) ou deve
aguardar a ação do usuário (botão play);
 Loop da animação. Reiniciar automaticamente a animação quando ela chegar
ao fim.

11 – Preview

76
 Pré-visualização da animação atual.

12 – Ir para frente/ Ir para trás

Avança ou retrocede a profundidade do componente selecionado no palco
permitindo sua visualização sobrepondo os demais.

13 – Salvar Animação
Salva animação criada. As modificações feitas na janela de propriedade só
poderão ser vistas no palco do gerador e na visualização da página quando forem
salvas.

14 – Excluir Componente Selecionado.

Exclui do palco o componente selecionado.

Para criar uma animação, inicialmente pode-se escolher a duração total da animação
(item 6 da figura 98). Em seguida deve-se criar um dos componentes do item 7 da figura 98.
Ao ser criado, o componente será exibido no palco (item 2 da figura 98), na linha do
tempo (item 4 da figura 98) e na lista de componentes (item 3 da figura 98). Para que o
componente possa ser editado deve-se seleciona-lo. Isso poderá ser feito clicando no
componente no palco, selecionando-o na lista de componentes ou clicando na sua
representação na linha do tempo.
O usuário poderá modificar o tempo inicial e final que o componente deve ser
exibido durante a animação. Isso poderá ser feito, com o componente selecionado, através
do item 8 da figura 98. Para alterar somente o tempo inicial do componente, o usuário
poderá clicar e arrastar sua representação do componente na linha do tempo (item 4 da
figura 98) através do tempo total da animação.
A figura 102 mostra com mais detalhes a linha do tempo. O componente “Balão 2”
foi arrastado até o tempo inicial de 3.4s. Seu tempo inicial e final pode ser visto no item 1.

Figura 102. Alterando o tempo inicial dos componentes através da linha do tempo.

Caso o usuário queira saber como está à animação em determinado instante do

tempo basta ele clicar e arrastar o marcador até a posição em que deseja.

77
 Figura 103. Marcador do tempo atual.

Para manipular (arrastar e redimensionar) o componente no palco, o usuário deve

seguir os mesmos passos vistos na seção 2.

 Movimento dos componentes:

O movimento dos componentes pode ser feito da seguinte forma:
1. Criar um componente (item 1 da figura 104).
2. Escolher o tempo inicial e final (item 3 da figura 104).
3. Arrastar o marcado de tempo até um instante inicial do movimento do
componente selecionado. (item 3 da figura 104).
4. Escolher a posição e o tamanho do componente em determinado instante de
tempo. (item 2 da figura 104).

Figura 104. Criando um componente.

78
 5. Arrastar o marcador de tempo até o instante final do movimento (item 5 da
figura 105).
6. Escolher a nova posição e tamanho do componente (item 6 da figura 105).

Figura 105. Criando a movimentação do componente.

Para acompanhar o movimento do componente, movimente o marcador até a

posição de tempo desejável. A figura 106 apresenta a posição e tamanho do componente
criado nas figuras 104 e 105 nos instantes 2, 3, 4, 5 e 6 segundos. Caso o usuário deseje criar
mais um movimento alem do já criado, deve-se arrastar o marcador até o tempo inicial do
movimento, em seguida deve-se arrastar o componente até a posição e tamanho ideal.

79
Figura 106. Visualização do movimento do componente através do tempo.

80
 Durante a visualização, o componente Criar Animação é exibido como mostra o
exemplo na figura 107. Caso o usuário tenha desmarcado a opção “AutoPlay” na janela de
propriedades, o componente fica em modo de espera até que o usuário aperte o botão
“play”. Caso contrário, a animação deve começar assim que a janela de visualização seja
aberta.

Figura 107. Visualização componente Criar Animação.

9.3. Menu

Componente que permite a criação de um menu horizontal ou vertical que ao ser clicado
apresente textos e/ou imagens.
Para adicionar botões ao menu o usuário deve clicar no botão “Adicionar” (item 1 da figura
108). Os itens 2 da figura 108 apresentam algumas ferramentas para a criação dos botões.
Para poder iniciar a edição do texto dos botões o usuário deve dar um duplo clique
no botão.
Para poder iniciar a edição do texto das abas o usuário deve primeiro abrir a aba
clicando no botão correspondente a ela e em segunda dar um duplo clique na caixa de texto
da aba.
As ferramentas para a edição do texto são representadas pelos itens 4 da figura 108.
Para inserir imagens o usuário deve clicar no botão “Imagens” (item 5 da figura 108) e
escolher a imagem da midiateca (seção 3).

81
 O usuário pode escolher se os botões devem ser alinhados na vertical ou na
horizontal selecionando uma das opções do item 3 da figura 108.

Figura 108. Edição do Componente de Menu.

Durante a visualização do componente menu, o fundo da área dos botões fica

transparente e os textos tanto dos botões quanto das abas não podem ser editados.

Figura 109. Visualização do componente menu.

82