TUTORIAL 3

H5P
para Cursos de EaD da UAB/UFSC

José Antonio de Oliveira

Patrícia de Andrade Paines
Equipe da UAB/Lantec

Organização:
CRÉDITOS

Autores
José Antonio de Oliveira
Patrícia de Andrade Paines

Equipe conteudista UAB/LANTEC

Caroline Elisa Murr
Danielle Vanessa Costa Sousa
Gabriel Neves Ferrari
Gisele Kristina dos Santos Varela
José Antonio de Oliveira
Letícia Fernandes
Marcelo D’Aquino Rosa
Patrícia de Andrade Paines

Revisão
Claudio Borrelli - Revisor de Textos

Capa e diagramação
Pamela Angst

UFSC
Ubaldo Cesar Balthazar - Reitor
Alacoque Lorenzini Erdmann - Vice-reitora
SEAD
Luciano Patrício Souza de Castro - Secretário de Educação a Distância

Núcleo UAB
Rafael Pereira Ocampo Moré - Coordenador
Isaias Scalabrin Bianchi - Coordenador Adjunto

LANTEC
Elizandro Mauricio Brick - Coordenador
André Ary Leonel - Subcoordenador
Maria Carolina Machado Magnus - Coordenadora Núcleo Formação
Juliano Camillo - Coordenador Núcleo de Pesquisa e Avaliação
Silvio Domingos Mendes Silva - Coordenador Núcleo de Criação e
Desenvolvimento de Materiais
Atribuição - Não Comercial 4.0 Internacional (CC BY-NC 4.0)

O conteúdo está licenciado pelo Creative Commons Atribuição-Não Comercial

4.0 Internacional (“Licença Pública”). Essa licença permite que outros
compartihem, adaptem e criem obras derivadas sobre a obra sendo vedado
o uso com fins comerciais. As novas obras devem atribuir o devido crédito,
fornecer um link para a licença, e indicar se foram feitas alterações.

Catalogação na fonte pela Biblioteca Universitária da

Universidade Federal de Santa Catarina

O48h

Oliveira, José Antonio de.

H5P [recurso eletrônico] : para cursos de EAD da UAB/UFSC /
José Antonio de Oliveira, Patrícia de Andrade Paines. – Florianópolis :
UFSC : UAB, 2020.
151 p. : il. – (Tutoriais Lantec ; n. 3)

E-book (PDF).

1. HTML (Linguagem de marcação de documento). 2. Sites da

Web – Desenvolvimento. 3. Educação. 4. Aprendizagem. I. Paines,
Patrícia de Andrade. II. Título. III. Série.

CDU 681.31.06
Elaborada pela bibliotecária Suélen Andrade – CRB-14/1666
SUMÁRIO

CRÉDITOS......................................................................................................2
SUMÁRIO.......................................................................................................5
1. O que é o H5P?.........................................................................................7
1.1 O que podemos fazer com o H5P?........................................................8
1.2 Vantagens e benefícios da ferramenta H5P..........................................9
2. Inserindo o H5P no Moodle e explorando seus conteúdos.................12
3. Conteúdos e atividades do H5P – sugestões de uso..........................20
3.1 Accordion..............................................................................................20
3.2 Agamotto (Image Blender)...................................................................23
3.3 Arithmetic Quiz.....................................................................................25
3.4 Audio.....................................................................................................27
3.5 Audio Recorder......................................................................................29
3.6 Branching Scenario (beta)...................................................................33
3.7 Chart......................................................................................................36
3.8 Collage...................................................................................................38
3.9 Column ..................................................................................................40
3.10 Course Presentation...........................................................................43
3.11 Dialog Cards........................................................................................46
3.12 Dictation..............................................................................................49
3.13 Documentation Tool...........................................................................52
3.14 Drag and Drop.....................................................................................55
3.15 Drag the Words....................................................................................57
3.16 Essay....................................................................................................59
3.17 Fill in the Blanks..................................................................................61
3.18 Find Multiple Hotspots.......................................................................63
3.19 Find the Hotspots ...............................................................................65
3.20 Find the Words....................................................................................67
3.21 Flashcards...........................................................................................69
3.22 Guess the Answer................................................................................71
3.23 Iframe Embedder.................................................................................79
3.24 Image Hotspots...................................................................................84
3.25 Image Juxtaposição...........................................................................92
3.26 Image Pairing......................................................................................98
3.27 Image Sequencing............................................................................100
3.28 Image Slider......................................................................................102
3.29 Interactive Video...............................................................................105
3.30 Mark the Words................................................................................109
3.31 Memory Game..................................................................................111
3.32 Multiple Choice.................................................................................114
3.33 Personality Quiz...............................................................................122
3.34 Quiz (Question Set)..........................................................................125
3.36 Speak the Words...............................................................................131
3.37 Speak the Words Set........................................................................132
3.38 Summary...........................................................................................135
3.39 Timeline.............................................................................................138
3.40 True/False Questions.......................................................................141
3.41 Twitter User Feed .............................................................................142
3.42 Virtual Tour (360).............................................................................144
3.43 [Link] for Chat and Talk..............................................................146
Considerações Finais...............................................................................150
REFERÊNCIAS............................................................................................151
1. O que é o H5P?

O H5P é uma estrutura (framework) de colaboração de conteúdo gratuita e

de código aberto, baseada em JavaScript. A sigla H5P, abreviação de HTML5
Package, visa facilitar a criação, compartilhamento e reutilização de conteúdo
interativo em HTML5. Os conteúdos gerados têm suas potencialidades para
as atividades de ensino.

Figura 1- página inicial do H5P.

Fonte: Autores (2020).

Já foram desenvolvidas muitas atividades, dentre as quais vários vídeos,

cronogramas e apresentações interativos, testes e muito mais. Tudo isso –
concebido e compartilhado usando o H5P – está disponível no site oficial:
[Link] (Figura 1).

O [Link] é o site da comunidade, onde as bibliotecas, aplicativos e tipos

H5P para Cursos de EaD da UAB/UFSC 7

de conteúdo do H5P podem ser compartilhados. Os aplicativos e tipos
de conteúdo do H5P funcionam da mesma maneira em todos os sites
compatíveis.

Atualmente, existem basicamente quatro plataformas que suportam o H5P:

• Drupal (framework modular é um sistema de gerenciamento de conteúdo

escrito em PHP, que permite criar e organizar conteúdo, manipular a
aparência, automatizar tarefas administrativas e definir permissões e
papéis para usuários e colaboradores);

• WordPress;

• Tiki (pacote para trabalhar em colaboração online???);

• Moodle.

As integrações da plataforma incluem o código H5P genérico, bem como

implementações de interface e código específico necessário para integrar
o H5P às plataformas. O H5P foi projetado para ter um mínimo de código
específico da plataforma e um mínimo de código de back-end – a maior parte
do código é JavaScript. O objetivo é facilitar a integração do H5P com novas
plataformas.

Seu formato consiste de um arquivo de metadados no padrão JSON, vários

arquivos de biblioteca que fornecem recursos e design para o conteúdo e
uma pasta em que o material textual é armazenado no formato JSON e a
multimídia é mantida como arquivos ou links para arquivos em sites externos.

1.1 O que podemos fazer com o H5P?

Ao trabalhar com o módulo de atividade do H5P, você pode criar conteúdo

interativo, como vídeos, conjuntos de perguntas, perguntas de “arrastar e

H5P para Cursos de EaD da UAB/UFSC 8

soltar” e de múltipla escolha, apresentações e muito mais. Além de ser uma
ferramenta de criação de conteúdo sofisticado, o H5P permite importar e
exportar arquivos H5P para reutilização e compartilhamento efetivos de
conteúdo. As interações e pontuações do usuário são rastreadas usando o
xAPI, e as notas podem estar disponíveis no Quadro de Notas do Moodle, se
assim for configurado.

Você adiciona conteúdo H5P interativo usando a ferramenta de criação

interna ou carregando arquivos H5P encontrados em outros sites habilitados
para o H5P. Dada a sua usabilidade, o H5P já está sendo utilizado em vários
sites pelo mundo.

Junto às potencialidades do H5P, soma-se o apoio financeiro da Mozilla

Foundation dentro do programa MOSS. O editor baseado na Web é, por
padrão, capaz de adicionar e substituir arquivos de multimídia e conteúdo
textual em todos os tipos de aplicativos e de conteúdo H5P. Além disso,
um tipo de conteúdo pode fornecer widgets personalizados para o editor,
permitindo grande variedades de edição.

A estrutura consiste de um editor de conteúdo baseado na Web, um site para

compartilhar tipos de conteúdo, plugins para sistemas de gerenciamento de
conteúdo existentes e um formato de arquivo para agrupar recursos HTML5.

1.2 Vantagens e benefícios da ferramenta H5P

O H5P é uma comunidade dinâmica e está constantemente melhorando e

mudando. Novos tipos de conteúdo interativo são adicionados regularmente
na plataforma H5P. Seu uso permite que o usuário-professor crie conteúdos
divertidos e envolventes para a sua disciplina nos cursos EaD-Moodle.

Para a Educação a Distância (EaD), o potencial dos tipos de conteúdo

H5P para Cursos de EaD da UAB/UFSC 9

disponíveis da ferramenta H5P enriquecem docentes e produtores de
conteúdo, na elaboração rápida e versátil de materiais para implementação
em Ambientes Virtuais de Ensino-Aprendizagem.

A seguir, acompanhe algumas vantagens e benefícios do uso da ferramenta

H5P nos cursos EaD-Moodle.

Vantagens da ferramenta H5P:

1. flexibilidade de tempo e espaço;

2. redução do tempo necessário para o aprendizado;

3. facilidade de atualizar conteúdos;

4. foco no aluno e em suas necessidades de aprendizagem;

5. possibilidade de personalizar conteúdos;

6. possibilidade de criar atividades com um custo reduzido em relação às

ferramentas proprietárias;

7. possibilidade de acompanhar o rendimento dos alunos por meio de

relatórios e notas.

Atenção: não são todas as atividades que permitem esta ação até o momento.

Benefícios de aderir ao H5P:

1. código aberto e livre para usar;

2. crie, edite e publique conteúdo em um navegador padrão;

3. nenhuma instalação de software local ou plugins de usuário final;

4. o conteúdo é HTML5 e compatível com dispositivos móveis;

5. permite que seu LMS ou CMS existente crie conteúdo HTML5 interativo

H5P para Cursos de EaD da UAB/UFSC 10

 e rico;

6. o conteúdo é empacotado em um único arquivo; fácil de administrar e

mover entre sites;

7. atualize uma, atualize todas as funcionalidades;

8. otimizado para creditar conteúdo multimídia licenciado;

9. amplie ou crie seus próprios tipos de conteúdo e aplicativos

personalizados;

10. uma comunidade em que seus usuários podem compartilhar

conhecimento, tipos de conteúdo e código;

11. vários tipos de conteúdo já estão disponíveis atualmente; muito mais

está em desenvolvimento;

O H5P tem o potencial de gerar conteúdo rico, facilitando muito sua

reutilização entre criadores de material educacional, proporcionando recursos
digitais interativos sem a necessidade de domínio de conhecimentos de
programação.

H5P para Cursos de EaD da UAB/UFSC 11

2. Inserindo o H5P no Moodle e explorando
seus conteúdos

Para utilizar o H5P na Plataforma Moodle, você vai ao tópico da disciplina

em que quer instalar a atividade. Na Figura 2, está um tópico de disciplina do
Moodle que foi renomeado como “Testes de Funcionalidade do H5P”.

Figura 2 - tópico de disciplina.

Fonte: Autores (2020).

Note que existe a opção de Adicionar uma atividade ou recurso, a qual, em

geral, já é conhecida pelos usuários e disponibiliza uma variedade grande de
atividades/recursos – mas há novas atividades, como o H5P, que é o nosso
interesse aqui.

Então, ao entrar para adicionar a atividade, você encontrará a opção de incluir

o H5P, na lista de opções ilustrada na Figura 3.

H5P para Cursos de EaD da UAB/UFSC 12

Figura 3 - lista de atividades ou recursos do Moodle

Fonte: Autores (2020).

Na Figura 3, a quinta atividade é a H5P (quadrado preto com H5P dentro).

Clique na opção de atividade H5P, e ela ficará selecionada, como ilustra a

Figura 4.

H5P para Cursos de EaD da UAB/UFSC 13

Figura 4 - H5P selecionado.

Fonte: Autores (2020).

Agora, basta clicar em Adicionar para que a atividade seja inserida no tópico
escolhido no Moodle. Feito isso, vai aparecer uma nova janela, informando
que está sendo adicionado um novo Conteúdo Interativo H5P no tópico de
destino, que denominamos “Testes de Funcionalidade do H5P”.

Nessa nova janela, há vários campos para preenchimento, e o primeiro que

aparece é o da descrição (Figura 5).

H5P para Cursos de EaD da UAB/UFSC 14

Figura 5 - descrição do H5P.

Fonte: Autores (2020).

Na descrição, você pode fazer uma breve explanação do que se trata a

atividade e seus objetivos, por exemplo. E, ao marcar o quadrado em que se
diz Exibir descrição na página do curso, ela aparecerá exibida junto ao nome
da atividade.

Para criar, de fato, uma atividade do H5P, você deve escolher a opção Criar
conteúdo ou Carregar. Se você optar por Criar conteúdo, que já está por
padrão no Moodle, aparecerá uma lista de possibilidades de atividades/
conteúdo que você deve escolher (Figura 6).

Figura 6 - lista com opções de conteúdo do H5P.

Fonte: Autores (2020).

H5P para Cursos de EaD da UAB/UFSC 15

Ao observar a Figura 6, verifica-se que há uma lista grande de possibilidades
de conteúdo que você pode escolher – nem todas aparecem na tela. A barra
de rolagem, na lateral direita, permite que sejam vistas as outras atividades,
que vêm abaixo.

Note que há formas de mostrar os conteúdos, como: Populares primeiro,

Novos primeiro ou em Ordem alfabética. A seguir, para facilitar a busca por
nome do conteúdo, organizamos os 43 tipos de conteúdos pela opção de
apresentá-los a partir de uma lista em Ordem alfabética e síntese de uso:

1. Accordion: permite criar itens expansíveis empilhados verticalmente;

2. Agamotto (Image Blender): permite criar um slideshow interativo para

definir/observar a diferença na posição aparente de um objeto;

3. Arithmetic Quiz: permite criar questionários de aritmética com tempo

para o cálculo;

4. Audio: permite carregar ou enviar um recurso de áudio;

5. Audio recorder: permite criar gravação de áudio;

6. Branching Scenario (beta): permite criar cenários com vários conteúdos

e opções interativas avançados;

7. Chart: permite criar gráficos de barras e pizza;

8. Collage: permite criar colagem de várias imagens com opções de layout

pré-configuradas;

9. Column: permite configurar e organizar diferentes tipos de conteúdo

do H5P em layout de coluna;

10. Course Presentation: permite criar apresentações de slides, às quais

podem ser adicionados vários elementos interativos de multimídia;

11. Dialog Cards: permite criar um conjunto de cartões baseados em

textos em ambos os lados;

12. Dictation: permite criar tarefas de reprodução escrita de um material

H5P para Cursos de EaD da UAB/UFSC 16

 de áudio de gravação;

13. Documentation tool: ferramenta de documentação que visa facilitar

a criação de assistentes de avaliação para atividades orientadas a
objetivos – usada para elaboração de projetos (por exemplo: etapas de
elaboração de TCC);

14. Drag and Drop: permite criar tarefas de arrastar e soltar com imagens
ou textos;

15. Drag the Words: permite criar tarefas de arrastar e soltar com base
em texto;

16. Essay: permite criar questão discursiva (pergunta aberta) com

feedbacks;

17. Fill in the Blanks: permite criar tarefas com palavras ausentes em um
texto;

18. Find Multiple Hotspots: permite criar múltiplos pontos de acesso para
o usuário encontrar;

19. Find the Hotspots: permite criar um ponto de acesso para os usuários
encontrarem.

20. Find the Words: permite aos usuários pesquisar uma lista de palavras
que serão localizadas em uma grade. 

21. Flashcards: permite criar cartões com um prompt de imagem de um

lado e respostas de texto no outro;

22. Guess the Answer: permite criar imagens com uma questão e resposta
(por exemplo: adivinhar uma resposta com base em uma imagem);

23. Iframe Embedder: permite inserir/incorporar a partir de uma URL

ou conjunto de arquivos em apresentação de processos (por exemplo:
simulações interativas);

24. Image Hotspots: permite criar imagens com vários pontos ativos de
informações;

H5P para Cursos de EaD da UAB/UFSC 17

 25. Image Juxtaposição: permite comparar imagens por justaposição
(antes e depois);

26. Image Pairing: permite criar atividade de emparelhar imagens

correspondentes, ou seja, para combinar pares de imagens;

27. Image Sequencing: permite localizar, arrastar e soltar imagens na

ordem correta;

28. Image Slider: permite criar controles deslizantes de imagens com seu
texto, para ir passando;

29. Interactive Video: permite criar vídeos enriquecidos com interações,

ou seja, adicionar interações (imagens, elaboração de texto, links e
questionários) sobre os clipes de vídeo;

30. Mark the words: permite criar tarefas em que o usuário marca/destaca
as palavras;

31. Memory Game: permite criar o jogo de emparelhamento de imagens

(jogo da memória);

32. Multiple choice: permite criar questões flexíveis de múltipla

escolha;

33. Personality Quizz: permite criar uma série de perguntas com

alternativas, nas quais cada alternativa é comparada a uma ou mais
personalidades; no fim do questionário, o usuário final verá qual
personalidade combina melhor – existem várias maneiras de tornar
este teste visualmente atraente; por exemplo: representando perguntas,
alternativas e personalidades usando imagens;

34. Quiz (Question Set): permite criar uma sequência de vários tipos de
questões;

35. Single Choice Set: permite criar questão com uma resposta
correta;

36. Speak the Words: permite que se responda a uma pergunta usando

H5P para Cursos de EaD da UAB/UFSC 18

 voz (reconhecimento de voz);

37. Speak the Words Set: permite criar atividade de responder por som,
mas há necessidade de microfone e funciona apenas no Chrome;

38. Summary: permite criar resumos ou revisão de um determinado

tópico, ou principais informações em um texto, vídeo ou apresentação,
exibindo ativamente um resumo sobre o tópico em questão;

39. Timeline: permite criar uma linha de tempo de eventos com

multimídia;

40. True/False Questions: permite criar questões de verdadeiro ou

falso;

41. Twitter User Feed: permite mostrar/apresentar o seu Feed do Twitter

a partir do H5P;

42. Virtual Tour (360): permite criar um passeio “panorâmico” a partir da

junção de várias imagens de um ambiente feitas de um mesmo ponto/
local;

43. [Link] for Chat and Talk: permite conversas por video chat com
transmissão ao vivo pela plataforma.

Se você já tem uma atividade em H5P pronta em arquivo, pode optar por
Carregar, para um arquivo que já contém a atividade desejada. A Figura 7
ilustra o campo Carregar, veja:

Figura 7- Carregar.

Fonte: Autores (2020).

H5P para Cursos de EaD da UAB/UFSC 19

3. Conteúdos e atividades do H5P –
sugestões de uso

Roteiro de elaboração de atividades dos tipos de conteúdo do H5P disponíveis

na plataforma Moodle EaD-UFSC. Cabe ressaltar que todos os tipos de
conteúdo possuem exemplos e tutoriais oficiais ([Link] bem
como exemplos básicos desenvolvidos e utilizados neste guia. Estes estão
disponíveis na plataforma Moodle EaD-UFSC, em Espaços Colaborativos de
Matemática – Licenciatura.

3.1 Accordion

Tipo de conteúdo que pode ser usado para apresentar texto quando há uma
quantidade limitada de espaço vertical. O conteúdo é mostrado em painéis/
slides recolhíveis com um título. Cada painel/slide se expande clicando no
título.

Roteiro Simplificado:

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo-> Accordion.

3. Definir título para a atividade H5P: “Expansão de texto”.

Exemplo: “O que você precisa saber sobre a Covid-19?”.

H5P para Cursos de EaD da UAB/UFSC 20

Figura 8: visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Accordion na plataforma Moodle EaD-UFSC.

4. Configurações dos painéis com expansão de texto – duas etapas:

I: definir título do painel;

II: inserir o texto referente ao título (menu semelhante ao do Word).

5. Adicionar painel: sugerem-se, no mínimo, três painéis (e repetir o

procedimento 4).

6. Configurar a página da atividade.

7. Finalizar a atividade de conteúdo H5P: “Expansão de painéis”:

clicar no botão Salvar e voltar ao curso.

8. Visualização final da atividade-exemplo, com quatro painéis recolhíveis

(“Como se espalha”, “Quem é afetado”, “Tratamento do Coronavírus” e “Como

H5P para Cursos de EaD da UAB/UFSC 21

você pode evitá-lo”) referentes: “O que você precisa saber sobre a Covid-19?”.

Figura 9 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Accordion na plataforma Moodle EaD-UFSC.

Ao clicar em um dos títulos, expande-se o texto correspondente, e os demais

ficam recolhidos.

H5P para Cursos de EaD da UAB/UFSC 22

3.2 Agamotto (Image Blender)

Tipo de conteúdo que permite aos usuários comparar e explorar uma

sequência de imagens interativamente. Os autores podem decidir adicionar
um breve texto explicativo para cada imagem.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo-> Agamotto.

3. Definir título para a atividade H5P: “Sequência de imagens”.

Exemplo: “Média sazonal de radiação solar no Brasil”.

Figura 10 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Agamotto na plataforma Moodle EaD-UFSC.

4. Descrever o título do cabeçalho que se deseja exibir acima da imagem.

5. Adicionar item: no mínimo quatro questões (estações do ano).

H5P para Cursos de EaD da UAB/UFSC 23

6. Para cada item adicionado deve-se definir uma imagem – três etapas:

I: inserir imagem e direitos autorais;

II: definir o mesmo texto (nome do item) para alternativo, flutuante e

rótulo da imagem;

III: inserir a fonte URL em Descrição da origem da imagem (sugestão).

7. Habilitar os botões Controle deslizante, Exibir escala e Exibir rótulos”.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Sequência de Imagens”:

a) clicar no botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo da sequência de quatro imagens

(“verão”, “outono”, “inverno” e “primavera”) referentes: “Média sazonal de
radiação solar no Brasil”.

H5P para Cursos de EaD da UAB/UFSC 24

Figura 11- visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Agamotto na plataforma Moodle EaD-UFSC.

Ao clicar em um dos marcadores (verão, outono, inverno ou primavera),

desliza-se a imagem referente à média sazonal da radiação solar global no
Brasil.

3.3 Arithmetic Quiz

Tipo de aplicativo que gera, automaticamente, testes aritméticos que

consistem em questões de múltipla escolha baseadas em tempo.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

H5P para Cursos de EaD da UAB/UFSC 25

2. Selecionar tipo de conteúdo-> marcar Criar Conteúdo -> Arithmetic
Quiz.

3. Definir título para a atividade H5P: “Teste aritmético”.

Exemplo: “Resolva as questões de multiplicação”.

Figura 12 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Arithmetic Quiz na plataforma Moodle EaD-UFSC.

4. Definir texto introdutório: opcional.

5. Definir o tipo de teste aritmético (disponíveis: multiplicação, adição,

subtração e divisão).

6. Definir o número máximo de questões aleatórias.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Teste aritmético”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo do teste aritmético com cinco

questões de múltipla escolha (já definidas pela atividade) referente:
“Questões de multiplicação”.

H5P para Cursos de EaD da UAB/UFSC 26

Figura 13 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Arithmetic Quiz na plataforma Moodle EaD-UFSC.

Ao clicar na resposta, a atividade mostra qual é a correta e, então, desliza-se

para a próxima questão. Toda a tarefa está associada ao tempo de conclusão
da atividade.

3.4 Audio

1ª Versão

Tipo de conteúdo que permite carregar um recurso de áudio ou link à URL

fonte.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Audio.

3. Definir título para a atividade H5P: “Ouvir áudio”.

Exemplo: “Saiba como agir em caso suspeito de Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 27

Figura 14 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Audio na plataforma Moodle EaD-UFSC.

4. Carregar gravação de áudio ou inserir link do áudio.

5. Selecionar layout do reprodutor: “Completo”, “Minimalista” ou

“Transparente”.

6. Selecionar Preencher, Habilitar controle e Reprodução automática.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Ouvir áudio”.

a) Clique no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo Ouvir áudio referente: “Saiba

como agir em casos suspeitos de Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 28

Figura 15 - Visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Audio na plataforma Moodle EaD-UFSC.

Ao clicar no botão para reproduzir áudio, é possível ouvir toda a gravação ou

pausá-la em qualquer instante.

2ª Versão
Tipo de conteúdo que possibilita ao usuário responder, com a gravação de
um áudio, a uma questão proposta, que deve estar na descrição da atividade/
conteúdo; assim, o usuário grava o áudio com algum recurso e, então, pode
fazer seu upload na atividade e/ou colocar o link para o arquivo de áudio.

Sugere-se o uso da atividade em: questões abertas e de apresentação, e

explanações sobre determinado conteúdo.

3.5 Audio Recorder

1ª Versão

Tipo de conteúdo que permite gravar sua voz e reproduzi-la imediatamente,

ou baixar um arquivo .wav para uso futuro. Adequado para perguntas abertas
e cursos de idiomas. Atualmente, este tipo de conteúdo possui suporte
limitado aos navegadores Chrome e FireFox.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Audio recorder.

H5P para Cursos de EaD da UAB/UFSC 29

3. Definir título para a atividade H5P: “Gravação de voz”.

Exemplo: “Aprenda a contar em inglês”.

Figura 16 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Audio Recorder na plataforma Moodle EaD-UFSC.

4. Descrever a tarefa: guia informando ao usuário como resolver esta tarefa.

5. Editar o tópico Gravar: não mexer (sugestão).

6. Configurar a página da atividade.

7. Finalizar a atividade de conteúdo H5P: “Gravação de Áudio”.

a) clicar no botão Salvar e voltar ao curso.

8. Visualização final da atividade-exemplo de gravação de áudio referente:

“Conte até dez em inglês”.

H5P para Cursos de EaD da UAB/UFSC 30

Figura 17 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Audio Recorder na plataforma Moodle EaD-UFSC.

Ao pressionar o botão para gravar sua resposta, é possível pausar a gravação

a qualquer instante – você pode apertar novamente o botão para continuá-
la e finalizá-la. Ao terminar a gravação de sua resposta, é possível escutar,
realizar o download ou gravar novamente seu áudio.

2ª Versão

Tipo de conteúdo que possibilita ao usuário gravar a sua voz e reproduzi-

la imediatamente, e/ou baixar o arquivo “*.wav” para um uso. A questão a
ser respondida deve estar na Descrição da tarefa desta atividade/conteúdo,
onde você pode inserir uma pergunta ou frase que será exibida no momento
da gravação.

Sugere-se o uso da atividade em: questões abertas e de apresentação, e

explanações sobre determinado conteúdo.

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Audio recorder.

H5P para Cursos de EaD da UAB/UFSC 31

3. Definir título para a atividade H5P.

Exemplo: “Apresente-se para a sua turma”.

4. Inserir a Descrição da tarefa.

Exemplo: “Nesta atividade, você deverá fazer uma breve apresentação

sua para a turma, onde deve falar:

1) nome;

2) formação;

3) onde trabalha;

4) quais suas intenções profissionais após concluir este curso?”.

Observação: na Descrição da tarefa, não há as opções de configurar o

texto nem de inserir algum recurso adicional. Essas tarefas devem ser
realizadas na Descrição inicial da atividade, que conta com as ferramentas
padrões do Moodle.

5. Visualização final da atividade-exemplo de gravação de áudio referente:

“Apresente-se a sua turma”.

Figura 18 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Audio Recorder na plataforma Moodle EaD-UFSC.

6. Para finalizar a atividade de conteúdo H5P, escolher uma das opções:

H5P para Cursos de EaD da UAB/UFSC 32

Salvar e voltar ao curso, Salvar e mostrar ou Cancelar.

7. Resultado final da atividade-exemplo na Figura 12 abaixo:

Figura 19 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Audio Recorder na plataforma Moodle EaD-UFSC.

Ao concluir, aparecerá uma nova tela, em que o usuário poderá efetuar o

download do áudio ou refazer a gravação.

3.6 Branching Scenario (beta)

Tipo de conteúdo para criar cenários baseados em decisões. Utilizado para

criar materiais de aprendizagem que se ramificam em diferentes caminhos,
com base nas respostas do usuário.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo-> Branching

Scenario.

3. Definir título para a atividade H5P: “Ramificação de Cenários”.

H5P para Cursos de EaD da UAB/UFSC 33

Exemplo: “Apresentação dos professores conteudistas dos cursos de
graduação em licenciaturas da UFSC.

Figura 20 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Branching Scenario na plataforma Moodle EaD-UFSC.

4. Inserir slides de apresentação da UAB: clicar e arrastar para a área ->

clicar no ícone de ferramenta para configurar apresentação em slides (o
menu semelhante ao do PowerPoint).

5. Sugere-se Inserir texto, imagem e imagem hotspots (para a apresentação

do EaD-UFSC e Lantec) e vídeo de interação (para a apresentação geral dos
cursos de graduação na modalidade a distância disponíveis na UFSC).

5.1. Cada um desses ícones pode ser definido como camada; o

procedimento de uso é semelhante ao do item anterior – clicar e arrastar
até a área para a apresentação.

6. Adicionar lógica de ramificação: pergunta de ramificação determinará a

lógica de ramificação: Licenciaturas; neste exemplo, são quatro cursos de

H5P para Cursos de EaD da UAB/UFSC 34

licenciaturas na UFSC.

7. Adicionar alternativas: cada alternativa é um caminho diferente; neste

exemplo, são os quatro cursos e seus professores: no curso de Matemática,
professora Patrícia; no de Física, professor José; no de Ciências Biológicas,
professor Marcelo; e no de Letras, professora Letícia.

7.1. Em cada alternativa inserida, ou seja, identificação dos professores,

é possível adicionar várias informações, por meio do usos dos recursos
de texto, link, foto, vídeos, entre outros).

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: Ramificação de Cenários:

a) clicar no botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo de Ramificação de cenários:

“Apresentação dos professores conteudistas dos cursos de graduação em
licenciaturas da UFSC”. Neste caso, queremos saber quem é o professor
conteudista do curso de Matemática.

H5P para Cursos de EaD da UAB/UFSC 35

Figura 21- visualização final da atividade-exemplo (prints de cada camada).

Fonte: Conteúdo Interativo H5P Branching Scenario na plataforma Moodle EaD-UFSC.

Ao pressionar o botão Reiniciar a apresentação, é possível definir outros

caminhos, ou seja, “identificar quem são os professores conteudistas dos
demais cursos de graduação”, na camada Licenciaturas.

3.7 Chart

Tipo de conteúdo que permite aos usuários criar gráficos de pizza e de barras.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

H5P para Cursos de EaD da UAB/UFSC 36

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Chart.

3. Definir título para a atividade H5P: “Gráficos”.

Exemplo: “Gráfico dos casos de Coronavírus no Brasil”.

Figura 22: visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Chart na plataforma Moodle EaD-UFSC.

4. Definir o tipo de gráfico: de barras ou de pizza.

5. Inserir os dados: data e número de casos (16/03, 234); o nome (localizado

no eixo x, é a data 16/03) e o valor (localizado no eixo y, é o número de casos
de 234) e, sucessivamente, adicionar os demais dados.

6. Configurar a página da atividade.

7. Finalizar a atividade de conteúdo H5P: “Gráficos”.

a) clicar no botão Salvar e voltar ao curso.

8. Visualização final da atividade-exemplo de Gráficos: “Números de casos

de Coronavírus no Brasil”.

H5P para Cursos de EaD da UAB/UFSC 37

Figura 23 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Chart na plataforma Moodle EaD-UFSC.

Podemos observar no gráfico de barras verticais que elas são retangulares,

e seu comprimento é proporcional aos valores (número de casos) que ele
representa (dia e mês).

3.8 Collage

Tipo de conteúdo que permite aos usuários configurar várias fotos em um

layout personalizado, usando apenas um navegador da web.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Collage.

3. Definir título para a atividade H5P: “Álbum de imagem”.

Exemplo: “Álbum de Flores: cores de orquídeas”.

H5P para Cursos de EaD da UAB/UFSC 38

Figura 24 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Collage na plataforma Moodle EaD-UFSC.

4. Selecionar o layout de visualização.

5. Definir o espaçamento (10 pontos); quadro: espaçamento igual entre as

imagens e altura de layout (1.00 ponto).

6. Configurar a página da atividade.

7. Finalizar a atividade de conteúdo H5P: “Álbum de imagens”:

a) clicar no botão Salvar e voltar ao curso.

8. Visualização final da atividade-exemplo de álbum: “Álbum de flores: cores

de orquídeas”.

H5P para Cursos de EaD da UAB/UFSC 39

Figura 25 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Collage na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite criar colagens de várias imagens/

fotos, com opções de layout pré-configuradas (personalizadas).

3.9 Column

Tipo de conteúdo que permite listar, em colunas, diferentes tipos de conteúdo,

tais como vídeo, imagem, texto, áudio, além dos demais 42 tipos disponíveis
para o H5P.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Column.

3. Definir título para a atividade H5P: “Coluna de conteúdos”.

Exemplo: “Vídeo, imagem, link, texto e questões sobre o Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 40

Figura 26 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Column na plataforma Moodle EaD-UFSC.

4. Definir a lista de conteúdo da coluna da tarefa: neste exemplo, optamos

H5P para Cursos de EaD da UAB/UFSC 41

por vídeo, imagem, link, texto e questões de múltipla escolha e de “verdadeiro
ou falso”.

5. Configurar cada tipo de conteúdo da coluna: os tipos de conteúdo

escolhidos devem ser configurados um a um:

• inserir o vídeo e configurá-lo;

• definir Separar conteúdos com uma linha horizontal: “automático”, “nunca”

ou “sempre utilizar linha acima” (sugestão: “sempre”);

• clicar em Adicionar conteúdo: inserir os próximos conteúdos escolhidos

para o exemplo e configurá-los (imagem, link, texto e questões de múltipla
escolha e de “verdadeiro ou falso”).

6. Configurar o feedback geral: pontuação (opcional).

7. Em Configurações comportamentais:

a) habilitar os botões Tentar novamente e Mostrar solução.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Coluna de conteúdos”: clicar no

botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo de “Coluna de conteúdos”:

“Vídeo, imagem, link, texto e questões sobre o Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 42

Figura 27 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Column na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite utilizar vários tipos de conteúdo

do H5P, simultaneamente, em uma mesma tarefa em layout coluna.

3.10 Course Presentation

Tipo de conteúdo que permite criar uma apresentação baseada em slides.

Elementos multimídia e interativos, tais como títulos de slides, links, fotos,
clipes de áudio e vídeo, bem como vários tipos de questionário, podem

H5P para Cursos de EaD da UAB/UFSC 43

ser incorporados diretamente na apresentação, para uma experiência de
aprendizado mais rica.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Course

Presentation.

3. Editor de apresentação -> Apresentação interativa.

Exemplo: “Tudo sobre o Coronavírus”.

Figura 28 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Course Presentation na plataforma Moodle EaD-UFSC.

4. Definir título para a atividade H5P.

5. Configurar slides: os ícones são semelhantes aos do menu do PowerPoint.

Sugestão: inserir seis slides (1º “Origem e transmissão”; 2º “Sintomas”; 3º

H5P para Cursos de EaD da UAB/UFSC 44

“Contágio”; 4º “E no Brasil”; 5º “Teste” (questão de revisão). No sexto slide,
é apresentado o resultado da realização da questão de revisão/resumo pelo
usuário:

1) inserir interações: texto, imagem, link e tabela;

2) carregar vídeo;

3) adicionar tarefa de Revisão: resumo no último slide para finalizar a

apresentação (sugestão):

a) clicar no antepenúltimo botão do menu Barra de ferramentas;

b) definir título do questionário: “Relembrando”;

c) descrever as instruções da tarefa: “Escolha a afirmativa correta.”;

d) definir o conjunto de afirmativas da tarefa de revisão – marcar a 1ª

afirmativa é a correta.

6 . Em Configurações comportamentais:

a) habilitar os botões Tentar novamente e Mostrar solução.

7. Sobreposição de texto e traduções: Português.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Apresentação de slides”.

a) clicar no botão Salvar e voltar ao curso.

8. Visualização final da atividade-exemplo de Apresentação interativa: “Tudo

sobre o Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 45

Figura 29 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Course Presentation na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite utilizar vários slides interativos

com integração de vídeos, textos, imagens e links. Na barra de rolagem, são
sinalizados os nomes de cada slide.

3.11 Dialog Cards

Tipo de conteúdo que permite criar cartões com palavras ou expressões

correspondentes em ambos os lados, ou seja, fornecem uma informação
em um lado e uma resposta correspondente no outro. O cartão pode conter
apenas uma imagem, apenas um texto, ou ambos, bem como áudio.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Dialog Cards.

3. Definir título para a atividade H5P: “Cartões de diálogo”.

4. Definir Título (opcional) e modo de apresentação dos cartões: “normal”

H5P para Cursos de EaD da UAB/UFSC 46

(vira uma vez) ou “repetição” (vira duas vezes).

Exemplo: “Aprenda como escrever as expressões em inglês”.

Figura 30 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Dialog Cards na plataforma Moodle EaD-UFSC.

5. Descrever a tarefa: “Tradução dos nomes em português para o inglês”.

6. Configurar cada diálogo, em quatro etapas:

I: definir pergunta do cartão (primeiro lado);

II: inserir resposta do cartão (segundo lado);

III: inserir imagem e/ou arquivo de áudio (opcional);

IV: inserir dicas em ambos os lados do cartão (opcional).

7. Em Adicionar diálogo: inserir cinco cartões-questões (“Dor de cabeça’;

Tosse”; “Nariz entupido”; “Dificuldade respiratória” e “Falência Renal”)

8. Em Configurações comportamentais:

H5P para Cursos de EaD da UAB/UFSC 47

 a) habilitar os botões Tentar novamente e Dimensionar o texto para
ajustar-se dentro do cartão.

9. Configurar a página da atividade.

10. Finalizar a atividade de conteúdo H5P: “Cartões de diálogo”:

a) clicar no botão Salvar e voltar ao curso.

11. Visualização final da atividade-exemplo de Cartões de diálogo: “Aprenda

a escrever as expressões em inglês”.

H5P para Cursos de EaD da UAB/UFSC 48

Figura 31- visualização final da atividade-exemplo (antes e depois).

Fonte: Conteúdo Interativo H5P Dialog Cards na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite inserir imagens e arquivos de

áudio associados ao texto (ou palavra). A Figura 24 mostra o cartão antes (a
palavra em português) e depois de apertar o botão Virar (a mesma palavra
em inglês).

3.12 Dictation

Tipo de conteúdo que permite criar exercícios de ditado. Podem ser

adicionadas amostras de áudio contendo uma sentença para ditado,
devendo-se inserir a transcrição correta. Os alunos podem ouvir as amostras
e transcrever o que ouviram em um campo de texto, bem como treinar suas
habilidades de compreensão auditiva e ortográfica. Suas respostas serão
avaliadas automaticamente.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

H5P para Cursos de EaD da UAB/UFSC 49

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Dictation.

3. Definir título para a atividade H5P: “Ditado de palavras”.

Exemplo: “Ouça as palavras e as transcreva em inglês”.

Figura 32 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Dictation na plataforma Moodle EaD-UFSC.

4. Inserir mídia da questão: marcar uma opção (“nenhuma”, “imagem” ou

“vídeo”).

5. Descrever a tarefa: guia informando ao usuário como resolver a atividade.

H5P para Cursos de EaD da UAB/UFSC 50

6. Adicionar palavras ou frases: inserir arquivo de áudio ou link do áudio;
neste exemplo, iremos anexar dois arquivos de gravação de voz.

7. Inserir o texto que deve ser escrito: a palavra em inglês. Sugerem-se duas
palavras em inglês: “teacher” e “school”.

8. Feedback geral e pontuação: opcional.

9. Configurações comportamentais: ativar os botões Repetir e Mostrar

solução.

10. Configurar a página da atividade.

11. Finalizar a atividade de conteúdo H5P: “Ditado de palavras/frases”:

a) Clique no botão Salvar e voltar ao curso.

12. Visualização final da atividade-exemplo Ditado de palavras: “Ouça as

palavras e as transcreva em inglês”.

Figura 33 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Dictation na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite ouvir as gravações de áudio e

transcrever as palavras em inglês. Ao apertar o botão Check (verificar), é
possível ter um feedback geral e pontuação, assim como a opção de tentar
realizar a atividade novamente.

H5P para Cursos de EaD da UAB/UFSC 51

3.13 Documentation Tool

Tipo de conteúdo que pode ser usado para criar assistentes de formulário e
gerar um documento quando o usuário chegar ao final do assistente.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Documentation

tool.

3. Definir título para a atividade H5P: “Assistentes de formulário”.

Exemplo: “Etapas do documento de TCC”.

H5P para Cursos de EaD da UAB/UFSC 52

Figura 34 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Documentation tool na plataforma Moodle EaD-UFSC.

4. Descrever o título da ferramenta do documento: “Documentação” ou

“Sumário”.

5. Inserir e configurar os elementos: são as etapas que este documento de

TCC irá apresentar; cada uma delas será descrita por página.

H5P para Cursos de EaD da UAB/UFSC 53

6. Em Adicionar páginas: são definidas as etapas do TCC.

Este TCC será composto de nove etapas: “Documente seu projeto”, “Título do
projeto”, “Introdução’, “Objetivos”, “Metodologia”, “Avaliação”, “Conclusão”,
“Referências” e “Exportar documentos”. Cada etapa deve:

• definir tipo de página (página padrão; página de objetivos; página de

avaliação; página de exportação do documento);

• inserir um título de página (cabeçalho);

• inserir tipos de elementos (nenhum; texto; elemento do editor de campo

de entrada de texto; imagem).

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Assistentes de formulário”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo “Assistentes de formulário: etapas

do documento de TCC”.

Figura 35 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Documentation tool na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite visualizar a documentação geral,

ou seja, o sumário com todas as etapas que compõem o documento de TCC.

H5P para Cursos de EaD da UAB/UFSC 54

3.14 Drag and Drop

Tipo de conteúdo que permite aos alunos arrastar um pedaço de texto ou

imagem e soltá-lo em uma ou mais áreas correspondentes.

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Drag and Drop.

3. Definir título para a atividade H5P: “Arrastar e soltar”.

Exemplo: “Sintomas do Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 55

Figura 36 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Drag and Drop na plataforma Moodle EaD-UFSC.

4. Em Configuração geral: duas etapas:

I: Configurações: inserir imagem e direitos autorais;

II: Tarefa (Menu: dropzone, texto e imagem);

– adicionar dropzone: áreas nas quais os textos serão descartados

(caixas);

– definir nome do rótulo de cada dropzone da imagem -> apertar o botão

Done;

– inserir texto: definir o texto correspondente a cada dropzone (caixa em

branco) e apertar o botão Done.

5. Configurar o feedback geral: pontuação (opcional).

6. Em Configurações comportamentais:

a) habilitar os botões Tentar novamente e Mostrar solução.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Arrastar e soltar”:

H5P para Cursos de EaD da UAB/UFSC 56

 a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo “Arrastar e soltar: sintomas do

Coronavírus”.

Figura 37 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Drag and Drop na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite verificar a resposta e tentar

novamente, após arrastar e soltar as expressões nos locais escolhidos.

3.15 Drag the Words

Tipo de conteúdo que permite a criação de expressões textuais com pedaços

ausentes. O usuário arrasta uma parte faltante do texto até o seu lugar
correto, para formar uma expressão completa.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Drag the Words.

3. Definir título para a atividade H5P: “Arrastar”.

H5P para Cursos de EaD da UAB/UFSC 57

Exemplo: “Quais são os sintomas do Coronavírus?”.

Figura 38 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Drag the Words na plataforma Moodle EaD-UFSC.

4. Descrever a tarefa: “Arraste as palavras”.

5. Configurar cada espaço: inserir o texto completo e definir os espaços em

branco adicionados com asteriscos (*) na frente e atrás da palavra/frase
correta.

6. Configurar o feedback geral: pontuação (opcional).

7. Em Configurações comportamentais:

a) habilitar os botões Tentar novamente e Mostrar solução.

H5P para Cursos de EaD da UAB/UFSC 58

8. Configurar a página da atividade.

[Link] a atividade de conteúdo H5P: “Arraste as palavras”:

a) clicar no botão Salvar e voltar ao curso;

10. Visualização final da atividade-exemplo: “Arrastar: quais são os sintomas

do Coronavírus?”.

Figura 39 - Visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Drag the Words na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite verificar a resposta e tentar

novamente, após arrastar as expressões até os locais escolhidos.

3.16 Essay

Tipo de conteúdo que permite aos alunos receber um feedback instantâneo

sobre o texto que compuseram. Pode ser definido um conjunto de palavras-
chaves que acionam respostas individuais, se forem encontradas ou
ausentes no texto.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Essay.

3. Definir título para a atividade H5P: “Descreva”.

H5P para Cursos de EaD da UAB/UFSC 59

Exemplo: “O pico da evolução do Covid-19”.

Figura 40 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Essay na plataforma Moodle EaD-UFSC.

4. Definir texto de ajuda e exemplo de solução (opcional).

5. Adicionar palavras-chaves: no mínimo três; neste exemplo, foram

utilizadas: “pico”, “achatada”, “Coronavírus”, “saúde” e “curva”.

6. Inserir variações das palavras-chaves: adicionar o plural das palavras-

chaves (sugestão).

7. Configurar feedback geral e pontuação: opcional.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Questão discursiva”:

H5P para Cursos de EaD da UAB/UFSC 60

 a) clicar no botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo: “Descreva: o pico da evolução

do nCov-19”.

Figura 41 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Essay na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite redigir a resposta e verificar se as

palavras-chaves foram citadas ao longo do texto, conforme as orientações
descritas no enunciado da questão discursiva.

3.17 Fill in the Blanks

Tipo de conteúdo que permite criar frases nos espaços em branco,

possibilitando que o usuário preencha as lacunas. Além do aprendizado,
o recurso Preencher os espaços em branco pode ser usado para testar a
capacidade do aluno de reproduzir fatos ou produzir inferências matemáticas.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Fill in the Blanks.

3. Definir título para a atividade H5P: “Preencha os espaços em branco”.

Exemplo: “Contágio de Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 61

Figura 42 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Fill in the Blanks na plataforma Moodle EaD-UFSC.

5. Adicionar mídia acima da questão: nenhuma imagem ou vídeo (opcional).

6. Descrever a tarefa: “Complete os espaços ...”.

7. Configurar cada espaço: inserir o texto completo ou imagens e definir

os espaços em branco adicionados com asteriscos (*) na frente e atrás da
palavra/frase correta;

8. Configurar o feedback geral: pontuação (opcional).

H5P para Cursos de EaD da UAB/UFSC 62

9. Em Configurações comportamentais:

a) habilitar os botões Tentar novamente e Mostrar solução.

10. Configurar a página da atividade.

11. Finalizar a atividade de conteúdo H5P: “Preencha os espaços em branco”:

a) clicar no botão Salvar e voltar ao curso.

12. Visualização final da atividade-exemplo: “Preencha os espaços em

branco: contágio do Coronavírus”.

Figura 43 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Fill in the Blanks na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite redigir a resposta e verificar se as

palavras inseridas estão corretas (Mostrar solução), e, se necessário, Tentar
novamente. É preciso ter cuidado com a acentuação ao redigir as palavras.

3.18 Find Multiple Hotspots

Tipo de conteúdo que permite criar um teste baseado em imagem, no qual o

aluno deve encontrar nela os pontos corretos.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

H5P para Cursos de EaD da UAB/UFSC 63

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Find Multiple
Hotspots.

3. Definir título para a atividade H5P: “Múltiplos pontos de acesso”.

Exemplo: “Encontre as imagens corretas: como se prevenir da COVID-19?”.

Figura 44 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Find Multiple na plataforma Moodle EaD-UFSC.

4. Configurar questão e imagem: duas etapas:

I: imagem de fundo-> definir título da questão e inserir imagem de fundo

com os direitos autorais;

II: hotspots -> descrever a tarefa: instruções ao usuário (clicar nas

representações corretas (sugestão) e definir nome dos Hotspots.

5. Escolher os pontos de acesso na imagem: clicar na circunferência ou

H5P para Cursos de EaD da UAB/UFSC 64

quadrado; para o nosso exemplo, o apropriado é a circunferência.

6. Definir resposta em feedback e marcá-la como correta, se for o caso:

apertar Done.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Múltiplos pontos de acesso”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo: “Encontre as imagens corretas:

como se prevenir da COVID-19?”.

Figura 45 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Find Multiple Hotspots na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade pode ser finalizada somente quando

todos os pontos corretos forem identificados.

3.19 Find the Hotspots

Tipo de conteúdo que permite aos usuários finais pressionar em algum lugar
da imagem e receber feedback sobre a correção ou incorreção, de acordo
com a descrição da tarefa.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

H5P para Cursos de EaD da UAB/UFSC 65

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Find the Hotspots.

3. Definir título para a atividade H5P: “Único ponto de acesso”.

Exemplo: “Encontre o Emoji diferente”.

Figura 46 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Find the Hotspots na plataforma Moodle EaD-UFSC.

4. Configurar imagem e pontos de acesso: duas etapas:

I: imagem de fundo -> definir título da questão e inserir imagem de fundo

com os direitos autorais;

II: Pontos de acesso -> descrever a tarefa: instruções ao usuário (“Clique

nas representações corretas”: sugestão) e definir pontos/imagens
corretos.

H5P para Cursos de EaD da UAB/UFSC 66

5. Escolher os pontos de acesso na imagem: clicar na circunferência ou
quadrado.

6. Definir resposta em feedback (correto) e marcá-la como correta, se for o

caso; apertar Done;

7. Feedback se o usuário selecionar um ponto vazio: opcional.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Pontos de acesso corretos”:

a) clicar no botão Salvar e voltar ao curso.

10. visualização final da atividade-exemplo “Encontre o Emoji diferente”.

Figura 47 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Find the Hotspots na plataforma Moodle EaD-UFSC.

Podemos observar que é possível finalizar a atividade somente quando o

único emoji correto for identificado; caso contrário, tente novamente.

3.20 Find the Words

Tipo de conteúdo que permite aos usuários pesquisar uma lista de palavras
que serão localizadas em uma grade. A tarefa dos alunos é encontrar e
selecionar as palavras na grade baseada no tempo gasto para realizá-la. 

H5P para Cursos de EaD da UAB/UFSC 67

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Find the

Words.

3. Definir título para a atividade H5P: “Encontre os nomes relacionados a

COVID-19”.

Exemplo: “COVID-19: VIRUS, CHINA, TOSSE FEBRE, PANEMIA”.

Figura 48– Visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Find the words na plataforma Moodle EaD-UFSC.

4. Configurar a página da atividade.

5. Finalizar a atividade de conteúdo H5P: “COVID-19: VIRUS, CHINA,

TOSSE FEBRE, PANEMIA.

a) clicar no botão Salvar e voltar ao curso.

6. Visualização final da atividade-exemplo “Encontre os nomes relacionados

a COVID-19 na grade abaixo”.

H5P para Cursos de EaD da UAB/UFSC 68

Figura 49 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Find the words na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite localizar e selecionar todas as

palavras disponíveis na grade baseada no tempo gasto para a sua realização.

Ressalta-se: a ferramenta H5P capacita todos a criar, compartilhar e reutilizar

conteúdo interativo na plataforma Moodle.

3.21 Flashcards

Tipo de conteúdo que permite criar cartões contendo uma imagem em um

lado e um texto correspondente no outro. Solicita-se ao aluno que digite uma
palavra ou expressão correspondente à imagem, antes de virar o cartão e
revelar a resposta correta.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Flashcards.

3. Definir título para a atividade H5P: “Cartões de Diálogo-Imagem”.

H5P para Cursos de EaD da UAB/UFSC 69

Exemplo: “Responda às perguntas correspondentes às imagens sobre o
Coronavírus”.

Figura 50 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Flashcards na plataforma Moodle EaD-UFSC.

4. Descrever a tarefa: “Responda às questões”.

5. Configurar cartões (em Adicionar cartões), em quatro etapas:

I: inserir questão em texto no cartão,

II: inserir resposta: solução correta,

III: inserir imagem: opcional,

IV: inserir dica: opcional.

H5P para Cursos de EaD da UAB/UFSC 70

6. Marcar Requer resposta do usuário antes de a solução poder ser visualizada.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Cartões de Diálogo-Imagem”:

a) clicar no botão Salvar e voltar ao curso;

9. Visualização final da atividade-exemplo “Responda às perguntas

correspondente às imagens sobre o Coronavírus”.

Figura 51 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Flashcards na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite visualizar os resultados das

perguntas, após confirmar a finalização ou tente novamente.

3.22 Guess the Answer

1ª Versão
Tipo de conteúdo que permite criar desafios nos quais o usuário deve
adivinhar uma resposta com base em uma imagem.

Roteiro Simplificado

H5P para Cursos de EaD da UAB/UFSC 71

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Guess the Answer.

3. Definir título para a atividade H5P: “Adivinhe a imagem”.

Exemplo: “Qual é o bixo?”.

Figura 52 - visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Guess the Answer na plataforma Moodle EaD-UFSC.

4. Descrever a tarefa: guia informando ao usuário como resolver esta

H5P para Cursos de EaD da UAB/UFSC 72

atividade.

5. Inserir imagem ou vídeo;

6. Em texto alternativo: descrever a imagem: resposta/solução da imagem.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Adivinhar a imagem”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo: “Adivinhe a imagem: qual é o

bixo?”.

Figura 53 - visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Guess the Answer na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite visualizar o resultado da pergunta

ao se apertar o botão Clique para ver a resposta.

2ª Versão

Tipo de conteúdo que permite aos usuários criar desafios para serem
respondidos. Ao elaborar esse conteúdo, pode-se adicionar a descrição
da tarefa, uma imagem ou vídeo; fazer algumas configurações básicas
de apresentação e, também, pôr um texto com a solução, que pode ser
visualizada ao se clicar sobre a imagem ou vídeo da atividade.

H5P para Cursos de EaD da UAB/UFSC 73

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> selecionar Guess
the Answer.

3. Definir o título para a atividade H5P.

Figura 54 - inserindo o título

Fonte: Autores (2020).

4. Em Task description (Descrição da tarefa), deve-se escrever como o usuário

pode resolver a atividade. Note que estão disponíveis apenas controles
básicos para editar, os quais podem ser visualizados quando se clica dentro
do campo de edição, como aparece na figura abaixo:

Figura 55 - inserindo a descrição da tarefa

Fonte: Autores (2020).

Observação: se houver necessidade de utilizar recursos em LaTeX (para

Física, Matemática etc.) ou de inserir outros recursos, pode-se utilizar a parte
editável na descrição, que é o primeiro item (e não obrigatório) da atividade.
A descrição, como já visto, possui todos os controles do Moodle, fornecendo
possibilidades avançadas de edição.

5. Definir se vai ser utilizado o recurso de mídia, em que há possibilidade

de escolha entre imagem ou vídeo. Essa mídia é opcional e fica mostrada

H5P para Cursos de EaD da UAB/UFSC 74

acima da questão. Se ela não for utilizada, então deixar a opção padrão com
hífen “-” e seguir para o passo 6.

Figura 56 - inserindo uma mídia

Fonte: Autores (2020).

• Se for utilizada a opção Imagem, clicar no botão Adicionar, ir até o local

no disco, escolher a imagem de interesse e adicioná-la.

Figura 57 - inserindo uma mídia imagem

Fonte: Autores (2020).

Além disso:

a) inserir o texto alternativo, que é obrigatório; assim, se o navegador

não for capaz de exibir a imagem, esse texto será exibido no lugar dela.
b) você pode inserir um texto flutuante, que é opcional; assim, o texto

H5P para Cursos de EaD da UAB/UFSC 75

 será exibido se o usuário colocar o ponteiro sobre a imagem. Sugestão:
pensar em fazer um texto igual, seja como alternativo ou flutuante; assim,
de uma forma ou de outra, aparecerá a mesma mensagem.

• Se for utilizada a opção Vídeo, selecione-a e siga os passos abaixo:

a) inserir o título do vídeo, que é obrigatório;

Figura 58 - inserindo o título para o vídeo

Fonte: Autores (2020).

b) em Arquivos de vídeo, clicar no botão “+”, ir até o local no disco, escolher

o vídeo de interesse e adicioná-lo.

Figura 59 - inserindo uma mídia vídeo

Fonte: Autores (2020).

Observação: para se assegurar de que todos os navegadores suportam o

vídeo, você deve fazer upload de ambos os formatos, WebM e MP4; caso
contrário, antes, faça os testes de funcionalidade e inclua as orientações
aos usuários, se necessário.

c) Ainda há três itens a serem configurados: Visuais, Reprodução e

Acessibilidade. Veja abaixo:

c.1) Visuais

H5P para Cursos de EaD da UAB/UFSC 76

 Este item é para adicionar uma imagem de cartaz, que é obrigatória.
A adição da imagem você já conhece como se faz; entretanto, você
pode marcar a opção Encaixar o reprodutor de vídeo, para ocupar todo
o espaço disponível, e, se não habilitado, o reprodutor terá o mesmo
tamanho do vídeo fornecido. Também, pode-se marcar a opção
Mostrar controles do reprodutor de vídeo, a qual adiciona os controles
de maneira que o usuário possa reproduzir o vídeo, pausá-lo, dentre
outras possibilidades.

Figura 60 - inserindo a imagem de cartaz

Fonte: Autores (2020).

c.2) Reprodução

Se for marcado este item, será habilitada a Reprodução automática

de vídeo, mas existe a ressalva de que isso pode não funcionar em
dispositivos móveis. Também há a opção de pôr Vídeo em loop; assim,
basta marcá-la para que o vídeo seja automaticamente reproduzido
novamente, após seu término.

H5P para Cursos de EaD da UAB/UFSC 77

 Figura 61- configurando a reprodução do vídeo

Fonte: Autores (2020).

c.3) Acessibilidade

Para proporcionar maior acessibilidade, neste item, pode-se adicionar

faixa de vídeo, rótulo da faixa, tipo de categoria (Legendas, Legendas
(Acessibilidade), Descrições, Capítulos), idioma da faixa de texto e
a fonte da faixa (arquivo WebVTT).

Figura 62 - inserindo o recurso para acessibilidade

Fonte: Autores (2020).

6. O campo Descriptive solution label é uma área de texto clicável onde a

solução será mostrada. Note-se que, por padrão, ele já vem com o texto
“Click to see the answer”, mas é possível substituí-lo por outro, por exemplo:
“Clique para ver a resposta”.

Figura 63 - inserindo o texto “Clique para ver a resposta”

Fonte: Autores (2020).

H5P para Cursos de EaD da UAB/UFSC 78

7. O campo Solution text, obrigatório, é o local onde você deve colocar a so-
lução, como um texto explicativo.

Figura 64 - inserindo a solução

Fonte: Autores (2020).

8. Em Sobreposição de texto e traduções, sugere-se não alterar as configu-

rações, salvo se, de fato, se desejar.

Figura 65 - inserindo textos/traduções

Fonte: Autores (2020).

9. Para finalizar a atividade de conteúdo H5P: “Guess the Answer”, clicar no

botão Salvar e voltar ao curso.

3.23 Iframe Embedder

1ª Versão

Tipo de conteúdo que permite inserir URL ou conjunto de arquivos embutidos

em apresentação de processos.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Iframe Embedder.

H5P para Cursos de EaD da UAB/UFSC 79

3. Definir título para a atividade H5P: “Simulação Interativa”.

Exemplo: “Espectro eletromagnético”.

Figura 66 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Iframe Embedder na plataforma Moodle EaD-UFSC.

4. Configurar Largura da iframe: 500px.

5. Configurar Largura mínima da iframe: 300px.

6. Configurar Altura da iframe: 500px.

7. Adicionar Fonte da página disponível com a simulação interativa de

Física: [Link]
blackbody-spectrum_pt_BR.html (sugestão).

8. Habilitar o botão Redimensionar/ajustar: tela cheia será exibida, e o H5P

redimensionado para se ajustar ao ambiente (opcional).

9. Configurar a página da atividade.

H5P para Cursos de EaD da UAB/UFSC 80

10. Finalizar a atividade de conteúdo H5P: “Apresentação de processos”:

a) clicar no botão Salvar e voltar ao curso.

11. Visualização final da atividade-exemplo: “Simulação Interativa: espectro

eletromagnético”.

Figura 67 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Iframe Embedder na plataforma Moodle EaD-UFSC.

Podemos observar que a simulação interativa permite demonstrar diversas

apresentações de processos; neste exemplo, o aluno pode simular o
comprimento de onda por meio da identificação dos valores no gráfico,
tipo de espectro e intensidade de luminosidade, bem como da variação da
temperatura.

H5P para Cursos de EaD da UAB/UFSC 81

2ª Versão

Tipo de conteúdo que se constitui em um incorporador de Iframe, ou seja,

facilita a criação de atividades H5P a partir da inserção de recursos já
existentes desenvolvidos em HTML e JavaScripts, por exemplo.

Com esse conteúdo, pode-se: incorporar uma URL externa;

adicionar um recurso interno, ou seja, um conteúdo H5P deve ser criado e
carregado. Observação: o H5P deve conter todos os recursos necessários,
como: html, javascript, CCS e assim por diante.

Para carregar e utilizar este recurso, basta fazer algumas configurações

básicas e colocar a URL no Iframe Embedder. Veja, a seguir, os passos para
criar a atividade.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> selecionar Iframe
Embedder.

3. Definir o título para a atividade H5P.

H5P para Cursos de EaD da UAB/UFSC 82

Figura 68 - inserindo o título

Fonte: Autores (2020).

4. Como se pode visualizar na figura acima, existem outras configurações

a serem realizadas, como: Width, Minimum width, Height e Source; assim,
temos:

• Width: largura do iFrame em um formato CSS compatível, cujo

padrão é com 500 px de largura;

• Minimum Width: largura mínima do iFrame em um formato CSS

compatível, cujo padrão é com 300 px de largura;

• Height: altura do iFrame em um formato CSS compatível, cujo

padrão é com 500 px de largura;

• Source: endereço de uma URL para recurso em local externo (site,

simulação etc.) ou encontrado no H5P.

Note que também há uma caixa denominada Resize supported, que, se ativada
(marcada), fará aparecer um botão que, ao ser clicado, redimensionará o
conteúdo H5P para se ajustar ao ambiente em tela cheia.

5. Para finalizar a atividade de conteúdo H5P: “Iframe Embedder”, clicar no

H5P para Cursos de EaD da UAB/UFSC 83

botão Salvar e voltar ao curso.

3.24 Image Hotspots

Tipo de conteúdo que permite colocar uma sobreposição de pontos de

acesso em imagens e gráficos. O usuário pressiona os pontos ativos (+)
para revelar/rever um texto associado e informativos.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Image Hotspots.

3. Definir título para a atividade H5P: “Pontos de informações”.

Exemplo: “Sintomas do Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 84

Figura 69 – visualização inicial da atividade-exemplo

Fonte: Conteúdo Interativo H5P Image Hotspots na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 85

4. Configurações da atividade: duas etapas.

I: inserir imagem e direitos autorais;

II: definir a posição do ponto de acesso: clicar na posição, na imagem

mini.

- definir cabeçalho do popup -> marcar Cobrir a imagem de fundo;

- definir o tipo de conteúdo do popup (informativo): texto/imagem/

vídeo.

Em Adi cionar hotspot: todos os procedimentos deste item devem ser

repetidos para cada hotspot, ou seja, todos os pontos inseridos na imagem.

5. Configurar a página da atividade.

6. Finalizar a atividade de conteúdo H5P: “Pontos de acesso em imagens”:

a) clicar no botão Salvar e voltar ao curso;

7. Visualização final da atividade-exemplo “Pontos de informações: sintomas

de Coronavírus”.

Figura 70 – visualização final da atividade-exemplo (antes e depois).

Fonte: Conteúdo Interativo H5P Image Hotspots na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 86

Podemos observar que, ao apertar o primeiro ponto de acesso na imagem,
uma aba se estende para revelar um texto associado ao local e informativos
sobre o tema de estudo.

1ª Versão

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> selecionar Image
Hotspots.

3. Definir o título para a atividade H5P.

Figura 71 - inserindo o título

Fonte: Autores (2020).

4. Inserir uma imagem de fundo: para isso, clicar no botão Adicionar, seguir
até o local no disco, escolher a imagem de interesse e adicioná-la. Note que
é possível inserir um texto alternativo para a imagem de fundo.

Figura 72 - inserindo a imagem de fundo

Figura: Autores (2020).

Ao inserir a imagem de plano de fundo:

• aparecerão os botões Editar imagem e Editar direitos autorais. Ao editar a

H5P para Cursos de EaD da UAB/UFSC 87

 imagem, pode-se rotacioná-la; já, ao editar os direitos autorais, é possível
adicionar qualquer licença ou informações de direitos autorais associadas
à imagem de fundo.

Sugestão: procurar sempre utilizar imagens em que as licenças possam ser

colocadas como de domínio público – quanto mais livre for a licença da
imagem, melhor.

Figura 73 - inserindo os dados de licença

Fonte: Autores (2020).

• a imagem será dimensionada, proporcionalmente, para se ajustar à largura

máxima do contêiner em que está colocada; portanto, deve-se escolher
uma imagem com resolução adequada;

• é possível visualizar os pontos ativos da imagem em tela cheia.

H5P para Cursos de EaD da UAB/UFSC 88

5. Editar o ponto de acesso (Hotspot).

Esta parte para configuração de ponto de acesso vem, inicialmente, com um

único ponto disponível para editar; mas, se forem necessários mais pontos
de acesso, basta clicar em Adicionar Hotspot.

Figura 74 - editando ponto de acesso.

Fonte: Autores (2020).

Procedimento para a edição de cada ponto de acesso:

5.1) Inicialmente, deve-se definir a cor que será utilizada em todos os

pontos que forem criados;

5.2) Uma vez que a imagem de fundo tenha sido escolhida (no passo
anterior [Item 4]), ela aparecerá aqui com um ponto de acesso acima dela
no centro. Esse ponto de acesso pode ser localizado em qualquer lugar
da imagem, apenas clicando no local desejado.

H5P para Cursos de EaD da UAB/UFSC 89

 5.3) Note-se que, logo abaixo, há uma caixa para se marcar, que indica
Cobrir a imagem de fundo inteira. Se ela for marcada, quando o usuário
clicar no ponto de acesso, o popup cobrirá toda a imagem de fundo. Mas
é possível deixá-la desmarcada, pois há a opção de Pôr em tela inteira, o
que fica bem interessante.

5.4) Note-se que é possível colocar um cabeçalho opcional para o popup,

cujo nome aparecerá sobre o ponto de acesso (com mouse acima dele) e
também como título-cabeçalho sobre a janela de popup.

5.5) Para inserir o conteúdo do popup, há três opções: texto, imagem e

vídeo. É válido ressaltar que se podem utilizar todas as opções, ao mesmo
tempo, no mesmo popup. Note-se que, inicialmente, aparece apenas um
Item do conteúdo. Podem-se adicionar mais itens em Adicionar item.

• Se for utilizado o item do conteúdo como texto, escolher a opção Text.

Quando aberta a opção, deve-se escrever o texto que for conveniente.
Note-se que, ao clicar na caixa de texto, aparecem alguns controles
básicos, que podem ser utilizados para configurar o texto. Também
existe a opção de colocar links.

• Se for utilizadoo item do conteúdo como imagem, escolha a opção

Image. Quando aberta a opção, clicar no botão Adicionar, ir até o
local no disco, escolher a imagem de interesse e adicioná-la.
Além disso:

a) inserir o texto alternativo, que é obrigatório; assim, se o navegador não

for capaz de exibir a imagem, esse texto será exibido no lugar dela.
b) pode-se inserir um texto flutuante, opcional, que será exibido se o
usuário colocar o ponteiro sobre a imagem.

H5P para Cursos de EaD da UAB/UFSC 90


Sugestão: pensar em fazer um texto igual, seja como alternativo
ou flutuante; assim, de uma forma ou de outra, aparecerá a mesma
mensagem.

• Se for utilizado o item do conteúdo como vídeo, escolher a opção

Video e, quando aberta, seguir os passos abaixo:

a) inserir o título do vídeo, que é obrigatório;

b) Em Arquivos de vídeo, clicar no botão “+” para adicionar o arquivo, ir até
o local no disco, escolher o vídeo de interesse e adicioná-lo.
Observação: Para se assegurar de que todos os navegadores suportam
o vídeo, deve-se fazer upload de ambos os formatos, WebM e MP4.
Caso contrário, antes, devem-se fazer os testes de funcionalidades e
incluir as orientações aos usuários, se necessário.
c) Ainda há três itens a serem configurados: Visuais, Reprodução e
Acessibilidade. Veja abaixo:

c.1) Visuais
Este item é para adicionar uma Imagem de cartaz, obrigatória. A
adição da imagem você já conhece como se faz; entretanto, pode-
se marcar a opção Encaixar o reprodutor de vídeo, para ocupar
todo o espaço disponível, e, se não habilitado, o reprodutor terá o
mesmo tamanho do vídeo fornecido. Também, pode-se marcar a
opção Mostrar controles do reprodutor de vídeo, que adiciona
os controles ao reprodutor de vídeo de maneira que o usuário
possa reproduzir o vídeo, pausá-lo, dentre outras possibilidades.

c.2) Reprodução

Se for marcado este item, você terá a Reprodução automática

H5P para Cursos de EaD da UAB/UFSC 91

 de vídeo; mas com a ressalva de que ela pode não funcionar
em dispositivos móveis. Há, também, a opção de pôr Vídeo
em loop; assim, basta marcá-la para que o vídeo seja
automaticamente reproduzido novamente, após seu término.

c.3) Acessibilidade
Para proporcionar maior acessibilidade, neste item, pode-se
adicionar faixa de vídeo, rótulo da faixa, tipo de categoria (Legendas,
Legendas (Acessibilidade), Descrições, Capítulos), idioma da faixa
de texto e a fonte da faixa (arquivo WebVTT).

Após concluídos todos os Hotspots, resta concluir a atividade.

6. Em Sobreposição de texto e traduções, sugere-se não alterar as

configurações, salvo se, de fato, se desejar.

7. Para finalizar a atividade de conteúdo H5P “Image Hotspots”, clicar no

botão Salvar e voltar ao curso.

3.25 Image Juxtaposição

1ª Versão

Tipo de conteúdo que permite comparar duas imagens interativamente, ou

seja, por justaposição (antes e depois).

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar Tipo de conteúdo -> marcar Criar Conteúdo -> Image

Juxtaposição.

H5P para Cursos de EaD da UAB/UFSC 92

3. Definir título para a atividade H5P: “Antes e depois ...”.

Exemplo: “Casos de infecções na China”.

Figura 75 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Juxtaposição na plataforma Moodle EaD-UFSC.

4. Descrever o cabeçalho que se deseja exibir antes da imagem.

5. Adicionar as imagens: duas etapas:

I: inserir a primeira imagem e sua etiqueta;

H5P para Cursos de EaD da UAB/UFSC 93

 II: inserir a segunda imagem e sua etiqueta.

6. Definir a posição inicial do controle deslizante: 50% (no meio da imagens).

7. Definir a orientação do controle deslizante: horizontal (esquerda-direita)

ou vertical (cima-baixo).

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Justaposição de imagens”:

a) clicar no botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo “Antes e depois: Casos de

infecções na China”.

Figura 76 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Juxtaposição na plataforma Moodle EaD-UFSC.

Podemos observar que, ao se movimentar a linha de controle deslizante

horizontal (esquerda < - > direita), as imagens se estendem por completo,
revelando o antes e depois, ou seja, como o nCov-19 se espalhou na China
em 20 de janeiro (291 casos) e 30 de janeiro (7.711 casos).

H5P para Cursos de EaD da UAB/UFSC 94

2ª Versão

Tipo de conteúdo que permite aos usuários comparar duas imagens

interativamente, ou seja, por justaposição (antes e depois).

Obs.: este conteúdo parece não estar trabalhando corretamente de acordo com o
exemplo tutorial do Moodle, pois parece aceitar somente uma justaposição.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> selecionar Image
Juxtaposição.

3. Definir um título para a atividade H5P.

Figura 77 - inserindo o título

Fonte: Autores (2020).

4. Descrever o Cabeçalho que se deseja exibir antes da imagem, o qual é

como um título que representa ambas as imagens.

Figura 78 - inserindo o cabeçalho

Fonte: Autores (2020).

H5P para Cursos de EaD da UAB/UFSC 95

5. Adicionar as imagens: duas etapas:

I: inserir a primeira imagem e uma etiqueta que a represente.

Figura 79 - inserindo imagem

Fonte: Autores (2020).

Para inserir uma imagem, clicar no botão Adicionar, ir até o local no disco,
escolher a imagem de interesse e adicioná-la. A etiqueta ou rótulo para a
imagem deve ser escrita em Label for first image.

II: inserir a segunda imagem e uma etiqueta que a represente; para inserir
a segunda imagem, seguir os passos de maneira similar à da primeira
imagem.

Figura 80 - inserindo imagem

Fonte: Autores (2020).

6. Definir a Configuração do comportamento da barra deslizante; aqui, podem-

se fazer as configurações de posição e orientação da barra deslizante.

H5P para Cursos de EaD da UAB/UFSC 96

Figura 81 - comportamento da barra deslizante

Fonte: Autores (2020).

Exemplos de configuração:

a) se for digitado 50 em Slider start position in %, e colocado Horizontal

em Slider orientation, após salva a atividade, quando o usuário abrir
o conteúdo, aparecerá a barra deslizante, que estará posicionada
verticalmente, no centro da figura, e se moverá na horizontal, para ambos
os lados;

b) se for digitado 50 em Slider start position in %, e colocado Vertical

em Slider orientation, após salva a atividade, quando o usuário abrir
o conteúdo, aparecerá a barra deslizante, que estará posicionada
horizontalmente, no centro da figura, e se moverá na vertical, para cima
ou para baixo;

c) Se for digitado 20 em Slider start position in %, e colocado Horizontal

em Slider orientation, após salva a atividade, quando o usuário abrir
o conteúdo, aparecerá a barra deslizante, que estará posicionada
verticalmente, a 20% da lateral esquerda da figura, e se moverá na
horizontal, para ambos os lados;

d) Se for digitado 20 em Slider start position in %, e colocado Vertical

em Slider orientation, após salva a atividade, quando o usuário abrir
o conteúdo, aparecerá a barra deslizante, que estará posicionada

H5P para Cursos de EaD da UAB/UFSC 97

 horizontalmente, a 20% abaixo da parte superior da figura, e se moverá
na vertical, para cima ou para baixo.

7. Para finalizar a atividade de conteúdo H5P: “Image Juxtaposição”, clicar

no botão Salvar e voltar ao curso.

3.26 Image Pairing

Tipo de atividade que permite criar pares de imagens correspondentes. Aos

alunos são apresentadas as imagens não emparelhadas, e eles precisam
usar “arrastar e soltar” ou clicar nas imagens que acham que correspondem.
Como não é necessário que as duas imagens em um par sejam iguais, os
autores também podem testar o entendimento do aluno sobre uma relação
entre duas imagens diferentes.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo-> marcar Criar Conteúdo -> Image Pairing.

3. Definir título para a atividade H5P: “Combine as imagens ...”.

Exemplo: “Passaporte Verde”.

H5P para Cursos de EaD da UAB/UFSC 98

Figura 82 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Pairing na plataforma Moodle EaD-UFSC.

4. Descrever a tarefa: “Arraste as imagens”.

5. Adicionar cartões: no mínimo três (sugestão).

6. Definir cada imagem: três etapas:

I: inserir imagem e direitos autorais;

II: definir texto alternativo para imagem;

III: inserir imagem correspondente.

H5P para Cursos de EaD da UAB/UFSC 99

7. Habilitar botão Tentar novamente quando o jogo terminar.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Emparelhamento de Imagens”:

a) clicar no botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo “Combine as imagens:

Passaporte Verde”.

Figura 83 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Pairing na plataforma Moodle EaD-UFSC.

Podemos observar que, ao arrastar e soltar as imagens que correspondem

entre si, os alunos também podem testar o entendimento de uma relação
entre duas imagens diferentes a partir dos botões Verificar, Tentar Novamente
e Mostrar Solução.

3.27 Image Sequencing

Tipo de conteúdo que desafia o aluno a ordenar um conjunto aleatório de

imagens, de acordo com a descrição da tarefa.

Roteiro Simplificado

H5P para Cursos de EaD da UAB/UFSC 100

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Image Sequencing.

3. Definir título para a atividade H5P: “Ordenar as imagens”.

Exemplo: “Crescimento de infectados pelo Coronavírus na China”.

Figura 84 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Sequencing na plataforma Moodle EaD-UFSC.

4. Descrever a tarefa: guia informando ao usuário como resolver a atividade.

5. Em Adicionar as imagens: inserir cada imagem e sua descrição. Neste

exemplo, foram inseridas as imagens de Caso 1 às de Caso 6.

6. Inserir áudio: opcional.

7. Configurações comportamentais:

H5P para Cursos de EaD da UAB/UFSC 101

 a) adicionar os botões de Solução; Tentar novamente; e Retomar.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Sequenciamento de imagens”:

a) clicar no botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo “Ordenar as imagens: crescimento

de infectados pelo Coronavírus na China”.

Figura 85 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Sequencing na plataforma Moodle EaD-UFSC.

Podemos observar que, ao arrastar e soltar as imagens na sequência correta

(ordenar as imagens), os alunos também podem testar o seu entendimento
da relação entre as diferentes imagens, a partir dos botões Verificar, Tentar
Novamente e Mostrar Solução.

3.28 Image Slider

Tipo de conteúdo que permite criar controles deslizantes de imagem

responsivos com um modo de tela cheia de uma maneira amigável.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

H5P para Cursos de EaD da UAB/UFSC 102

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Image Slider.

3. Definir título para a atividade H5P: “Deslize as imagens”.

Exemplo: “Ciclo do novo Coronavírus”.

Figura 86 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Slider na plataforma Moodle EaD-UFSC.

4. Definir título da imagem.

5. Adicionar imagens/itens e editar direitos autorais; neste exemplo, foram

inseridas três imagens: “A transmissão” (Fase 1), “Os sintomas” (Fase 2) e
“As recomendações de prevenção” (Fase 3).

6. Inserir texto alternativo: texto ou link da imagem (sugestão).

7. Em Configurações de proporção da tela: “automático”; “customizado”;

H5P para Cursos de EaD da UAB/UFSC 103

“não fixo”:

a) habilitar “automático”.

8. Configurar a página da atividade;

9. Finalizar a atividade de conteúdo H5P: “Deslizar imagens”:

- clicar no botão Salvar e voltar ao curso.

10. visualização final da atividade-exemplo “Deslize as imagens: ciclo do

novo Coronavírus”.

Figura 87 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Image Slider na plataforma Moodle EaD-UFSC.

Podemos observar que o controle deslizante de imagens permite que os

alunos reforcem seu conhecimento com um modo de tela cheia de uma
maneira amigável.

H5P para Cursos de EaD da UAB/UFSC 104

3.29 Interactive Video

Tipo de conteúdo que permite adicionar interações sobre os clipes de vídeo.

Itens como imagens, elaboração de texto, links e questionários aparecem
enquanto o usuário assiste ao vídeo.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar Tipo de conteúdo -> marcar Criar Conteúdo -> Interactive Video.

3. Descrever o título geral -> “Vídeo Interativo”.

Exemplo: “Como você pode evitar o Coronavírus?”.

Figura 88 – visualização inicial da atividade-exemplo (Etapa I).

Fonte: Conteúdo Interativo H5P Interactive Video na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 105

4. Definir título para a atividade H5P.

5. Configurar o vídeo interativo: três etapas:

I – carregar vídeo: fazer upload de vídeo ou inserir URL fonte do vídeo;

II – adicionar interações: texto, imagem, link e tabela durante o vídeo

(ícones semelhantes aos do menu do Word);

a) pressionar o botão Texto -> arrastá-lo e soltá-lo no vídeo para editar

o texto, tabela ou imagem;

b) configurar hora da exibição: início, 00:05; término, 00:15; pausar

des/marcada;

c) definir rótulo para o ícone;

d) pressionar Concluído.

Figura 89 – visualização inicial da atividade-exemplo (Etapa II).

Fonte: Conteúdo Interativo H5P Interactive Video na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 106

 III – inserir Tarefa de revisão: resumo no final do vídeo (questionário:
perguntas de escolha múltipla):

a) inserir a pergunta da tarefa de revisão;

b) descrever as instruções da tarefa: “Escolha a afirmativa correta”;

c) Definir o conjunto de afirmativas da tarefa – a primeira afirmativa

é a correta.

Figura 90 – visualização inicial da atividade-exemplo (Etapa III).

Fonte: Conteúdo Interativo H5P Interactive Video na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 107

6. Para Adicionar marcadores: Favoritos – indicadores de interações
inseridas no vídeo:

a) clicar novamente na Etapa II;

b) clicar no botão Iniciar vídeo;

c) clicar no botão Favoritos, onde se deseja adicionar marcador;

d) clicar em Adicionar marcador, na janela Bookmarks;

e) Definir nome para o marcador;

f) Tópicos de marcadores (título do texto, da imagem e da tarefa).

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Vídeo interativo”.

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo “Vídeo Interativo: como você pode

evitar o Coronavírus?”.

Figura 91 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Interactive Video na plataforma Moodle EaD-UFSC.

Podemos observar que o aluno pode pausar o vídeo ou, enquanto assiste a
ele, ter interações dinâmicas com imagens, textos, links e questionários.

H5P para Cursos de EaD da UAB/UFSC 108

3.30 Mark the Words

Tipo de pergunta que permite criar desafios, nos quais o usuário deve marcar
tipos específicos de palavras ou expressões corretas em um texto.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Mark the words.

3. Definir título para a atividade H5P: “Marque as palavras”.

Exemplo: “Tema Coronavírus”.

Figura 92 – visualização inicial da atividade-exemplo.

H5P para Cursos de EaD da UAB/UFSC 109

Fonte: Conteúdo Interativo H5P Mark the words na plataforma Moodle EaD-UFSC.

4. Descrever a tarefa: “Marque as expressões corretas entre parênteses”

(sugestão).

5. Editar Texto em Campo de texto.

6. Configurar as palavras corretas: as palavras marcadas são adicionadas

entre asteriscos (exemplo: *palavras*).

7. Definir feedback e pontuação (opcional).

8. Em Configurações comportamentais:

a) habilitar o botão Tentar novamente;

b) habilitar o botão Mostra solução;

c) habilitar o botão Mostra pontuação.

9. Configurar a página da atividade.

10. Finalizar a atividade de conteúdo H5P: “Marcar palavras”:

a) clicar no botão Salvar e voltar ao curso.

11. Visualização final da atividade-exemplo “Marque as palavras: tema

