Diretório Ifractions-web
O conteúdo do pacote Ifractions-web
está disposto da seguinte forma:
-
assets/
− com os diretórios que contém os arquivos de mídia-
audio/
− audios -
img/
− imagens e spritesheets -
lang/
− idiomas
-
-
js/
− com código JavaScript que define as telas e a lógica do jogo-
games/
-
squareOne.js
,squareTwo.js
ecircleOne.js
− contém os estados que correspondem às telas dos jogos
-
-
globals/
− contém os recursos globais do jogo-
globals_control.js
-
globals_debug.js
-
globals_functions.js
-
globals_tokens.js
-
-
menus/
menu_boot.js
menu_lang.js
menu_name.js
menu_main.js
menu_custom.js
-
moodle/
integrationFunctions.js
− contém recursos que permitem o funcionamento da Versão Moodle (incluido funções que conversam com o iTarefa)-
studentReport.js
− contém o estado que mostra o progresso do aluno na Versão Moodle
-
screens/
end.js
map.js
-
gameMechanics.js
provê todas ferramentas de jogabilidade e interação com o Canvas que são usadas no código
-
-
php/
− com código em PHP que estabelece a conexão com o banco de dados na Versão Websave.php
-
style/
− com os arquivos CSS que definem o estilo da página -
index.html
é o arquivo principal
Executando o iFractions localmente
Esta seção mostra como o programador pode utilizar o iFractions localmente. Analogamente, os passos podem ser usados para subir a Versão Web para o seu site ou instalar a Versão Moodle em um Moodle existente − para este último pode apenas ser feito pelo administrador do Moodle. Acesse os arquivos mencionados em downloads.
Versão Web
- Para utilizar essa versão é preciso ter instalado na máquina:
- um servidor local − por exemplo o Apache;
- MySQL e PHP se for desejado guardar as informações do aluno num banco de dados. Note que esta versão não precisa de conexão com o banco de dados para funcionar, apenas para guardar os dados do jogador.
-
O pacote
Ifractions-web.tar.gz
deve ser desempacotado no diretório do servidor local (geralmente/var/www/html
no Ubuntu); -
Assim, ele pode ser acessado no navegador por meio do endereço do servidor local (geralmente
http://localhost/Ifractions-web/
);
Versão Moodle
- Para utilizar essa versão é preciso ter:
- um Moodle instalado na máquina
- o pacote iTarefa instalado nesse Moodle
- O iTarefa disponibiliza diferentes iMAs que podem ser criados como atividade pelo professor e acessados pelo aluno − dentre eles o iFractions.
-
O arquivo
README.md
no repositório do iTarefa explica o processo de instalação e uso do módulo.
Configurando o banco de dados
O iFractions executa a conexão com o banco de dados de forma diferente nas duas versões. Para mais informações sobre os requisitos de cada versão veja a seção acima.
Versão Web (PHP e MySQL)
Esta versão utiliza um banco de dados MySQL e um arquivo PHP php/save.php
que
gerencia a conexão entre o iFractions e o bando de dados. É usado o Fetch API
para acessar
este arquivo de forma assíncrona usando o método HTTP POST
.
Tendo instalado todos requisitos, para que seja possível estabelecer uma conexão entre o iFractions e banco de dados de forma correta é preciso fazer as seguintes configurações:
- Criar um banco de dados para o iFractions
Por padrão, consideramos o nome do banco de dados como
db_iFractions
e a tabela comoiFractions
. Assim, é possível configurar o banco de dados MySQL da seguinte forma:CREATE DATABASE db_ifractions; USE db_ifractions; CREATE TABLE ifractions ( line_id int(11) NOT NULL AUTO_INCREMENT, line_hostip varchar(255) DEFAULT NULL, line_playername varchar(256) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_datetime varchar(20) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_lang varchar(6) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_game varchar(10) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_mode varchar(1) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_operator varchar(5) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_level int(5) NOT NULL, line_mappos int(5) NOT NULL, line_result varchar(6) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_time varchar(20) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, line_details varchar(120) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (line_id) ) ENGINE = InnoDB AUTO_INCREMENT = 1 DEFAULT CHARSET = latin1;
Note que cada coluna da tabela usa o prefixo
line_
. - Atualizar o arquivo
php/save.php
É preciso definir os valores para algumas variáveis em
php/save.php
de acordo a configuração do banco de dados como aparece a seguir:$servername = "localhost"; // INSERT MySQL server $username = "put_username"; // INSERT MySQL user name $password = "put_password"; // INSERT MySQL password $dbname = "db_ifractions"; // INSERT database name (default=db_ifractions) $tablename = "ifractions"; // INSERT table name (default=ifractions)
- Atualizar o arquivo
js/globals/globals_functions.js
Em
js/globals/globals_functions.js
existe uma função global chamadasendToDatabase()
. Quando a informação do jogador é coletada ao final de cada jogo, o arquivo do jogo a envia parasendToDatabase()
que, por sua vez, faz uma conexão assíncrona comphp/save.php
, permitindo o envio das informações para o banco de dados.const data = 'line_ip='// INSERT the IP of the machine where the MySQL was set up + '&line_name=' + // player's name + '&line_lang=' + // selected language for the game + // data received from the game as parameter to this function
Onde a conexão é estabelecida no código
Existe uma função chamada postScore()
dentro de cada estado de jogo −
js/games/squareOne.js
, js/games/squareTwo.js
e
js/games/circleOne.js
.
Assim, sempre que o jogador termina uma fase (tendo ele acertado ou não), antes de voltar para o
mapa
de
fases, a função postScore()
é chamada. Ela concatena toda informação sobre o
progresso do
jogador numa string que é passada como parâmetro para a função global
sendToDatabase()
(de js/globals/globals_functions.js
) que a envia para o banco de dados.
const data = '&line_game=' + // collect game shape
+ '&line_mode=' + // collect game mode type
+ '&line_oper=' + // collect game math operation type
+ '&line_leve=' + // collect the selected difficulty for the game
+ '&line_posi=' + // collect the players position on the map
+ '&line_resu=' + // collect status for players answer (correct or incorrect)
+ '&line_time=' + // collect time spent finishing the game
+ '&line_deta=' + // collect extra details specific to current game
Versão Moodle
Esta versão utiliza o banco de dados do próprio Moodle, não precisando criá-lo manualmente.
Onde os dados são coletados
Em construção...