TUTORIAL

Quiz
VírusBacter

BY
VIVIANE VILANOVA RODRIGUES
AIRTON JOSÉ VINOLI JÚNIOR
 O que vamos
aprender?
Jogo Quiz VírusBacter

Objetivo Objetivo
Acertar as respostas do quiz e
obter maior pontuação.

Informações
O jogo possui 13 interfaces com
grau de dificuldades crescentes.
Em cada questão, o jogador terá
o seu feedback (certo ou errado)
e a sua pontuação.
 O que é um App de Celular?

“App” é abreviação de “aplicação”. É a uma palavra que

descreve os aplicativos. Estes são programas (software)
desenvolvidos para dispositivos móveis (celulares) com
sistemas operacionais: Android, iPhone (iOS), e em
outros diversos dispositivos inteligentes, como smart TVs,
tablets e até as tecnologias wearable "vestíveis", como os
relógios.

Os apps podem ser free (gratuitos) ou pagos e

desempenham diversas funções: mensageiros online,
streaming, gerenciadores, criador/editor de textos,
planilhas, fotos, vídeos, leitura de e-books, jogos, entre
outras. Alguns já vêm instalados de fábrica, enquanto
outros podem ser obtidos na Apple Store ou na Play Store.

Saiba mais: O que é um Apps?

 ALGORITMO

Um algoritmo é um conjuntos de instruções para realizar

uma determinada tarefa. Como por exemplo:

"abrir a tela"
iniciar do jogo.

Quando: clicar na tela "tocar som 1"

Show do Milhão.

acertar a resposta "mostrar

alerta⚠ aviso".

SOFTWARE

Um programa de software é um algoritmo, o qual foi

traduzido para uma linguagem que o computador entende.
Por exemplo, como mostrado na figura abaixo:

Figura 1. Editor de blocos é onde você programa o comportamento do

seu app. Fonte: Dados da pesquisa, 2023.

Saiba mais: Qual é a diferença entre Algoritmo e Software?

 COMO FAZER APPS
DE
CELULAR?

IMAGINAR

CONSTRUIR

AVALIAR

TESTAR
COMPARTILHAR

Saiba mais em: Como construir Apps?

 CONFIGURANDO SEU
APP INVENTOR 2

OPÇÃO 1: RECOMENDADA
Conecte seu computador e seu dispositivo móvel (celular
ou tablet) Android na mesma rede wi-fi.

Construa um projeto no seu computador e teste em

tempo real no seu dispositivo Android.

OPÇÃO 2: Não tem um dispositivo Android?

Use um emulador

OPÇÃO 3: Não tem conexão wi-fi?

Construa apps com um dispositivo Android e um cabo
USB.
 INSTALANDO
O APLICATIVO

Para poder testar o jogo Vírusbacter em

seu celular, a primeira etapa é instalar o
aplicativo do MIT.

1. Vá na Google Play e procure por ‘MIT

AI2 Companion’.
2. Escolha o app de mesmo nome
3. Clique em ‘Instalar’ e aguarde o
download e instalação do aplicativo.

MUDANDO O IDIOMA
O idioma do App Inventor 2 está
em Inglês, e é preciso alterar
para Português. No canto superior
direito da sua tela do
App Inventor 2, você verá escrito
“English”.
Clique ali para abrir as opções de
idioma e selecione “Português do
Brasil”.
 CRIANDO UM
NOVO PROJETO

Vamos iniciar criando um novo projeto no App Inventor 2.

Confira as etapas:
1. Crie uma conta no App Inventor 2:
[Link] com o seu e-mail
e senha.
2. Faça o login na plataforma.
3. Clique em ‘Criar um novo projeto’.

4. Abrirá uma caixa para inserir o nome do seu projeto.

Após colocar o nome, clique em "OK".

Vamos definir o nome do novo projeto como

“Quiz_Virusbacter” e clicar em OK.

Saiba mais em: Uso do App Inventor na educação

 DEFININDO A
INTERFACE

Vamos começar definindo a nossa interface, como

mostrada na figura abaixo:

1. Crie a interface do App, clicando em "Adicionar tela",

como mostrada na seta.
2. Insira o nome da sua primeira tela. E clique em
"Adicionar". Repita este passo para as demais telas.

3. Na barra esquerda (circulado em preto), você encontra

diversas outras ferramentas que podem ser usadas na
construção de seu aplicativo.
4. Pesquise e confira as ferramentas que será necessário
para o seu App.
 DEFININDO A
INTERFACE

5. Insira botão no seu App. Na

tela inicial (screen 1) incluimos:
jogar, instrução, som (fica
invisível) e notificação.

6. Na barra direita em propriedade, você pode "configurar"

os elementos: cor de fundo, tamanho da fonte, estilo da
fonte, incluir imagens, altura e outros.
 DEFININDO A
INTERFACE

7. Para cada pergunta foi inserido um botão (com

respostas: uma certa e demais erradas).

8. Na tela 2 (screen 2) incluímos: pular, dica, pontos

(caixa onde aparecem as pontuações por questões)
marcados por uma seta verde).
Ambiente de Designer

Dentro do ambiente Designer, no

item Paleta e no subitem Interface
de usuário, os principais
componentes que podem ser
inseridos no Visualizador são:
✓ Botão: este é o ícone mais
comum nos aplicativos e representa
realmente uma ação concreta que
deverá ser programada que será
acionada através de um clique do
usuário.
✓ Caixa de Seleção: será usada
para o usuário selecionar alguma
opção ou funcionalidade do
aplicativo.
 DEFININDO A
INTERFACE

✓ Escolhe Data: servirá para inserir a opção de

escolher a data, se o aplicativo necessitar dessa
função.
✓ Imagem: muitas das aplicações, sobretudo em apps
mais simples serão apresentadas em forma de
imagem, nesta opção o usuário irá configurar a forma
como ela aparecerá dependendo da função que se
tenha pensado.
✓ Legenda: insere texto em qualquer parte do
designer do app.
✓ Escolhe Lista: permitirá a função de escolher entre
diversos trechos de textos (Opções).
✓ Visualizador de Listas: permite disponibilizar textos
para serem visualizados na tela.
 DEFININDO A
INTERFACE

✓ Notificador: mostra sinais de alerta ao usuário no

Screen.
✓ Caixa de Senha: possibilita a função de digitação
de senhas.
✓ Deslizador: faz a inserção de uma barra de
progresso que pode ser arrastada.
✓ Lista Suspensa: insere um pop-up.
✓ Switch: funciona como um tipo de interruptor que
altera algumas características do app.
✓ Caixa de Texto: possibilita ao usuário inserir
informações como, por exemplo, texto.
✓ Escolhe Hora: permitirá o usuário escolher um
horário.
✓ Navegador Web: oferecerá a possibilidade de o
usuário acessar um site específico.
 DEFININDO A
INTERFACE

Dentro da Paleta existe também um recurso que

permite organizar os botões, legendas, caixa de texto,
entre outros, e tudo que é necessário incluir na tela,
são os organizadores, que podem ser do modelo
horizontal, vertical ou por tabela, conforme ilustra a
Figura abaixo.
 Ambiente de Programação
de Blocos

No canto superior direito você verá duas opções:

designer e blocos. Para construção de um App, o
usuário terá que realizar configurações em dois
ambientes do App Inventor 2:
✓ Designer: apresenta como ficará a interface do
aplicativo;
✓ Blocos: permite a programação do funcionamento
do aplicativo;
Durante a construção, o usuário não precisa concluir
nenhumas dessas fases, pode trabalhar em ambas
paralelamente.
 DEFININDO A
INTERFACE

Figura 2 - Ambiente Blocos

O ambiente blocos é o local que permiti programar o

funcionamento dos botões e componentes que foram
projetados no Designer, de modo a possibilitar o
funcionamento do aplicativo desenvolvido.
Neste local existem blocos Built-in (embutidos) que
manipulam operações matemáticas, lógicas e textos,
que facilitam as conexões com outros blocos, que
podem ser puxados e arrastados, conectando-se de
maneira espontânea com funções mais complexas.
É importante que se inicie o desenvolvimento do
aplicativo a partir do ambiente.
No ambiente blocos inserimos os ajustes necessários
dos comandos a serem executados no quiz
Virusbacter, como: a notificações de erro e acertos,
quando acertar a questão, passar para próxima etapa,
o acúmulo dos pontos ao longo do percurso do quiz, e
ao final do quiz, a inserção de botão de jogar
novamente.
 DEFININDO A
INTERFACE

Designer, pois ao entrar no ambiente blocos, já surgirão os

botões, imagens e outros, os quais deverão ser
programados para que haja o funcionamento do aplicativo.
A Figura 2 exibe, a tela 2 (screen 2), com o visual dentro
desse ambiente da pergunta de número 2 do Quiz
Vírusbacter.
No lado esquerdo da tela encontramos os blocos que são
organizados por classes: controle, lógica, matemática,
texto, listas, cores, procedimentos. Cada uma dessas
classes tem uma função.
A figura 2, exibe a barra esquerda com algumas das
classes de blocos do App Inventor 2 usadas no projeto.
Em seguida descrevemos as funções de cada uma:
✓ Controle: função como “se, senão”, dentre outras.
✓ Lógica: dá a outros comandos resultados lógicos, como
verdadeiro e falso ou testes de comparações (maior,
menor, igual, diferente, entre outros).

Saiba mais em: Como construir Apps?

 DEFININDO A
INTERFACE

✓Matemática: propicia o uso das operações matemáticas

de adição, subtração, multiplicação e divisão e também
configurar outros tipos de funções matemáticas. Além
disso, possibilita a construção de equações.
✓ Texto: possui caixas de texto que são apresentadas ao
usuário após comandos e possibilitam mensurar, por
exemplo, medidas de comprimento, e também possibilita
acrescentar mensagens nos notificadores.
✓ Listas: são comumente utilizadas para compor banco
de dados ou múltiplos textos inseridos.
✓ Cores: possibilita alterar a cor dos itens após um teste
lógico, por exemplo.
✓ Variáveis: possibilita modificar alguma função de item
após determinado procedimento e também favorece o
controle de valores que são inseridos na parte
matemática.
✓ Procedimentos: faz o gerenciamento de um
procedimento que será desencadeado após alguma ação
do usuário do aplicativo.

Saiba mais em: Como construir o ambiente de blocos?

 Como gamificar na
Educação?

O design ou planejamento de gamificação é caracterizado

por uma série de eventos que resultam em uma estratégia
gamificada, na qual é uma ação específica relacionada aos
elementos do jogo (TODA et al., 2018).

Assim sendo, o processo proposto, como descrito na figura 3

foi divididos em 4 etapas, sendo: Definição do conteúdo,
Definição de Elementos de Jogos, Implantação e Validação
(TODA et al., 2016).

Figura 3. Apresenta o fluxo resumido do processo e suas respectivas fases.

Fonte: Toda e Isotani (2016).

Mediante isto, o professor pode, a partir de um plano de

aula e/ou ementa como entrada, gerar um design
gamificado para ser aplicado em conjunto com a sua
prática tradicional de ensino, podendo gamificar desde
uma atividade, até uma aula inteira ou um curso de longa
duração (TODA et al., 2016).

Saiba mais em: O que é gamificação?

 Produto Educacional
Quiz gamificado:
Vírusbacter

O Produto Educacional (PE), quiz gamificado:

Virusbacter com o objetivo desenvolver um jogo como
material potencialmente significativo ao ensino sobre
vírus e bactérias com estudantes do ensino técnico
integrado ao ensino médio do IFMS, Campus Corumbá.
O software usado foi App Inventor 2, disponível em:
[Link] App Inventor é um serviço
gratuito baseado em nuvem que permite que sejam feitos
aplicativos móveis individuais, usando uma linguagem de
programação baseada em blocos. Você cria um Apps
selecionando componentes para o seu aplicativo e
montando blocos que especificam como os componentes
devem se comportar.
É um software web criado pela universidade americana
Massachusetts Institute of Technology (MIT) que permite
desenvolver aplicativos Android usando um navegador
da Web e um telefone ou emulador conectados.
O quiz Virusbacter é aplicativo com alguns elementos do
jogo (gamificação), com luz na teoria de Ausubel (1963).

Saiba mais em: O que é o MIT?

 Produto Educacional
Quiz gamificado:
Vírusbacter

Para testar o aplicativo com os estudantes, seguiu-se as

etapas:
1) Baixou e instalou o aplicativo MIT App Inventor
Companion (MIT AI2 Campanion), através do Google Play
Store do dispositivo Android (celular).

2) Conectou-se o computador da pesquisadora, no qual

estava executando o App Inventor, com o dispositivo do
estudante que estava executando o Companion (ambos
conectados mesma rede Wi-Fi).

3) A pesquisadora abriu o projeto previamente criado no

App Inventor: Quizz_virusbacter. Em seguida, escolheu
“Connect” e “AI Companion” no menu superior do
navegador, posterior, solicitou ao estudante para apontar o
conecte-o ao seu dispositivo via: código ou QRCode com o
uso do app MIT AI2 Campanion (FIGURA 3 e 4).

Saiba mais em: APLICATIVO NO APP INVENTOR 2

 Produto Educacional
Quiz gamificado:
Vírusbacter

Figura 3. Tela inicial com abertura da página do projeto, em seguida a

conexão “pareamento” entre a página e o dispositivo do estudante via
Assistente AI, como indicado pela seta em cor verde. Fonte: A autora,
2023.

Figura 4. Tela após a geração do código a ser usado no dispositivo

do estudante para baixar o aplicativo do Quiz Vírusbacter. Fonte: A
autora, 2023.
 Produto Educacional
Quiz gamificado:
Vírusbacter

4) Após o download do aplicativo: Quiz VírusBacter (jogo

digital), em seu dispositivo móvel, o estudante iniciou o
jogo (FIGURA 5 A, B, C).

Figura 5. A) Estudante executando o Quiz Vírusbacter; B) Tela

inicial do jogo digital Vírusbacter; C. Interface do jogo digital:
Vírusbacter, com questões a serem respondidas.
Fonte: Dados da pesquisa (2023).

5. Após o teste realizado pelos estudantes das turmas do

terceiro semestre (curso de Metalurgia) e do quarto
semestre (curso de Informática), o quiz gamificado foi
revisado e publicado na galeria, conforme mostrado na
figura 6.

Saiba mais em: O que é um Quiz?

 Produto Educacional
Quiz gamificado:
Vírusbacter

Figura 6. Pulicar na galeria. Fonte:

A autora, 2023.
Figura 7. Preencher dados do App.
Fonte: A autora, 2023.

6) Depois de clicar em publicar na galeria, abrirá uma nova

página para você preencher: insira o nome do seu App,
descrição, créditos, a foto inicial do seu App e clique em
enviar (Figura 7).
7) Posterior ao envio, você encontrará o seu App na
galeria via pesquisa pelo nome ou via na opção meus
apps (Figura 8).

Saiba mais em: Como criar um quiz online gratuito?

 Produto Educacional
Quiz gamificado:
Vírusbacter

Você pode atualizar sempre que fizer alguma mudança

em seu App. Verifique se deseja que seu aplicativo seja
localizável com uma pesquisa: marque a quadrícula.
Confira o quiz Virusbacter no link permanente:
[Link]
8961-4f57-ba07- c0d6aedd92ab da galeria.

Figura [Link] do Inventor de Aplicativos do MIT. Fonte: A autora,

2023.

Saiba mais em: [Link]

 Produto Educacional
Quiz gamificado:
Vírusbacter

8) Foi realizado uma avaliação do produto educacional

(PE): Quiz Vírusbacter. O jogo foi avaliado por 45
estudantes de ambas turmas do curso de informática e
metalurgia.
Nesta avaliação, que constou com questões abertas, os
estudantes responderam aspectos relacionados a:
designer do jogo, conteúdo, aprendizagem e pontos
positivos/negativos (Figura 9).
Obtivemos resultados satisfatórios relacionados a boa
aceitação dos estudantes, sendo que 51% concedeu
feedback positivo.

Figura 9. Infográfico com dados referente a validação do produto

educacional (PE). Fonte: Dados da pesquisa (2023).
 Produto Educacional
Quiz gamificado:
Vírusbacter

9) Configurando sua sala de aula:

[Link]
A maneira mais comum de os alunos usarem o App
Inventor é estabelecer uma conexão entre um
computador da sala de aula e um dispositivo móvel por
Wi-Fi, conforme descrito nas instruções gerais de
configuração. Em muitas salas de aula, o App Inventor
funciona sem problemas. Uma boa maneira de testar a
rede da sua sala de aula é seguir um tutoriais
introdutórios da Hora do Código . Se um computador de
sala de aula e um dispositivo móvel podem se conectar
via Wi-Fi com um desses aplicativos básicos, é provável
que ele possa se conectar com qualquer aplicativo.

Saiba mais em: [Link]

explore/hour-of-code
 Produto Educacional
Quiz gamificado:
Vírusbacter

Instalando e executando o emulador

10) Caso o estudante não tenha aparelho móvel (telefone

ou tablet iOS ou Android), ainda poderá criar aplicativos
com o App Inventor.
O App Inventor fornece um emulador de celular, que
funciona como um dispositivo Android, mas aparece na tela
do computador. Assim, você pode testar seus aplicativos
em um emulador e ainda distribuir o aplicativo para outras
pessoas, até mesmo através da Google Play Store.
Algumas escolas e programas extracurriculares são
desenvolvidos principalmente em emuladores e fornecem
alguns telefones iOS ou Android para teste final.

Saiba mais em:

[Link]
 Produto Educacional
Quiz gamificado:
Vírusbacter

Para usar o emulador, primeiro você precisa instalar algum

software em seu computador (isso não é necessário para
testar aplicativos com um dispositivo móvel e Wi-Fi).
Siga as instruções abaixo para o seu sistema operacional e
volte a esta página para iniciar o emulador
Importante: Se você estiver atualizando uma instalação
anterior do software emulador/USB do App Inventor,
consulte Como atualizar o software emulador do App
Inventor .
Você pode verificar se o seu computador está executando
a versão mais recente do software visitando a página de
teste do componente de software emulador/USB, aiStarter .
Etapa 1. Instale o software de configuração do App
Inventor
Instruções para Mac OS X
Instruções para Windows
Instruções para GNU/Linux

