TÉCNICAS DE GAMIFICAÇÃO: BARRA DE PROGRESSO

Alexia Islabão dos Santos

A barra de progresso é um recurso útil para indicar a navegação e a conclusão das atividades.
Através dela é possível visualizar o progresso do aluno dentro do curso. O aluno pode visualizar
quais atividades ele já concluiu e quais ainda faltam.

Conforme figura acima, cada barra significa uma atividade dentro do curso. As barras
verdes são atividades já concluídas e as barras azuis são atividades que ainda estão pendentes.
A barra de progresso também funciona como uma ferramenta de navegação, pois cada barra
funciona como um link direto para sua respectiva atividade.
 Para adicionar uma barra de progresso em seu curso abra a tela inicial do seu curso,
clique em “Ativar edição” para ativar a edição do curso e procure pela parte de “Adicionar
bloco”.

Adicione o bloco chamado “Barra de Progresso”. Deve aparecer na lateral do seu curso
o seguinte recurso.

Então clique no botão “Selecione as atividades / recursos” para selecionar quais

atividades do seu curso devem aparecer na barra de progresso. Você será levado para uma
página listando todas as atividades e materiais do seu curso para você selecionar quais deseja
que apareçam na barra de progresso.
 Nesta tela de configuração da barra de progresso você pode definir para que as
atividades sejam exibidas na barra conforme a ordem exibida no curso.

E após, para cada atividade ou material que você criou no curso você pode selecionar
se este material poderá ser monitorado pelo aluno através da barra de progresso ou não. Ou
seja, se este material irá ou não aparecer na barra de progresso do curso.

Na página de configuração você verá uma lista de todos os recursos que você criou, que
podem ser monitorados pelo bloco barra de progresso. O recurso só será monitorado e
aparecerá como um pequeno bloco na barra de progresso se a respectiva atividade ou recurso
for definida como “Sim” no campo “Monitorado”.

O objetivo deste bloco é incentivar os alunos a gerir o seu tempo de forma eficaz. Cada
aluno pode monitorar seu progresso no que diz respeito a completar as atividades e visualizar
os recursos que você criou dentro do curso.
 ARQUIVO: CÓDIGOS UTILIZADOS

Reunimos aqui os códigos HTML apresentados nos textos anteriores, para facilitar
o seu acesso aos mesmos.

1º Faixa (pode ser utilizada para o painel de conquistas ou para a conclusão de

um módulo):

<div style="width: 85%; text-align: center; position: relative; left: 35px;">

<div style="content: ''; line-height: 0; border-style: solid; border-width: 20px;
position: absolute; top: 10px; z-index: -2000; width: 5px; border-color: #d62828
#d62828 #d62828 transparent; left: -35px;"></div>
<div style="background: #d62828; position: relative; margin: 20px auto; width:
100%; color: #fff; line-height: 40px; height: 40px; font-size: 16px; text-align:
center; font-weight: bold;">
<div class="conteudo">Meu Painel de Conquistas</div>
</div>
<div style="content: ''; line-height: 0; border-style: solid; border-width: 20px;
position: absolute; top: 10px; z-index: -2000; width: 5px; border-color: #d62828
transparent #d62828 #d62828; right: -35px;"></div>
</div>

Obs. Basta alterar a cor e o texto para que a faixa fique conforme preferir. Para saber
como alterar a cor, volte até o texto “Técnicas de gamificação: Medalhas e conquistas”.

2º Medalhas do painel de conquistas:

<div style="background: #FFECBD; width: 90%; padding: 10px; -moz-border-

radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;">
<span id="docs-internal-guid-b4e3d3f0-8d81-0892-ff45-d4609eee5484"><span
id="docs-internal-guid-b4e3d3f0-8d81-0892-ff45-d4609eee5484">
<img src="" width="28" height="28" />
</span> </span>
<strong>Primeiro módulo concluído com sucesso!</strong>
</div>

3º Post-it:

<div style="width:100%;"><div style="margin-left: 5px; margin-right: 10px;

margin-top: 10px; background: #fefabc; padding:15px;
font-family: 'Gloria Hallelujah', cursive;
font-size:15px; color: #000;
width:92%;
-moz-transform: rotate(-0.8deg);
-webkit-transform: rotate(-0.8deg);
-o-transform: rotate(-0.8deg);
-ms-transform: rotate(-0.8deg);
transform: rotate(-0.8deg);
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;">
Caros cursistas,<br><br>
bem vindos ao curso de Professor para a Educação a Distância! <br><br>
Bons estudos!
</div>

4º Personagem:

<div style="width: 100%;">

<div style="margin-left: 5px; margin-right: 10px; margin-top: 10px; background:
#f9f2e7; padding: 15px; font-family: 'Gloria Hallelujah', cursive; font-size: 15px;
color: #000; width: 92%; -moz-transform: rotate(-0.8deg); -webkit-transform:
rotate(-0.8deg); -o-transform: rotate(-0.8deg); -ms-transform: rotate(-0.8deg);
transform: rotate(-0.8deg); box-shadow: 0px 4px 6px #333; -moz-box-shadow:
0px 4px 6px #333; -webkit-box-shadow: 0px 4px 6px #333;">
<img src="" width="101" height="101"/>
<span style="font-size: medium;">
<span style="font-size: large;">
<strong>Olá, bem vindos ao curso!</strong>
</span></span>
</div>
</div>