Quiz: Programar Aplicações Educativas

Publicado em 25 de Maio, 2022 por Luís Moreira

Sobre o tutorial

Nesse tutorial vamos criar uma aplicação de Quiz.  A app apresentará diversos ecrãs, um de início informar o que a aplicação faz e um botão para o caso do utilizador querer começar a utilizar. Os seguintes ecrãs apresentarão ao utilizador perguntas e opções de resposta. Ao selecionar uma resposta, o utilizador será redirecionado a outras perguntas e, no final, será apresentado o número de respostas corretas que obteve.

Para esse tutorial serão necessários os seguintes conceitos:
Vamos começar: criando novo projeto
  1. Aceda o site: https://appinventor.mit.edu/
  2. Clique em “Create apps” (canto superior direito do ecrã)
  3. Faça login com seu Gmail ou crie uma nova conta.
  4. Leia os termos de uso
  5. Mude para Português caso pretenda – no canto superior direito do ecrã
  6. Clique em “Iniciar novo projeto” e defina um nome para seu jogo

Programando Ecrã 1

No primeira ecrã teremos 2 elementos:  uma legenda e um botão para começar. Neste ecrã queremos que quando o utilizador clicar no botão, o aplicativo mude de ecrã.

  1. Use a Paleta -> Interface de Usuário para colocar a legenda e o botão no Ecrã.
  2. Na aba Componentes -> Renomeie cada componente de acordo com sua finalidade:
    • legenda1 -> Título
    • botão1 -> começar
  3. Na aba Componentes clique em legenda1 e  altere o texto para “Teste de conhecimentos gerais.” na aba Propriedades.
    1. Na aba Componentes clique em Botão 1 e  altere o texto para “INICIAR” na aba Propriedades.
  4. Na aba Componentes clique em Screen1 e selecione o AlinhamentoHorizontal: Centro e o AlinhamentoVertical: Centro na aba Propriedades.
  5. Clique em “Adicionar Ecrã…“, confirme e crie uma ecrã com nome: “Screen2“.
  6. Selecione Screen1 para programar a mudança de ecrã.
  7. Na aba Blocos vamos programar o botão de começar.
    1. Selecione o Botão “começar” e escolha a opção para programá-lo: “Quando… Clique”.
    2. Para mudarmos de ecrã, selecione Controle e escolha o bloco “abrir outra ecrã nomeDoEcrã”
    3. Clique em texto e seleciona a opção ” “. Quando encaixada digite o nome da ecrã (Screen2).

Programar Ecrã 2

