|
@@ -0,0 +1,438 @@
|
|
|
+
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang='pt-br'>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset='UTF-8'>
|
|
|
+ <meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
|
|
+
|
|
|
+ <meta name="description" content="Collection of educational games for teaching fractions" />
|
|
|
+ <meta name="keywords" content="ifractions, ifrações, fraction, game, private data, math, moodle" />
|
|
|
+
|
|
|
+ <link rel="icon" type="image/ico" href="../../assets/flag_icon.png">
|
|
|
+ <link rel="stylesheet" href="../../style/bootstrap/bootstrap.min.css">
|
|
|
+ <link rel='stylesheet' href="../../style/style.css">
|
|
|
+
|
|
|
+ <title>iFractions | Área do Desenvolvedor</title>
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="../../style/prism/prism-default.css">
|
|
|
+ <script src="../../script/prism/prism.js"></script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body class="container-flex">
|
|
|
+
|
|
|
+
|
|
|
+ <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
|
|
|
+ </nav>
|
|
|
+
|
|
|
+
|
|
|
+ <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
|
|
|
+ class="btn btn-primary">↑</button>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="myModal" class="modal">
|
|
|
+ <span class="close">×</span>
|
|
|
+ <img class="modal-content" id="myModal-img" src="">
|
|
|
+ <div id="caption"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <header class="jumbotron jumbotron-flex p-5">
|
|
|
+ <nav aria-label="breadcrumb">
|
|
|
+ <ol class="breadcrumb">
|
|
|
+ <li class="breadcrumb-item"><a href="../../index.html">Início</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="../documentacao.html">Documentação</a></li>
|
|
|
+ <li class="breadcrumb-item active" aria-current="page">Área do Desenvolvedor - início</li>
|
|
|
+ </ol>
|
|
|
+ </nav>
|
|
|
+ <h1 class="display-4">Área do Desenvolvedor</h1>
|
|
|
+ <hr class="display-4">
|
|
|
+ <p class="lead">
|
|
|
+ Esta página apresenta detalhes da implementação do iFractions. É indicada para desenvolvedores que desejam
|
|
|
+ colaborar com o projeto, tem curiosidade sobre o funcionamento da ferramenta ou desejam incorporá-la ao
|
|
|
+ seu site ou a um Moodle preexistente.
|
|
|
+ </p>
|
|
|
+ </header>
|
|
|
+
|
|
|
+
|
|
|
+ <main class='container-flex'>
|
|
|
+ <div class="row">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="col-lg-2 text-start p-1"></div>
|
|
|
+
|
|
|
+ <div class="col-lg-8 px-5">
|
|
|
+
|
|
|
+ <section id="sec-diretorio">
|
|
|
+ <h2>Diretório <code>Ifractions-web</code></h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ O conteúdo do pacote <code>Ifractions-web</code> está disposto da seguinte forma:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-3">
|
|
|
+ <img src='img/diretorio.png' class='ifr__img img-responsive' width='100%' alt='Diretórios do pacote.'>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-9 ifr__noBullet ">
|
|
|
+ <ul class="my-bordered-list">
|
|
|
+ <li>
|
|
|
+ <code>assets/</code> − com os diretórios que contém os arquivos de mídia
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <code>audio/</code> − audios
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>img/</code> − imagens e spritesheets
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>lang/</code> − idiomas
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>js/</code> − com código JavaScript que define as telas e a lógica do jogo
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <code>games/</code>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <code>squareOne.js</code>, <code>squareTwo.js</code> e <code>circleOne.js</code> − contém os
|
|
|
+ estados
|
|
|
+ que correspondem às telas dos jogos
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>globals/</code> − contém os recursos globais do jogo
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <code>globals_control.js</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>globals_debug.js</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>globals_functions.js</code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>globals_tokens.js</code>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>menus/</code>
|
|
|
+ <ul>
|
|
|
+ <li><code>menu_boot.js</code></li>
|
|
|
+ <li><code>menu_lang.js</code></li>
|
|
|
+ <li><code>menu_name.js</code></li>
|
|
|
+ <li><code>menu_main.js</code></li>
|
|
|
+ <li><code>menu_custom.js</code></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>moodle/</code>
|
|
|
+ <ul>
|
|
|
+ <li><code>integrationFunctions.js</code> − contém recursos que permitem o funcionamento da
|
|
|
+ <b>Versão Moodle</b> (incluido funções que conversam com o iTarefa)
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>studentReport.js</code> − contém o estado que mostra o progresso do aluno na <b>Versão
|
|
|
+ Moodle</b>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>screens/</code>
|
|
|
+ <ul>
|
|
|
+ <li><code>end.js</code></li>
|
|
|
+ <li><code>map.js</code></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>gameMechanics.js</code> provê todas ferramentas de jogabilidade e interação com o
|
|
|
+ Canvas que são usadas no código
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>php/</code> − com código em PHP que estabelece a conexão com o banco de dados na
|
|
|
+ <b>Versão Web</b>
|
|
|
+ <ul>
|
|
|
+ <li><code>save.php</code></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>style/</code> − com os arquivos CSS que definem o estilo da página
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <code>index.html</code> é o arquivo principal
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <hr class="display-4" />
|
|
|
+
|
|
|
+ <section id="sec-local">
|
|
|
+ <h2>Executando o iFractions localmente</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Esta seção mostra como o programador pode utilizar o iFractions localmente. Analogamente, os passos
|
|
|
+ podem ser usados para subir a <i>Versão Web</i> para o seu site ou instalar a <i>Versão Moodle</i> em um
|
|
|
+ Moodle existente − para este último pode apenas ser feito pelo administrador do Moodle. Acesse os
|
|
|
+ arquivos mencionados em <a href="../../index.html#download">downloads</a>.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <section id="local__web">
|
|
|
+ <h3 class='ifr__color__lightBlue'>Versão Web</h3>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ Para utilizar essa versão é preciso ter instalado na máquina:
|
|
|
+ </li>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ um servidor local − por exemplo o <a target="_blank" href='http://www.apache.org/'>Apache</a>;
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a target="_blank" href='https://www.mysql.com/'>MySQL</a> e <a target="_blank"
|
|
|
+ href='https://www.php.net/'>PHP</a> se
|
|
|
+ for
|
|
|
+ desejado
|
|
|
+ guardar as informações do aluno num banco de dados. <em>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</em>.
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <li>
|
|
|
+ O pacote <code>Ifractions-web.tar.gz</code> deve ser desempacotado no diretório do servidor
|
|
|
+ local (geralmente <code>/var/www/html</code> no Ubuntu);
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ Assim, ele pode ser acessado no navegador por meio do endereço do servidor local (geralmente
|
|
|
+ <code>http://localhost/Ifractions-web/</code>);
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="local__moodle">
|
|
|
+ <h3 class='ifr__color__lightBlue'>Versão Moodle</h3>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ Para utilizar essa versão é preciso ter:
|
|
|
+ </li>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ um <a target="_blank" href='https://moodle.org/'>Moodle</a> instalado na máquina
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ o pacote <a target="_blank" href='https://moodle.org/plugins/mod_iassign'>iTarefa</a> instalado nesse
|
|
|
+ Moodle
|
|
|
+ </li>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ O iTarefa disponibiliza diferentes iMAs que podem ser criados como atividade pelo
|
|
|
+ professor e
|
|
|
+ acessados pelo aluno − dentre eles o <strong>iFractions</strong>.
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ O arquivo <code>README.md</code> no <a target="_blank"
|
|
|
+ href='http://200.144.254.107/git/LInE/iassign'>repositório do
|
|
|
+ iTarefa</a> explica
|
|
|
+ o processo de instalação e uso do módulo.
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </ul>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ .: Quick install instructions (to be used by the system administrator) :.
|
|
|
+
|
|
|
+ 0) Be sure you have (at least) Moodle 2.4 until Moodle 2.6 installed
|
|
|
+ 1) Be sure to have the latest language package, such as English (en), Portuguese (pt_br).
|
|
|
+ 2) Be sure to have the latest version of the module iAssign (see in
|
|
|
+ https://github.com/leonidasbrandao/iAssign master)
|
|
|
+ 3) Unpack 'iAssign.2.1.x.zip' (or 'iAssign.2.1.x.tgz')
|
|
|
+ 4) Copy the 'iassign' module directory into the "mod" subdirectory of Moodle installation
|
|
|
+ 5) Under role "administrator", go to the 'Site administration' and click on 'Notifications'
|
|
|
+ 6) Have fun.
|
|
|
+ -->
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <hr class="display-4" />
|
|
|
+
|
|
|
+ <section id="sec-bd">
|
|
|
+ <h2>Configurando o banco de dados</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ 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 <a href='#local'>seção acima</a>.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <section id="bd__web">
|
|
|
+ <h3 class='ifr__color__lightBlue'>Versão Web (PHP e MySQL)</h3>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Esta versão utiliza um banco de dados MySQL e um arquivo PHP <code>php/save.php</code> que
|
|
|
+ gerencia a conexão entre o iFractions e o bando de dados. É usado o <code>Fetch API</code> para acessar
|
|
|
+ este arquivo de forma assíncrona usando o método HTTP <code>POST</code>.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Tendo instalado todos <a href='#local'>requisitos</a>, 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:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <ol type='A'>
|
|
|
+
|
|
|
+ <li><b>Criar um banco de dados para o iFractions</b>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Por padrão, consideramos o nome do banco de dados como <code>db_iFractions</code> e a
|
|
|
+ tabela
|
|
|
+ como <code>iFractions</code>. Assim, é possível configurar o banco de dados MySQL da
|
|
|
+ seguinte
|
|
|
+ forma:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <pre><code class='language-sql'>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;
|
|
|
+ </code></pre>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ <i>Note que cada coluna da tabela usa o prefixo <code>line_</code>.</i>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li><b>Atualizar o arquivo <code>php/save.php</code></b>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ É preciso definir os valores para algumas variáveis em <code>php/save.php</code> de acordo
|
|
|
+ a
|
|
|
+ configuração do banco de dados como aparece a seguir:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <pre><code class='language-php'>$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)
|
|
|
+</code></pre>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li><b>Atualizar o arquivo <code>js/globals/globals_functions.js</code></b>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Em <code>js/globals/globals_functions.js</code> existe uma função global chamada
|
|
|
+ <code>sendToDatabase()</code>.
|
|
|
+ Quando a
|
|
|
+ informação do jogador é coletada ao final de cada jogo, o arquivo do jogo a envia para
|
|
|
+ <code>sendToDatabase()</code> que, por sua vez, faz uma conexão assíncrona com
|
|
|
+ <code>php/save.php</code>,
|
|
|
+ permitindo o envio das informações para o banco de dados.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <pre><code class='language-js'>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
|
|
|
+ </code></pre>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ol>
|
|
|
+
|
|
|
+ <section>
|
|
|
+ <h4>Onde a conexão é estabelecida no código</h4>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Existe uma função chamada <code>postScore()</code> dentro de cada estado de jogo −
|
|
|
+ <code>js/games/squareOne.js</code>, <code>js/games/squareTwo.js</code> e
|
|
|
+ <code>js/games/circleOne.js</code>.
|
|
|
+ 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 <code>postScore()</code> é chamada. Ela concatena toda informação sobre o
|
|
|
+ progresso do
|
|
|
+ jogador numa <i>string</i> que é passada como parâmetro para a função global
|
|
|
+ <code>sendToDatabase()</code>
|
|
|
+ (de <code>js/globals/globals_functions.js</code>) que a envia para o banco de dados.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <pre><code class='language-js'>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
|
|
|
+</code></pre>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="bd__moodle">
|
|
|
+ <h3 class='ifr__color__lightBlue'>Versão Moodle</h3>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Esta versão utiliza o banco de dados do próprio Moodle, não precisando criá-lo manualmente.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <section id='dados'>
|
|
|
+ <h2>Onde os dados são coletados</h2>
|
|
|
+ <p>Em construção...</p>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <a class="btn btn-primary" href='../documentacao.html' role="button">Voltar</a>
|
|
|
+
|
|
|
+ <a class="btn btn-primary" href='./page_2.html' role="button">Próximo - tecnologias utilizadas</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-lg-2 p-1"></div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+
|
|
|
+ <footer id='footer' class="container-flex mt-5 py-5 text-center"></footer>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+<script src="../../script/bootstrap/bootstrap.bundle.min.js"></script>
|
|
|
+<script src="../../script/index.js"></script>
|
|
|
+<script>
|
|
|
+ updateMenu(2);
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|