Coronavírus”.

Figura 93 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Mark the words na plataforma Moodle EaD-UFSC.

Podemos observar que, ao clicar nas palavras corretas/incorretas e em

Verificar resposta, a atividade proporciona Tentar Novamente.

H5P para Cursos de EaD da UAB/UFSC 110

3.31 Memory Game

Tipo de conteúdo que permite aos usuários adicionar suas próprias

imagens (texto e áudio: opcional) a um jogo da memória. Para jogar, os
alunos pesquisam pares de imagens que exibem uma mensagem de texto
especificada, assim que um par correspondente é encontrado.

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo-> marcar Criar Conteúdo-> Memory Game.

3. Definir título para a atividade H5P: “Jogo de memória”.

Exemplo: “Passaporte verde”.

H5P para Cursos de EaD da UAB/UFSC 111

Figura 94 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Memory Game na plataforma Moodle EaD-UFSC.

4. Adicionar cartões de imagem: inserir a primeira imagem e, sucessivamente,

as demais; neste exemplo, inserimos “Bike”, “Destino” e “Carona”.

5. Configurar cada imagem, em quatro etapas:

H5P para Cursos de EaD da UAB/UFSC 112

 I: definir texto para a imagem do cartão (primeiro lado);

II: inserir áudio ao cartão (opcional);

III: inserir o par da primeira imagem (segundo lado);

IV: inserir texto para imagem par (opcional).

6. Em Configurações comportamentais:

a) marcar Posicionar os cartões em um quadrado;

b) habilitar o botão Tentar novamente.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Jogo da memória”:

a) clicar no botão Salvar e voltar ao curso.

9. visualização final da atividade-exemplo “Jogo de memória: passaporte

verde”.

Figura 95 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Memory Game na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 113

Podemos observar que, durante a pesquisa dos pares de imagens
correspondentes, a atividade disponibiliza os registros de tempo gasto
e quantas vezes os cartões foram virados, bem como a opção Tentar
Novamente.

3.32 Multiple Choice

1ª Versão

Tipo de conteúdo que consiste em uma pergunta e um conjunto de opções.

A pergunta é usada para apresentar o problema a ser resolvido, e as opções
são as respostas possíveis que o usuário pode escolher, ou seja, é possível
marcar mais de uma opção (pode haver mais de uma resposta correta).

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Multiple choice.

3. Definir título para a atividade H5P: “Múltipla escolha”.

Exemplo: “Responda sobre o Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 114

Figura 96 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Multiple choice na plataforma Moodle EaD-UFSC.

4. Definir título para a questão.

5. Definir tipo de questão: vídeo ou imagem.

6. Inserir todas as afirmativas, em Adicionar option.

7. Marcar as afirmações corretas.

8. Configurar o feedback geral: pontuação (opcional).

9. Em Configurações comportamentais:

a) habilitar os botões Tentar novamente e Mostrar solução;

b) selecionar o tipo de seleção da questão: “Automático”; “Múltipla

escolha”; “Escolha única”.

10. Configurar a página da atividade.

11. Finalizar a atividade de conteúdo H5P: “Múltipla escolha”:

H5P para Cursos de EaD da UAB/UFSC 115

 a) clicar no botão Salvar e voltar ao curso.

12. Visualização final da atividade-exemplo “Múltipla escolha: responda

sobre o Coronavírus”.

Figura 97 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Multiple choice na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido marcar

uma ou mais alternativas, bem como visualizar a pontuação; há, ainda, as
ações Mostrar Solução e Tentar Novamente.

2ª Versão

Tipo de conteúdo múltipla escolha que possibilita ao usuário criar uma

pergunta com um conjunto de opções de respostas. Cada pergunta de
múltipla escolha do H5P pode ter uma única ou várias opções corretas,
podendo ser usada de forma independente ou em conjunto de perguntas,
vídeos interativos ou apresentações.

A pergunta é usada para apresentar o problema a ser resolvido, e as opções

são as respostas possíveis que o usuário pode escolher, ou seja, pode haver
mais de uma resposta correta, se assim for configurado.

H5P para Cursos de EaD da UAB/UFSC 116

Este tipo de conteúdo pode ser uma ferramenta de avaliação eficaz, pois
possibilita exercitar o aluno quanto a um nível de habilidades bem definidas,
relacionadas ao seu conhecimento de um determinado tópico; além de tudo,
pode ser configurado para que o estudante receba um feedback imediato
sobre o seu desempenho.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> selecionar Multiple
choice.

3. Definir o título para a atividade H5P.

Figura 98 - inserindo o título.

Fonte: Autores (2020).

4. Definir se vai ser utilizado o recurso de mídia, em que há possibilidade

de escolha entre imagem ou vídeo, é opcional e fica mostrado acima da
questão; se mídia não for usada, então deixar a opção padrão com hífen “-”
e ir para o passo 5.

Figura 99 - inserindo a mídia.

Fonte: Autores (2020).

H5P para Cursos de EaD da UAB/UFSC 117

Se for utilizada a opção Imagem, clicar no botão Adicionar, ir até o
local no disco, escolher a imagem de interesse e adicioná-la.
Além disso:

a) inserir o texto alternativo, que é obrigatório; assim, se o navegador não

for capaz de exibir a imagem, esse texto será exibido em seu lugar;
b) pode-se inserir, também, um texto flutuante, que é opcional; assim, o
texto será exibido se o usuário colocar o ponteiro sobre a imagem

Sugestão: pensar em fazer um texto igual, seja como alternativo ou

flutuante; assim, de uma forma ou de outra, aparecerá a mesma mensagem.

Se for utilizada a opção Vídeo, seguir os passos abaixo:

a) inserir o título do vídeo, que é obrigatório;

b) em Arquivos de vídeo, clicar no botão “+” para adicionar o arquivo, ir

até o local no disco, escolher o vídeo de interesse e adicioná-lo.

Observação: para se assegurar de que todos os navegadores suportam

o vídeo, você deve fazer o upload de ambos os formatos, WebM e
MP4; caso contrário, antes, faça os testes de funcionalidade e inclua as
orientações aos usuários, se necessário.

c) Ainda há três itens a serem configurados: Visuais, Reprodução e

Acessibilidade. Veja abaixo:

c.1) Visuais
Este item é para adicionar uma imagem de cartaz, que é obrigatória.
A adição da imagem você já conhece como se faz; entretanto,pode-
se marcar a opção Encaixar o reprodutor de vídeo para ocupar
todo o espaço disponível, e, se não habilitado, o reprodutor terá
o mesmo tamanho do vídeo fornecido. Também, é possível marcar

H5P para Cursos de EaD da UAB/UFSC 118

 a opção Mostrar controles do reprodutor de vídeo, o que
adiciona os controles ao reprodutor de maneira que o usuário
possa reproduzir o vídeo, pausá-lo, dentre outras possibilidades.

c.2) Reprodução

Se for marcado este item, será habilitada a Reprodução

automática de vídeo, mas com a ressalva de que isso pode
não funcionar em dispositivos móveis. Também há a opção de
pôr Vídeo em loop; assim, basta marcá-la para que o vídeo seja
automaticamente reproduzido novamente, após seu término.

c.3) Acessibilidade

Para proporcionar maior acessibilidade, neste item, você pode

adicionar faixa de vídeo, o rótulo da faixa, tipo de categoria (Legendas,
Legendas (Acessibilidade), Descrições, Capítulos), idioma da faixa de
texto e a fonte da faixa (arquivo WebVTT).

5. No campo Questão, adicione a questão de interesse. Note-se que estão

disponíveis apenas controles básicos para editar a questão, os quais podem
ser visualizados quando se clica dentro do campo de edição, como aparece
na figura abaixo:

Figura 100 - inserindo a questão.

Fonte: Autores (2020).

H5P para Cursos de EaD da UAB/UFSC 119

Observação: se forem utilizados recursos em LaTeX (para Física, Matemática
etc.) ou inseridos outros recursos, pode-se utilizar a parte editável na descrição,
que é o primeiro item (e não obrigatório) da atividade. A descrição, como
já visto, possui todos os controles do Moodle, fornecendo possibilidades
avançadas de edição.

6. Podem-se inserir todas as opções desejadas, no campo Opções disponíveis.

Note-se que, por padrão, já há duas opções disponíveis para preencher, mas
podem-se inserir mais opções no botão Adicionar option, que insere uma
questão por vez.

Ao clicar na caixa de edição de uma opção, aparecerão os controles e a caixa

para editar; nesta, você deve editar a questão de interesse com os recursos
básicos.

Figura 101 - configurando as opções

Fonte: Autores (2020).

H5P para Cursos de EaD da UAB/UFSC 120

Também há uma caixa de marcação com Correto ao lado; ela deve ser
marcada se a opção for correta, de acordo com o enunciado.

Logo abaixo de cada opção, existe o campo para inserir o feedback, que pode
ser configurado como “Texto de dica”, “Mensagem mostrada” se resposta é
selecionada e “Mensagem mostrada” se resposta não é selecionada.

7. Marcar as afirmações corretas.

8. Configurar o feedback geral: pontuação (opcional).

Figura 102 - configurando o feedback

Fonte: Autores (2020).

9. Em Configurações comportamentais, podem-se habilitar os botões Tentar

novamente, Mostrar solução, bem como o tipo de seleção da questão:
Automático, Múltipla escolha (Checkboxes) ou Escolha única (botão de
Opção). Na configuração padrão, já vêm algumas opções marcadas, mas
outras configurações podem serem feitas de acordo com os propósitos.

10. Em Sobreposição de texto e traduções, sugere-se não alterar as

configurações, salvo se, de fato, se desejar.

11. Para finalizar a atividade de conteúdo H5P: “Múltipla escolha”, clicar no

botão Salvar e voltar ao curso.

H5P para Cursos de EaD da UAB/UFSC 121

3.33 Personality Quiz

Tipo de conteúdo que permite criar uma série de perguntas, nas quais cada
alternativa é comparada a uma ou mais personalidades; no fim do questionário,
o estudante verá com qual personalidade combina melhor. Existem várias
maneiras de tornar este teste visualmente atraente: elaborando perguntas e
alternativas contendo imagens de personalidades, por exemplo.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Personality Quiz.

3. Definir título para a atividade H5P: “Questionário de personalidade”.

Exemplo: “Qual Emoji combina mais com você hoje?”.

H5P para Cursos de EaD da UAB/UFSC 122

Figura 103 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Personality Quiz na plataforma Moodle EaD-UFSC.

4. Definir título e inserir imagem: exibição na tela principal (capa do QP).

5. Adicionar personalidade e descrição, para associar respostas às

respectivas personalidades (sugestão: no mínimo três).

6. Inserir imagem para cada personalidade (opcional).

7. Adicionar questões: definir a pergunta, imagem (opcional) e resposta

associada à personalidade.

H5P para Cursos de EaD da UAB/UFSC 123

Figura 104 – visualização inicial: “Adicionar questões”.

Fonte: Conteúdo Interativo H5P Personality Quiz na plataforma Moodle EaD-UFSC.

8. Sugerem-se, no mínimo, três perguntas.

9. Configurar Start para começar e Retake para jogar novamente.

10. Configurar a página da atividade.

11. Finalizar a atividade de conteúdo H5P: “Questionário de Personalidade”:

a) clicar no botão Salvar e voltar ao curso.

12. Visualização final da atividade-exemplo “Múltipla escolha: responda

sobre o Coronavírus”.

H5P para Cursos de EaD da UAB/UFSC 124

Figura 105 – questionário de personalidade: “Qual Emoji combina mais com você hoje?”.

Fonte: Conteúdo Interativo H5P Personality Quiz na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido jogar

novamente para verificar uma nova combinação.

3.34 Quiz (Question Set)

Tipo de conteúdo que permite criar uma sequência de vários tipos de

questionário, incluindo perguntas de múltipla escolha (uma ou mais respostas
possíveis); “preencha os espaços em branco”; “arraste e solte”; “verdadeiro
ou falso” e “marque as palavras”. O conjunto de perguntas oferece suporte

H5P para Cursos de EaD da UAB/UFSC 125

tanto ao feedback de texto personalizado, como ao em vídeo.

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Quiz.

3. Definir título para a atividade H5P: “Questionário”.

Exemplo: “Perguntas sobre o Coronavírus”.

Figura 106 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Quiz na plataforma Moodle EaD-UFSC.

5. Adicionar uma imagem ao questionário.

6. Definir o estilo de indicador do questionário: texto ou pontos.

7. Definir tipo de questão: múltipla escolha; “preencher os espaços”; “arraste

e solte”; “verdadeiro ou falso” ou “marque as palavras”;

H5P para Cursos de EaD da UAB/UFSC 126

Figura 107 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Quiz na plataforma Moodle EaD-UFSC.

8. Adicionar + Questões: configurar cada questão – definir título e mídia:

nenhuma, imagem ou vídeo (opcional).

9. Descrever as afirmativas e gabarito.

10. Configurar o feedback geral e pontuação: (opcional).

11. Em Configurações comportamentais:

a) habilitar os botões Tentar novamente e Mostrar solução;

b) selecionar o tipo de seleção da questão: “Automático”, “Múltipla

H5P para Cursos de EaD da UAB/UFSC 127

 escolha” ou “Escolha única”.

12. Configurar a página da atividade.

13. Finalizar a atividade de conteúdo H5P: “Questionário”:

a) clicar no botão Salvar e voltar ao curso.

14. Visualização final da atividade-exemplo “Questionário: perguntas sobre

o Coronavírus”.

Figura 108 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Quiz na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido

H5P para Cursos de EaD da UAB/UFSC 128

responder diferentes tipos de questões, verificar resposta e tentar novamente.

3.35 Single Choice Set

Tipo de conteúdo que permite criar conjuntos de perguntas com apenas uma
resposta correta por questão. O usuário final recebe feedback imediato após
enviar cada resposta.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Single Choice
Set.

3. Definir título para a atividade H5P: “Escolha única”.

Exemplo: “O-s 7 principais erros dos brasileiros na prevenção ao Coronavírus”.

Figura 109 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Single Choice Set na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 129