Na segunda ecrã teremos 4 elementos:  duas legendas  e duas caixas de seleção. Neste ecrã queremos que quando o utilizador selecione uma das opções de resposta. Se o que for selecionado for a resposta correta, queremos que o jogador aumente sua pontuação em uma unidade.

  1. Na aba Componentes -> selecione Screen2
    1. Aba Propriedades
      1. Imagem de fundo
        1. Enviar aquivo
          1. Escolher arquivo
            1. OK
  1. Use a Paleta -> Interface de Usuário para colocar a legenda e as duas caixas de seleção na ecrã.
  2. Na aba Componentes -> Renomeie cada componente de acordo com sua finalidade:
    • legenda1 – pergunta
    • CaixaDeSeleção1 – resposta1
    • CaixaDeSeleção2 – resposta2
    • legenda2 – gabarito
  3. Na aba Componentes clique em “pergunta” e  altere o texto para a pergunta que deseja fazer na aba Propriedades.
  4. Na aba Componentes clique em resposta1 e  altere o texto para “Verdadeiro.” na aba Propriedades.
  5. Na aba Componentes clique em resposta2 e  altere o texto para “Falso.” na aba Propriedades.
  6. Na aba Componentes clique em gabarito e altere o texto para “…”.
  7. Na aba Componentes clique em Screen2 e selecione o AlinhamentoHorizontal: Centro na aba Propriedades.
  8. Na aba Blocos vamos programar:
  9. Crie uma variável que armazenará a informação dos pontos do jogador. Selecione “Variáveis” nos Blocos e arraste para o visualizador o bloco “inicializar global … para”. Altere, no próprio bloco, o valor da variável para “pontos”.
  10. Na aba “Matemática” selecione o primeiro bloco, com o valor numérico 0 e encaixe no final do bloco laranja selecionado no passo anterior. Isso fará com que a variável pontos assuma valor 0 quando iniciar o programa.
  11. Selecione a legenda “resposta1” e clique na opção: “quando….Alterado…fazer” e arraste para a ecrã.
  12. Supondo que a “resposta1” é a correta, selecione “gabarito”, selecione “ajustar gabarito.Texto para…” e encaixe no bloco anterior.
  13. Selecione na parte “Texto” um texto vazio e encaixe no último bloco, alterando o valor do bloco rosa para “Acertou”.
  14. Para somar pontos ao jogador, precisamos alterar o valor da variável “pontos” criada no início. Queremos que isso aconteça somente quando o usuário selecionar a resposta correta. Clicamos então em “Variáveis” e selecionamos “ajustar… para…”. Encaixe esse bloco logo abaixo do bloco verde criado no passo anterior e ajuste o valor do espaço vazio para a variável “global pontos”.
  15. Selecione Matemática e encaixe o bloco de soma no final do último bloco criado. Complete os dois espaços vazios com a variável e o valor 1. Isso fará com que seja adicionado um ponto à variável pontos. Para isso, vá em Variáveis e selecione o bloco “obter…”. Vá em Matemática e selecione o bloco em branco, alterando seu valor para 1
        
  16. Agora, crie uma terceira ecrã.
  17. Ainda na segunda ecrã, queremos que, após selecionar a resposta correta, o usuário seja direcionado para a próxima página. Para isso, selecionaremos o bloco “abrir outra ecrã com valor inicial nome da ecrã…. valorInicial…”, em Controle. Em valor inicial encaixaremos a variável dos pontos. Para o nome da Ecrã, faremos o mesmo procedimento da ecrã anterior, selecionando uma caixa de texto vazia e inserindo o valor Screen3.
  18. Agora, vamos repetir o mesmo que foi feito anteriormente, mas para o caso do usuário selecionar a caixa de seleção com a resposta errada. A única diferença é que o texto do gabarito será alterado para “Errou” e não será feito ajuste da variável global dos pontos.
  19. Agora, vamos programar a terceira ecrã. Selecione em Variáveis o bloco “inicializar global pontos para…”. Encaixe o bloco “obter valor inicial”, encontrado em Controle e encaixe-o no bloco laranja anterior. Tente agora programar uma próxima pergunta, fazendo o análogo dos passos anteriores. Lembre-se de programar a interface.
  20. Faça agora uma próxima ecrã, que dará o resultado final de pontuação.
  21. Crie duas legendas. Na primeira, altere seu valor para “resultado” e o texto para “pontos: “. Deixe a segunda legenda com nome “valor” e seu texto em branco.
  22. Na parte de blocos, agora  selecione em Variáveis o bloco “inicializar global pontos para…”. Encaixe o bloco “obter valor inicial”, encontrado em Controle e encaixe-o no bloco laranja anterior.
  23. Agora finalize o programa e exponha o valor da variável pontos:
Sugestões de perguntas
 
1) Em qual local da Ásia em que o português é língua oficial?
a) Índia    b) Filipinas    c) Moçambique    d) Macau
2) Qual o nome do presidente do Brasil que ficou conhecido como Jango?
a) Jânio Quadros    b) Getúlio Vargas    c) João Figueiredo    d) João Goulart
3) A metade do dobro de uma dúzia é?
a) 6    b) 8    c) 12    d) 24
4) O avião que ultrapassa a velocidade do som é?
a) Sônico    b) Ultrassônico    c) Hipersônico    d) Supersônico
5) Qual o nome do cão do Mickey?
a) Pateta    b) Scooby-doo    c) Pluto    d) Bidu
6) Qual o menor país do mundo?
a) Mônaco    b) Vaticano    c) Nauru    d) Guiné-Bissau
7) O que é mais pesado? Uma tonelada de ouro, uma tonelada de diamante ou uma tonelada de algodão?
a) Ouro    b) Diamante    c) Algodão    d) Nenhuma das repostas
8) Que meses têm 29 dias num ano bissexto?
a) Março    b)Fevereiro    c) Janeiro    d) Todos
9) Qual desses personagens tem supervelocidade?
a) Flash    b) Homem de ferro    c) Batman    d) Hulk
10) Qual o quinto planeta do sistema solar?
a) Júpiter    b) Urano    c) Terra    d) Marte
Como testar o seu App
 
Poderá testar a sua App no smartphone ou tablet Android ou no computador.
No smartphone ou tablet Android:
  1. Instale o aplicativo MIT AI2 COMPANION no seu smartphone ou tablet Android
  2. No site do MIT App Inventor, no menu superior clique em Conectar -> Assistente AI
  3. Use o smartphone ou tablet para ler o QR code ou digite o código gerado

No computador (caso não tenha um aparelho Android):

  1. Instale o emulador
  2. No site do MIT App Inventor, no meu superior clique em Conectar -> Emulador
Como instalar o App no Android
 
Para instalar a versão final do seu aplicativo no seu smartphone ou tablet Android:
  1. No site do MIT App Inventor, no menu superior clique em Compilar -> App (Fornecer QR Code para .apk)
  2. Use o aplicativo MIT AI2 COMPANION para ler o QR code ou digite o código gerado
  3. Prosseguir a instalação
Para saber como publicar a sua aplicação, clique aqui
Esta entrada foi publicada em Recursos Educativos. ligação permanente.

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *