‘

UNIVERSIDADE SALVADOR – UNIFACS

ESCOLA DE ENGENHARIA, ARQUITETURA E TI – EAETI
CURSO DE CIÊNCIA DA COMPUTAÇÃO

MÁRIO MONTINO DOS SANTOS

DESENVOLVIMENTO DE UM SERIOUS GAME PARA

AUXÍLIO NA FIXAÇÃO DO CONHECIMENTO.
UM ESTUDO DE CASO NA ESCOLA SEMPRE VIVA

Salvador – Bahia
2016
‘

UNIVERSIDADE SALVADOR – UNIFACS

ESCOLA DE ENGENHARIA, ARQUITETURA E TI – EAETI
CURSO DE CIÊNCIA DA COMPUTAÇÃO

MÁRIO MONTINO DOS SANTOS: 029131043

DESENVOLVIMENTO DE UM SERIOUS GAME PARA

AUXÍLIO NA FIXAÇÃO DO CONHECIMENTO.
UM ESTUDO DE CASO NA ESCOLA SEMPRE VIVA

Trabalho de Conclusão do Curso em Ciência da

Computação da Universidade Salvador, como
requisito parcial para obtenção do título de
Bacharel.

Orientador: Prof. MsC. Alex de Oliveira Coelho

Salvador – Bahia
2016
‘

DESENVOLVIMENTO DE UM SERIOUS GAME PARA

AUXÍLIO NA FIXAÇÃO DO CONHECIMENTO.
UM ESTUDO DE CASO NA ESCOLA SEMPRE VIVA
MÁRIO MONTINO DOS SANTOS, MsC. ALEX DE OLIVEIRA
COELHO

UNIVERSIDADE SALVADOR – UNIFACS

ESCOLA DE ENGENHARIA, ARQUITETURA E TI
Av. Luís Viana Filho, 3146. Paralela – 41.720-200 – Salvador – BA – Brasil

mario.montino@hotmail.com¹
alex.coelho@unifacs.br²

Resumo: O uso de jogos como metodologia de ensino tem se destacado em trabalhos

recentes na comunidade científica. Este artigo apresenta o desenvolvimento de um Serious
Game com o objetivo de auxiliar os estudantes na fixação do conhecimento adquirido
durante o ano letivo. Foi utilizado o framework MEAN Stack para possibilitar uma rápida
implementação do sistema, por ser fundamentada na linguagem JavaScript tanto no cliente
como no servidor e no banco de dados. E, por fim, serão apresentados os resultados da
exposição do jogo em uma turma da Escola Sempre Viva.

Abstract: The use of games as an education methodology has gain attention in the
community with the latest works. This paper presents the development of a Serious Game
with the intention to help the students to keep the information acquired in class during the
school year. It was used the framework MEAN Stack that possibilites a quick
implementation of the system, because it is based on the JavaScript language either on
client or server besides database. And, as a conclusion, it will be present the results of the
methodology based on the game interaction with students at the school Sempre Viva.

Keywords: Serious Game, MEAN STACK, Escola Sempre Viva.

____________________________
¹ Graduando do curso de Ciência da Computação pela Universidade Salvador – UNIFACS.
² Graduado em Ciência da Computação pela Universidade Salvador, pós-graduado em Aplicações WEB e Mestre em
Computação pela Faculdade Senai. Professor da UNIFACS.
‘

1 INTRODUÇÃO
Os jogos, em gerais, são vistos como uma forma de entretenimento. Mas, estudos recentes
comprovam que sua utilização em várias áreas do saber, fazem uma ligação natural com a
educação, pois fornecem novas formas de aplicação do conhecimento por meio de desafios
propostos ao jogador [12].
Quando os jogos partem para a vertente da educação são classificados como Serious
Games. O surgimento deste termo foi estabelecido na década de 1970, caracterizado como
jogos educacionais que abrangem quaisquer áreas de conhecimento independente de faixa
etária. Eles facilitam na transmissão de conceitos e fatos, contribuem no desenvolvimento
de estratégias, na tomada de decisão, no desempenho de papéis, além de gerar um
ambiente com feedbacks instantâneos[7].
Portanto, o presente estudo irá apresentar, a nível conceitual, as principais tecnologias
utilizadas no desenvolvimento de do jogo e a sua utilização na Escola Sempre Viva,
analisando também a eficácia do uso desta ferramenta na fixação do conhecimento.

2 JUSTIFICATIVA
Durante o período de aprendizado o cérebro humano armazena as informações em
memória de duas formas. Elas são classificadas, quanto ao tempo, em: memória de
trabalho e memória de longo prazo [13]. A de trabalho é acionada no instante de aquisição
da informação, ela guarda os dados por alguns segundos e, depois, é descartada ou
armazenada pela memória de longo prazo, que, por sua vez, tem uma capacidade
extremamente grande.
Um dos motivos que levam a memória de trabalho a descartar uma informação é a
ausência de uma leitura fluente e automatizada que resulta na falta de compreensão do
assunto abordado [11]. Mas, se o assunto for bem compreendido e, frequentemente
revisado, esses dados serão armazenados na memória de longo prazo.
A partir desse conhecimento, surgiu a necessidade de desenvolver, rapidamente [8], um
serious game para auxiliar a memória de trabalho a encaminhar as informações para a de
longo prazo, assegurando a fixação do conhecimento.

2.1 OBJETIVOS
Este estudo tem por objetivo apresentar o uso do framework MEAN, no desenvolvimento
de um jogo educativo. Para isso será realizado uma pesquisa das tecnologias que a
compõem. Buscando, também, apresentar o desempenho das funções do jogo, de forma,
auxiliadora para o cérebro.

1
‘

2.1.1 OBJETIVO GERAL

● O objetivo deste projeto é gerar um jogo educativo onde o jogador possa ser
auxiliado a fixar seu conhecimento através das perguntas lançadas e feedbacks
recebidos.

2.1.2 OBJETIVOS ESPECÍFICOS

● Receber uma análise de seu conhecimento nos principais assuntos da disciplina de
Ciências do 4º do fundamental;
● Ver os assuntos em que teve os maiores números de acertos;
● Ser informado dos assuntos em que não teve êxito nas respostas;
● Frequentemente, revisar todos os assuntos estudados;
● Alta performance, não travar;
● Design atraente e intuitivo.

3 METODOLOGIA
O presente estudo está compreendido em três etapas: Fase I, Fase II e Fase III. Durante a
Fase I, foi feito a especificação dos requisitos funcionais e não-funcionais da aplicação e o
levantamento do referencial teórico que corresponde o estudo do framework MEAN.
Na Fase II, foi realizado o desenvolvimento da aplicação, englobando a camada do cliente
(Front-end), e a camada do servidor de aplicação e banco de dados (Back-end).
E a Fase III compreende a realização da exposição do jogo para os alunos da Escola
Sempre Viva. O objetivo é identificar a utilização do game e as possíveis melhorias da
eficácia das funcionalidades que podem ser implementadas no desenvolvimento. Após a
coleta dos dados, os mesmos foram tratados e analisados para serem descritos nos
resultados da pesquisa do presente artigo.

4 FUNDAMENTAÇÃO TEÓRICA
Neste capítulo serão abordadas as principais tecnologias do framework MEAN Stack na
sua parte conceitual, servindo de base para o presente estudo de caso.
O termo MEAN foi criado em 2013 por Valeri Karpov, para denotar o uso de uma pilha
completa de tecnologias para o desenvolvimento de aplicações web [1]. Ela foi o resultado
de uma aposta na onipresença da linguagem JavaScript, de forma que a comunidade possa
contribuir com mais tecnologias baseadas em JavaScript para essa pilha.
A onipresença da linguagem facilita na integração das equipes, pois tanto o front-end
quanto o back-end estarão trabalhando na mesma linguagem.
MEAN são as iniciais das tecnologias: MongoDB, Express, AngularJS e NodeJS.

2
‘

4.1 O BANCO DE DADOS

O banco de dados utilizado na MEAN é o MongoDB. Ele tem o formato JSON e é do tipo
não relacional (NoSQL). O NoSQL rompe com a longa história dos bancos relacionais,
com as propriedades ACID – Atomicidade, Consistência, Isolamento e Durabilidade.

4.1.1 JSON
O JSON (JavaScript Object Notation), é um formato de texto serializado com dados em
forma estruturada, seguindo o padrão definido no standard ECMAScript [5].
O JSON está estruturado em objetos e vetores. Um vetor é uma sequência ordenada de zero
ou mais valores. O objeto é uma coleção não ordenada de zero ou mais pares chave/valor, a
chave é uma string e o valor pode ser vetor, string, número, booleano, nulo ou, até mesmo,
um novo objeto, conforme o código na figura 1.

Figura 1: Estrutura JSON.

4.1.2 MONGODB
O MongoDB é composto por um conjunto de coleções (collections) e cada coleção é um
agrupamento de objetos javascript (JSON).
Suas principais características são: flexibilidade e escalabilidade, além da abstenção de um
ORM (Object-relational Mapper) e da velocidade de acesso.
Por padrão, o Mongo não ajuda muito com a validação de dados, devido ser fracamente
tipado, onde boa parte da responsabilidade das regras de validação fica nas mãos dos
desenvolvedores.
Contudo, essa responsabilidade pode ser transferida para o Mongoose (ODM – Object-
document Mapper), módulo que permite a criação de Schemas. Schemas são modelos de
estrutura de dados JSON. Onde é definido cada campo da collection com seu tipo, atributos
e validação. Conforme o a figura 2:

3
‘

Figura 2: Schema no Mongoose.

4.2 EXPRESS JS
O Express JS é um framework da família do Node.js que fornece diversos recursos
robustos para o desenvolvimento de aplicativos web e móvel, tudo isso de forma rápida,
flexível e minimalista.
Ele dispõe de uma grande quantidade de métodos utilitários HTTP e middleware. Um
recurso muito utilizado é o de roteamento (ou rotas), que é responsável por mapear todas as
requisições HTTP de uma URI (caminho), também chamado de Endpoint [4]. Em geral,
ele disponibiliza REST Endpoints que são consumidos pelos templates do AngularJs.
As rotas estão estruturadas em:
● Uma instância do express - app;
● Método de solicitação HTTP (GET, POST, PUT, DELETE...);
● Caminho no servidor - URI;
● A função a ser executada.

A figura 3, ilustra a definição de uma rota simples para o método GET, que responde “Bem
vindo!” quando recebe uma requisição na página inicial.

Figura 3: Roteamento com Express JS .

4
‘

4.3 ANGULARJS
O AngularJS é um framework MVC para Single Page Web Applications, que fica no lado
do cliente (Front-end) [1]. O MVC é um padrão de arquitetura de software que foi criado
com o intuito de otimizar e estruturar o desenvolvimento do front-end. Para isso a
codificação foi divida em três camadas:
● Model - camada que corresponde ao modelo de dados por trás da aplicação;
● View - camada responsável por gerar uma representação visual dos dados contidos
no modelo;
● Controller - nesta camada, estão presentes todas as regras de negócios. O
controlador é quem envia comandos para alterar a visualização dos dados do
modelo em que estão associados.
Com esse padrão de desenvolvimento, o Angular, permite separar as responsabilidades,
onde cada contexto tem sua própria view, model e controller. E, também, é possível a
criação de componentes, com o fim de evitar trechos de códigos HTML repetidos.
Outro ponto forte é a orientação a dados, no qual não existe a manipulação de DOM, os
dados são refletidos automaticamente na view por meio de data-binding bidirecional com o
uso do atributo “ng-model”. Na figura 4 é possível visualizar o uso de data-binding na
view da página de “Editar Questão”, na qual tem um campo de texto que ao digitar um
valor, será atualizado automaticamente na variável que se encontra no modelo.

Figura 4: Uso de data-binding na View.

4.4 NODEJS
O NodeJS é uma plataforma orientada a eventos construída em cima do motor JavaScript
do Google Chrome, com o intuito de construir aplicações de rede rápidas e escaláveis.
Diferente das plataformas tradicionais (.NET, Java, PHP…), o Node conseguiu resolver o
problema da paralisação do processamento do servidor enquanto utilizava um I/O, pois sua
arquitetura inovadora é totalmente non-blocking thread. E apresenta uma boa performance
com o consumo de memória, além de utilizar eficientemente o poder de processamento do
servidor em sua totalidade.
Sua implementação se assemelha muito com a orientação a eventos do Angular, a única
diferença é que seus eventos não são relacionados a hardwares, tais como mouse e teclado.
Mas, são relacionados com conexões de banco de dados, interações com arquivos e até
mesmo streaming de dados.
A figura 5, mostra como é fácil e rápido de se criar um servidor com NodeJS. E na figura 6
tem o exemplo de eventos de conexão com o banco de dados MongoDB.

5
‘

Figura 5: Criação de um Servidor com NodeJS.

Figura 6: Eventos de conexão com o MongoDB.

5 O ESTUDO DE CASO
No segundo semestre de 2016, foi aplicado o jogo na disciplina de Ciências com 9 alunos
do 4º ano do fundamental. Por se tratar de um jogo auto-explicativo e com design intuitivo,
não houve a necessidade de treinar os alunos para jogá-lo. Eles conseguiram compreender
sua usabilidade facilmente.
O jogo foi avaliado com o objetivo de obter o impacto na motivação, experiência de
usuário e aprendizagem. Ele estava contido de 22 questões, dividida em 4 módulos, com os
assuntos de todo o ano letivo. Cada questão continha 4 alternativas de resposta, sendo
apenas uma correta.
Para a aplicação, a turma foi dividida em três trios de alunos, sendo eleito um representante
de cada trio para manusear o jogo e juntamente com seus outros dois colegas responderem
ao questionário do jogo. Os alunos foram informados, antecipadamente, que neste dia seria
realizada uma atividade na forma de jogo e que não iria compor nota.

6
‘

6 RESULTADOS
Conforme os dados obtidos na exposição do jogo na Escola Sempre Viva, o gráfico 1
apresenta o desempenho das três equipes, mostrando os módulos que aparentam uma maior
compreensão e fixação dos assuntos abordados.

Gráfico 1: Desempenho das equipes.

A partir da análise do gráfico 1 fica notório que maior parte das respostas erradas foram
nas unidades 3 e 4, nas quais os assuntos foram vistos no início do ano letivo.
Demonstrando a necessidade da revisão desses assuntos para uma melhor compreensão e
fixação na memória de longo prazo. Percebeu-se, também, que, em geral, os assuntos
vistos na segunda metade do ano letivo, nas unidades 5 e 6, tiveram as maiores quantidades
de acertos, demonstrando que foram bem compreendidos e que, ainda, estão recentes em
memória. No gráfico 2 é apresentado o tempo gasto das três equipes para responder todas
as questões do jogo.

Gráfico 2: Tempo gasto pelas equipes.

Analisando a quantidade de acertos e o tempo gasto, a equipe 3 foi a que teve destaque,
com o menor tempo gasto e com o maior número de êxito nas respostas, cometendo erro
somente nas questões da unidade 3.

7
‘

Com os feedbacks obtidos após a resolução de cada questão, o jogo serviu, também, de
revisão dos assuntos para os alunos.

7 CONCLUSÃO
Neste artigo foi apresentado um estudo de caso, no qual foi investigado o quanto os alunos
mantêm fixados e compreendidos os assuntos vistos durante o período letivo. Para tanto foi
selecionado os principais conceitos das quatro unidades estudada pela turma. Através da
análise dos dados, identificou-se a importância da utilização do jogo, nesta disciplina,
como ferramenta para auxílio na fixação e compreensão dos assuntos.

8 REFERÊNCIAS BIBLIOGRÁFICAS

[1] ALMEIDA, Flávio. Mean: Full stack JavaScript para aplicações web com MongoDB,
Express, Angular e Node. Editora Casa do Código, 2015.
[2] BOAGLIO, Fernando. MongoDB: Construa novas aplicações com novas tecnologias.
Editora Casa do Código, 2015.
[3] COLBEK, Rudieri Turchiello. Estudo comparativo de tecnologias para
desenvolvimento de um protótipo de objeto de aprendizagem voltado ao ensino de vetores.
Disponível em: <http://bibliodigital.unijui.edu.br:8080/xmlui/bitstream/handle/123456789/
2040/TCC_Rudieri_Final.pdf>. Acesso em: 2016-10-20.
[4] EXPRESSJS.COM. Roteamento Básico. Disponível em: <http://expressjs.com/pt-
br/starter/basic-routing.html>. Acesso em: 2016-11-05.
[5] FONSECA, Rúben; SIMÕES, Alberto. Alternativas ao XML: YAML e JSON.
Disponível em: <http://repositorium.sdum.uminho.pt/bitstream/1822/6230/1/xmlyamljson
07.pdf>. Acesso em: 2016-10-27.
[6] JUNIOR, Venilton Falvo; DEGROSSI, Livia Castro; DA SILVA, José Dario Pintor;
BARBOSA, Ellen Francine. Uma comparação do tempo de implementação: Android vs.
HTML5. Disponível em: <http://www.lbd.dcc.ufmg.br/colecoes/eselaw/2013/005.pdf/>.
Acesso em: 10/08/2016.
[7] LEMES, David de Oliveira. Serious games - jogos e educação. Disponível
em:<http://www.abrelivros.org.br/home/index.php/bienal-2014/resumos-e-fotos/5647-
primeiro-resumo>. Acesso em 02/11/2016
[8] LENNON, Joe. Desenvolva um aplicativo de pesquisas em tempo real com Node.js,
Express, AngularJS e MongoDB. IBM developerWorks – CTO at ePubDirect Core
International, 2014. Disponível em: <https://pdfs.semanticscholar.org/94a0/4d41d64e24b
33d45838dc805566b92e18591.pdf>. Acesso em: 2016-10-05.
[9] MINUSSI, Marlon Mendes; WYSE, Angela Terezinha de Souza. Web-Game
educacional para ensino e aprendizagem de Ciências. V. 14, n. 1. Revista RENOTE, 2016.
8
‘

[10] PRANANTHA, Danu; BELLOTTI, Francesco; BERTA, Ricardo; DE GLORIA,

Alessandro. Puzzle-it: Na HTML5 Serious Games Platform for education. Disponível em:
<http://link.springer.com/chapter/10.1007%2F978-3-642-33466-5_15/>. Acesso em:
10/08/2016.
[11] PIPER, Francieli Kramer. A importância da memória de trabalho para a
aprendizagem. Disponível em: <http://ebooks.pucrs.br/edipucrs/anais/XIII_semanadeletras
/pdfs/francielipiper.pdf>. Acesso em: 2016-10-05.

[12] RODRIGUES, Mariana Hortolani. Criação, desenvolvimento e aplicação de serious

game educativo para prevenção em saúde bucal infantil - 'Caí, perdi um dente... E aí?".
2014. Dissertação (Mestrado em Odontopediatria) - Faculdade de Odontologia de Bauru,
University of São Paulo, Bauru, 2014.
[3] RODRIGUES, Mariana Hortolani. Criação, desenvolvimento e aplicação de serious
game educativo para prevenção em saúde bucal infantil - 'Caí, perdi um dente... E aí?".
Disponível em: <http://www.teses.usp.br/teses/disponiveis/25/25145/tde-16042015-
102716/en.php/>. Acesso em: 10/08/2016.
[13] VARELLA, Drauzio. Entrevista com Roberto Godoy sobre memória. Disponível em:
<https://drauziovarella.com.br/corpo-humano/memoria/>. Acesso em: 2016-10-05.