4. Adicionar questões e gabarito, em Listas de questões.

5. Configurar cada questão, em duas etapas (sugestão: selecione a guia

Padrão):

I: inserir questão-texto;

II: inserir alternativas: a primeira alternativa é a correta.

6. Definir feedback e pontuação (opcional).

7. Em Configurações comportamentais:

a) marcar continuar automaticamente (opcional);

b) habilitar os botões Tentar novamente e Mostra solução.

8. Configurar a página da atividade.

9. Finalizar a atividade de conteúdo H5P: “Escolha única”:

a) clicar no botão Salvar e voltar ao curso.

10. Visualização final da atividade-exemplo “Escolha única: os 7 principais

erros dos brasileiros na prevenção ao Coronavírus”.

Figura 110 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Single Choice Set na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido marcar

apenas uma alternativa, verificar resposta e tentar novamente.

H5P para Cursos de EaD da UAB/UFSC 130

3.36 Speak the Words

Tipo de conteúdo de reconhecimento de voz que permite fazer uma pergunta

a ser respondida com a própria voz do usuário.

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Speak the Words.

3. Definir título para a atividade H5P: “Reconhecimento de voz”.

Exemplo: “Qual é a capital de Santa Catarina?”.

Figura 111 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Speak the Words na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 131

4. Descrever a tarefa: “Responda à pergunta”.

5. Adicionar as respostas aceitas: no mínimo duas corretas (sugestão).

6. Definir a linguagem de entrada da fala: português.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Reconhecimento de voz”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo “Reconhecimento de voz: qual é a

capital de Santa Catarina?”.

Figura 112 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Speak the Words na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido

verificar as respostas incorretas referentes à pergunta, bem como mostrar
solução (as duas respostas corretas) e tentar novamente.

3.37 Speak the Words Set

Tipo de conteúdo de reconhecimento de voz que permite criar conjuntos de

perguntas a serem respondidas pela própria voz do usuário. No momento, o
mecanismo de fala usado está disponível apenas no navegador Chrome. É
necessário usar/instalar microfone.

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

H5P para Cursos de EaD da UAB/UFSC 132

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Speak the Words
Set.

3. Definir título para a atividade H5P: “Reconhecimento de voz”.

Exemplo: “Responda às questões em inglês”.

Figura 113 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Speak the Words Set na plataforma Moodle EaD-UFSC.

4. Marcar Introdução de exibição (opcional).

H5P para Cursos de EaD da UAB/UFSC 133

5. Adicionar questões: no mínimo três (sugestão).

6. Definir título da questão, em três etapas:

I: descrever a tarefa;

II: inserir a resposta aceita;

III: inserir texto de resposta incorreta, de resposta correta e linguagem

de entrada de fala.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Reconhecimento de voz”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo “Reconhecimento de voz: responda

às questões em inglês”.

Figura 114 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Speak the Words Set na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido verificar

as respostas incorretas referentes ao conjunto de perguntas, mostrar solução
(resposta correta de cada questão/pergunta) e tentar novamente.

H5P para Cursos de EaD da UAB/UFSC 134

3.38 Summary

Tipo de conteúdo que permite aos alunos construir, interativamente, um

resumo/revisão de um determinado tópico, ou reunião das principais
informações de um texto, vídeo ou apresentação, exibindo, ativamente,
um resumo do tópico em questão. Os resumos são uma maneira perfeita
de fortalecer nos alunos a capacidade de lembrar, incentivando-os a criar
sínteses interativas à medida que aprendem.

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Summary.

3. Definir título para a atividade H5P: “Revisão de tema”.

Exemplo: “Medidas de prevenção ao nCov-2019”.

H5P para Cursos de EaD da UAB/UFSC 135

Figura 115 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Summary na plataforma Moodle EaD-UFSC.

4. Descrever o texto de introdução: “Escolha a(s) afirmativa(s) correta(s) ...”.

5. Em Revisão: selecionar a guia padrão (sugestão).

6. Em Conjunto de afirmativas: adicionar mais afirmativas: a primeira é a

correta.

7. Inserir texto da dica (opcional).

8. Feedback geral e pontuação (opcional).

H5P para Cursos de EaD da UAB/UFSC 136

9. Configurar a página da atividade.

10. Finalizar a atividade de conteúdo H5P: “Resumo de tópicos”:

a) clicar no botão Salvar e voltar ao curso.

11. Visualização final da atividade-exemplo “Revisão de tema: medidas de

prevenção ao nCov-2019”.

Figura 116 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Summary na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido

verificar as respostas incorretas referentes ao conjunto de afirmações.

H5P para Cursos de EaD da UAB/UFSC 137

3.39 Timeline

Tipo de conteúdo H5P que permite criar eventos de linha do tempo com
multimídia (interativas).

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Timeline.

3. Definir título para a atividade H5P: “Linha do tempo”.

Exemplo: “Evolução da pandemia no mundo”.

H5P para Cursos de EaD da UAB/UFSC 138

Figura 117 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Timeline na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 139

4. Definir a linha principal: título do assunto (sugestão).

5. Escrever o texto de corpo da linha principal.

6. Inserir imagem de fundo (opcional).

7. Inserir URL da mídia: imagem.

8. Adicionar datas inicial e final do item.

9. Inserir título e texto de corpo da entrada de data do item: informações

sobre este intervalo de tempo.

10. Inserir mais informações: clicar em Adicionar item e repetir os

procedimentos 8 e 9.

11. Selecionar linguagem: português (brasileiro).

12. Configurar a página da atividade.

13. Finalizar a atividade de conteúdo H5P: “Linha do tempo”:

a) clicar no botão Salvar e voltar ao curso.

14. Visualização final da atividade-exemplo “Linha do tempo: evolução da

pandemia no mundo”.

Figura 118 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Timeline na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 140

Podemos observar que, durante a realização da atividade, é permitido
explorar o conjunto de afirmações referente aos intervalos de tempo.

3.40 True/False Questions

Tipo de conteúdo que permite criar perguntas de “verdadeiro ou falso”..

Roteiro Simplificado

1. Clique em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo-> marcar Criar Conteúdo ->True/False

Questions.

3. Definir título para a atividade H5P: “Questão de ‘verdadeiro ou falso’”.

Exemplo: “Contágio do novo Coronavírus”.

Figura 119 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P True/False Questions na plataforma Moodle EaD-UFSC.

4. Definir tipo de mídia: nenhuma; imagem; vídeo.

H5P para Cursos de EaD da UAB/UFSC 141

5. Marcar a resposta correta da afirmativa/questão: verdadeira ou falsa.

6. Em configurações comportamentais:

a) habilitar o botão Repetir;

b) habilitar o botão Mostra solução;

c) habilitar os botões Verificar” e “Repetir;

d) habilitar o botão Verificar automaticamente a resposta.

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Verdadeira ou falsa”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo “Questão de ‘verdadeiro ou falso’:

contágio do novo Coronavírus”.

Figura 120 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P True/False Questions na plataforma Moodle EaD-UFSC.

Podemos observar que, durante a realização da atividade, é permitido

marcar apenas uma opção (verdadeira ou falsa), mostrar solução e tentar
novamente.

3.41 Twitter User Feed

Tipo de conteúdo que permite mostrar o feed de usuários do Twitter com o

H5P.

H5P para Cursos de EaD da UAB/UFSC 142

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Twitter User Feed.

3. Definir título para a atividade H5P: “Comentários de usuários”.

Exemplo: “Feed da UFSC no Twitter”.

Figura 121– visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Twitter User Feed na plataforma Moodle EaD-UFSC.

4. Definir nome de usuário no Twitter: UFSC (sugestão).

5. Ativar o botão Mostrar resposta.

6. Definir o número de Tweets: no mínimo três (sugestão).

7. Configurar a página da atividade.

8. Finalizar a atividade de conteúdo H5P: “Comentários de Usuários do

Twitter”:

a) clicar no botão Salvar e voltar ao curso.

9. Visualização final da atividade-exemplo “Comentários de usuários: feed

da UFSC no Twitter”.

H5P para Cursos de EaD da UAB/UFSC 143

Figura 122 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Twitter User Feed na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite mostrar os cinco últimos comen-

tários de usuários seguidores da UFSC no Twitter.

3.42 Virtual Tour (360)

Tipo de conteúdo que permite aos usuários adicionar perguntas, texto e

interações a vários ambientes em 360º, usando apenas um navegador da
web.

Roteiro Simplificado

1. Clicar em Adicionar uma atividade -> Conteúdo Interativo H5P.

2. Selecionar tipo de conteúdo -> marcar Criar Conteúdo -> Virtual Tour (360).

3. Definir título para a atividade H5P: “Panorâmica Virtual”.

Exemplo: “Teatro Romano em Petra, na Jordânia”.

H5P para Cursos de EaD da UAB/UFSC 144

Figura 123 – visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Virtual Tour (360) na plataforma Moodle EaD-UFSC.

4. Adicionar cenas: selecionar o tipo de cena (imagem 360º ou estática).

5. Inserir cada cena com os direitos autorais e áudio (opcional): clicar Done.

6. Inserir botão Ir para a cena: links de conexão entre as cenas – ir para a

próxima cena ou voltar à cena anterior.

7. Inserir botão Texto: informações sobre a cena.

8. Inserir botão Imagem: imagem adicional sobre a cena.

9. Inserir botões Áudio e/ou Filme sobre a cena (opcional).

10. Configurar a página da atividade.

11. Finalizar a atividade de conteúdo H5P: “Visita virtual”:

a) clicar no botão Salvar e voltar ao curso.

H5P para Cursos de EaD da UAB/UFSC 145

12. Visualização final da atividade-exemplo “Panorâmica Virtual: Teatro
Romano em Petra, na Jordânia”.

Figura 124 – visualização final da atividade-exemplo.

Fonte: Conteúdo Interativo H5P Virtual Tour (360) na plataforma Moodle EaD-UFSC.

Podemos observar que a atividade permite criar um passeio “panorâmico”,

a partir da junção de várias imagens de um ambiente feitas de um mesmo
local. É possível também adicionar textos e interações a vários ambientes
em 360º, usando apenas um navegador da web.

3.43 [Link] for Chat and Talk

Tipo de conteúdo permite conversas por Vídeo Chat com transmissão ao

vivo pela plataforma DRUPAL.

Observação: na Plataforma Moodle-UFSC tem disponível o recurso independente Big

Blue Button Bn

Este tipo de recurso permite que o usuário participar em uma sala de

H5P para Cursos de EaD da UAB/UFSC 146

conversa por vídeo e chat online (transmissão ao vivo pela plataforma
de bate-papo por vídeo). Semelhante a uma videoconferência
ou uma conversa via webcam, mas diferentemente do Skype ou do Google
Hangouts, em que o usuário não precisa se inscrever para participar.
“Utilize o recurso Big Blue Button BN na plataforma moodle”

Roteiro Simplificado

1. Clicar em Adicionar uma atividade ou recurso -> BigBlueButtonBN.

2. Selecionar tipo de instância -> marcar Sala/Atividade somente ou com

gravação.

3. Definir título para o recurso do Moodle: “BigBlueButtonBN: Atendimento

Online pelo Moodle-UFSC”.

Exemplo: “Vídeo Chat Room: conversa por vídeo chat”.

H5P para Cursos de EaD da UAB/UFSC 147

Figura 125 – Visualização inicial da atividade-exemplo.

Fonte: Conteúdo Interativo H5P [Link] for Chat na plataforma Moodle EaD-UFSC.

4. Definir mensagem de boas vindas: “Atendimento On-line em tempo real

pela plataforma Moodle-UFSC ” (sugestão).

5. Adicionar os participantes: todos os usuários inscritos (sugestão).

6. Definir usuário da sala: professores (com papel de mediador).

7. Definir agendar para as sessões: habilitar datas e horários de abertura e

fechamento.

8. Configurar a disponibilidade do vídeo chat: mostrar na página do curso.

9. Finalizar o recurso do moodle: “Video Chat Room: conversa por vídeo chat”:

H5P para Cursos de EaD da UAB/UFSC 148

a) clicar no botão Salvar e voltar ao curso.

10. Visualização final do recurso-exemplo “Vídeo Chat Room: Conversa por

video chat”.

Figura 126 – visualização final do recurso-exemplo.

Fonte: Plataforma RNP de conferência web.

11. Ao entra na sessão, o participante irá ser direcionado a uma sala de

conferência web da UFSC na plataforma RNP.

12. Visualização da plataforma RNP de conferência web.

Figura 127 – visualização da sala de Vídeo Chat Room.

Fonte: Conteúdo Interativo H5P [Link] for Chat na plataforma Moodle EaD-UFSC.

H5P para Cursos de EaD da UAB/UFSC 149

Podemos observar que a atividade permite conversas por video chat, com
transmissão ao vivo pela plataforma. O usuário entra em uma sala de
conversa por vídeo e chat (transmissão ao vivo pela plataforma de bate-papo
por vídeo).

Considerações Finais

Esse ebook traz 43 roteiros simplificados de uso dos principais tipos de

conteúdos interativos com o auxílio da ferramenta plugin H5P na plataforma
Moodle Ufsc. Maiores detalhes então disponíveis no site oficial: [Link]
org/

H5P para Cursos de EaD da UAB/UFSC 150

REFERÊNCIAS

H5P. Create, share and reuse interactive html5 content in your

browser. Disponível em: < [Link] Acesso em: 20 mar.
2020.

UNIVERSIDADE FEDERAL DE SANTA CATARINA. Universidade

Aberta do Brasil, 2020. Disponível em: <[Link]
apresentacao/>. Acesso em: 11 mar. 2020.

UNIVERSIDADE FEDERAL DE SANTA MARIA. Núcleo de tecnologia

educacional. Ferramenta permite a criação de conteúdos interativos
no Moodle. Disponível em: <[Link]
suplementares/nte/2020/03/04/criacao-de-conteudos-interativos-
no-moodle/>. Acesso em: 19 mar. 2020.

WIKIPÉDIA. In: WIKIPÉDIA, a enciclopédia livre. H5P, 2020.

Disponível em: <[Link] Acesso
em: 20 mar. 2020.