Saiba mais em:

[Link]
 Produto Educacional
Quiz gamificado:
Vírusbacter

Etapa 2. Inicie o aiStarter (somente Windows e GNU/Linux)

O uso do emulador ou do cabo USB requer o uso de um
programa chamado aiStarter .
Este programa é o auxiliar que permite ao navegador se
comunicar com o emulador ou cabo USB. O programa
aiStarter foi instalado quando você instalou o pacote de
configuração do App Inventor. Você não precisa do
aiStarter se estiver usando apenas o companheiro sem fio.
Em um Mac, o aiStarter será iniciado automaticamente
quando você fizer login na sua conta e será executado
de forma invisível em segundo plano.
No Windows, haverá atalhos para o aiStarter na sua
área de trabalho, no menu Iniciar, em Todos os
Programas e na Pasta de Inicialização. Se quiser usar
o emulador com o App Inventor, você precisará iniciar
manualmente o aiStarter em seu computador ao fazer
login. Você pode iniciar o aiStarter clicando no ícone
em sua área de trabalho ou usando a entrada em seu
menu iniciar.

Fonte: [Link]
 Produto Educacional
Quiz gamificado:
Vírusbacter

Para iniciar o aiStarter no Windows, clique duas vezes no

ícone (mostrado acima). Você saberá que iniciou com
sucesso o aiStarter quando vir uma janela como a
seguinte:

Fonte: [Link]

No GNU/Linux, o aiStarter estará na pasta

/usr/google/appinventor/commands-for-Appinventor e você
precisará iniciá-lo manualmente. Você pode iniciá-lo a partir
da linha de comando com
/usr/google/appinventor/commands-forappinventor/aiStarter
&
 Produto Educacional
Quiz gamificado:
Vírusbacter

Etapa 3. Abra um projeto do App Inventor e conecte-o ao

emulador
Primeiro, vá para o App Inventor e abra um projeto (ou crie
um novo - use Projeto > Iniciar novo projeto e dê um nome
ao seu projeto).
Em seguida, no menu do App Inventor (no software
baseado em nuvem App Inventor em
[Link] ), vá para o menu Conectar e
clique na opção Emulador.
 Produto Educacional
Quiz gamificado:
Vírusbacter

Você receberá um aviso informando que o emulador está

se conectando. Iniciar o emulador pode levar alguns
minutos. Você poderá ver telas de atualização como as
seguintes quando o emulador for inicializado:

Fonte: [Link]

O emulador aparecerá inicialmente com uma tela preta

vazia (#1). Aguarde até que o emulador esteja pronto, com
fundo de tela colorido (#2).

Fonte: [Link]
 Produto Educacional
Quiz gamificado:
Vírusbacter

Mesmo depois que o plano de fundo aparecer, você deve

esperar até que o telefone emulado termine de preparar
seu cartão SD: haverá um aviso na parte superior da tela
do telefone enquanto o cartão está sendo preparado.
Quando conectado, o emulador será iniciado e mostrará o
aplicativo que você abriu no App Inventor.
Se esta for a primeira vez que usa o emulador após instalá-
lo, você verá uma mensagem solicitando a atualização.
Siga as instruções abaixo ("Solução de problemas") para
realizar a atualização e reconectar o emulador.
Você precisará de atualização sempre que houver uma
nova versão do App Inventor Companion.
Para problemas com o aiStarter, ou se o emulador não se
conectar, vá para Connection Help para obter informações
sobre o que pode estar errado.
 Produto Educacional
Quiz gamificado:
Vírusbacter

11) Posterior a revisão do quiz gamificado: Virusbacter,

este foi publicado na EduCapes:
[Link] em Apps para
aparelho móveis, aberto ao público em geral.

Tipo de Licença: Creative Commons

12) Link na EduCapes: [Link]

 REFERÊNCIAS

AUSUBEL, D. P., NOVAK, J. D.; HANESIAN, H.

Psicologia educacional. Rio de Janeiro:
Interamericana.1980. 282 p.

TODA, A. M.; ISOTANI, S. Um processo para geração de

designs gamificados para o ensino. In:
IworkshopdeEducaçãoDigitaleInterativa(WEDI).[S.l.:s.n.],
2016. Citationsonpages 27, 43, and 44. Disponível em:
<[Link]
processo_para_geracao_de_designs_gamificados_para_o
ensino>. Acesso em: 01 ago. 2023.