×

## 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` e `circleOne.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 Web
  - `save.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:

1. Criar um banco de dados para o iFractions

   Por padrão, consideramos o nome do banco de dados como `db_iFractions` e a tabela como `iFractions`. 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_`.

2. 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)

3. Atualizar o arquivo `js/globals/globals_functions.js`

   Em `js/globals/globals_functions.js` existe uma função global chamada `sendToDatabase()`. Quando a informação do jogador é coletada ao final de cada jogo, o arquivo do jogo a envia para `sendToDatabase()` que, por sua vez, faz uma conexão assíncrona com `php/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...

Voltar Próximo - tecnologias utilizadas