7 kuukautta sitten · ee17e434f7
--- a/assets/c1-A.png
+++ b/assets/c1-A.png
--- a/assets/c1-B.png
+++ b/assets/c1-B.png
--- a/assets/custom-menu-c1.png
+++ b/assets/custom-menu-c1.png
--- a/assets/custom-menu-s1.png
+++ b/assets/custom-menu-s1.png
--- a/assets/custom-menu-s2.png
+++ b/assets/custom-menu-s2.png
--- a/assets/db_js_game.png
+++ b/assets/db_js_game.png
--- a/assets/db_js_global.png
+++ b/assets/db_js_global.png
--- a/assets/db_mysql.png
+++ b/assets/db_mysql.png
--- a/assets/db_php.png
+++ b/assets/db_php.png
--- a/assets/dificuldades-1.png
+++ b/assets/dificuldades-1.png
--- a/assets/dificuldades-5.png
+++ b/assets/dificuldades-5.png
--- a/assets/dificuldades.png
+++ b/assets/dificuldades.png
--- a/assets/diretorio.png
+++ b/assets/diretorio.png
--- a/assets/end.png
+++ b/assets/end.png
--- a/assets/flag.png
+++ b/assets/flag.png
--- a/assets/flag_icon.png
+++ b/assets/flag_icon.png
--- a/assets/floor.png
+++ b/assets/floor.png
--- a/assets/fluxo-de-telas.png
+++ b/assets/fluxo-de-telas.png
--- a/assets/fluxoDeEstados.png
+++ b/assets/fluxoDeEstados.png
--- a/assets/fluxoDeTelas.png
+++ b/assets/fluxoDeTelas.png
--- a/assets/lang.png
+++ b/assets/lang.png
--- a/assets/lang_files.png
+++ b/assets/lang_files.png
--- a/assets/map.png
+++ b/assets/map.png
--- a/assets/menu.png
+++ b/assets/menu.png
--- a/assets/moodle_adicionar_atividade.png
+++ b/assets/moodle_adicionar_atividade.png
--- a/assets/moodle_info_atividade.png
+++ b/assets/moodle_info_atividade.png
--- a/assets/moodle_personalizar_jogo.png
+++ b/assets/moodle_personalizar_jogo.png
--- a/assets/moodle_relatorio_alunos.png
+++ b/assets/moodle_relatorio_alunos.png
--- a/assets/moodle_selecionar_jogo.png
+++ b/assets/moodle_selecionar_jogo.png
--- a/assets/moodle_solucao_aluno.png
+++ b/assets/moodle_solucao_aluno.png
--- a/assets/name.png
+++ b/assets/name.png
--- a/assets/s1-A.png
+++ b/assets/s1-A.png
--- a/assets/s1-B.png
+++ b/assets/s1-B.png
--- a/assets/s2.png
+++ b/assets/s2.png
--- a/assets/selected-game.png
+++ b/assets/selected-game.png
--- a/assets/student-report.png
+++ b/assets/student-report.png
--- a/assets/tabela-propriedades.png
+++ b/assets/tabela-propriedades.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,211 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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">
			
 
				+
			
 
				+  <base target="_blank">
			
 
				+
			
 
				+  <title>iFractions | Início</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <header class="ifr_header jumbotron jumbotron-flex p-5 d-flex flex-column justify-content-center">
			
 
				+    <h1 class="display-4">iFractions</h1>
			
 
				+    <p class="lead">Aprenda frações jogando!</p>
			
 
				+    <hr class="my-4">
			
 
				+    <p class="lead"><strong>iFractions</strong> é uma coletânea de jogos online para o <strong>ensino de
			
 
				+        frações</strong> direcionado a alunos do Ensino Fundamental. Ele é um dos sistemas educacionais de
			
 
				+      <strong>código aberto</strong> que vem sendo desenvolvido pelo <a href='http://www.usp.br/line'
			
 
				+        target="_blank">LInE</a> e utiliza dinâmicas de jogo para apresentar conteúdos de frações de forma aplicada,
			
 
				+      buscando atrair o interesse do aluno e prover visualizações lúdicas de conteúdos formais, além de
			
 
				+      <strong>permitir ampla personalização dos jogos</strong>, possibilitando que se adaptem às necessidades do
			
 
				+      usuário.
			
 
				+    </p>
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- game frame -->
			
 
				+  <iframe src=" http://www.usp.br/line/ifractions#ifractions-canvas" frameborder="0"
			
 
				+    style="width:100%; height:700px;"></iframe>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container my-5 py-5'>
			
 
				+
			
 
				+    <section id="public alvo">
			
 
				+      <h2> Público alvo </h2>
			
 
				+
			
 
				+      <ul>
			
 
				+        <li>
			
 
				+          <strong>Alunos</strong> desejando estudar diferentes assuntos de frações de forma aplicada;
			
 
				+        </li>
			
 
				+        <li>
			
 
				+          <strong>Professores/tutores</strong> participando do ensino de frações que tenham interesse em:
			
 
				+          <ul>
			
 
				+            <li>
			
 
				+              utilizar um jogo personalizavel como material auxiliar no ensino de um tópico específico no nível de
			
 
				+              dificuldade desejado.
			
 
				+            </li>
			
 
				+            <li>
			
 
				+              criar uma trilha com diferentes atividades em crescente grau de dificuldade de forma a guiar o aluno
			
 
				+              pelo
			
 
				+              processo de aprendizagem de vários conteúdos;
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </section>
			
 
				+
			
 
				+    <hr class="my-4">
			
 
				+
			
 
				+    <section id="concepcao">
			
 
				+      <h2>Concepção</h2>
			
 
				+      <p>
			
 
				+        O projeto teve início em 2016 numa parceria entre os professores
			
 
				+        <a href='http://www.ime.usp.br/~leo'>Leônidas de Oliveira Brandão</a>
			
 
				+        (<a href='http://www.ime.usp.br'>IME-USP</a>) e
			
 
				+        <a href='https://users.dcc.uchile.cl/~mibarra/'>Manuel Ibarra</a>
			
 
				+        (EAPIIS-UNAMBA), baseado no
			
 
				+        <a href='https://matematica.br/iassign/index_pt.html'>Módulo de Aprendizado Interativo</a> (iMA) e
			
 
				+        <a
			
 
				+          href='https://www.researchgate.net/publication/262370367_The_Six_Facets_of_Serious_Game_Design_A_Methodology_Enhanced_by_Our_Design_Pattern_Library'>
			
 
				+          Six facets of Serious Game Design</a> e segue sendo desenvolvido desde então.
			
 
				+      </p>
			
 
				+    </section>
			
 
				+
			
 
				+    <hr class="my-4">
			
 
				+
			
 
				+    <section id="desenvolvimento">
			
 
				+      <h2>Desenvolvimento</h2>
			
 
				+      <p>
			
 
				+        Vem sendo desenvolvido para permitir <strong>ampla personalização</strong> dos jogos de forma que se adaptem
			
 
				+        às
			
 
				+        necessidades
			
 
				+        de cada usuário. Novos jogos são criados com ênfase em <strong>incentivar a cooperação</strong> ao invés da
			
 
				+        competitividade,
			
 
				+        visto que a última pode produzir condições adversas ao aprendizado. Além disso, dada a universalidade da
			
 
				+        matemática, é incentivada a internacionalização da ferramenta, que atualmente está <b>disponível em cinco
			
 
				+          idiomas:</b> espanhol, francês, inglês, italiano e português.
			
 
				+      </p>
			
 
				+      <!--
			
 
				+      COOPERATION TEAM
			
 
				+      ----------------
			
 
				+      BRAZIL: Leônidas de Oliveira Brandão (IME-USP)
			
 
				+      PERU: Manuel Ibarra & Cristhian Serrano (EAPIIS-UNAMBA)
			
 
				+      FRANCE: Jean-Marc (MOCAH-UPMC)
			
 
				+
			
 
				+      BASED ON
			
 
				+      ----------------
			
 
				+      iLM (interactive Learning Modules)
			
 
				+      Six facets of Serious Game Design:
			
 
				+      Pedagogical Objectives; Domain Simulation; Interactions with the Simulation; Problems and Progression; Decorum and Conditions of Use.
			
 
				+
			
 
				+      TECHNOLOGY
			
 
				+      ----------------
			
 
				+      We used HTML5, CSS and the Javascript Library Phaser.io
			
 
				+      -->
			
 
				+    </section>
			
 
				+
			
 
				+    <hr class="my-4">
			
 
				+
			
 
				+    <section id="download">
			
 
				+      <h2>Onde encontrar</h2>
			
 
				+      <p>
			
 
				+        O iFractions faz parte da comunidade de <strong>software livre</strong>, usando a <a
			
 
				+          href='https://www.gnu.org/licenses/licenses.pt-br.html'>Licença Pública Geral GNU (GPLv3)</a>, possuindo
			
 
				+        código
			
 
				+        aberto que pode ser distribuido gratuitamente.
			
 
				+      </p>
			
 
				+
			
 
				+      <p>Atualmente existem duas versões do iFractions disponíveis:</p>
			
 
				+
			
 
				+      <div class="row">
			
 
				+
			
 
				+        <div class="col-lg-6 mb-3 d-flex">
			
 
				+          <div class="card shadow">
			
 
				+
			
 
				+            <img class="card-img-top" src="./assets/menu.png" alt="Card image cap">
			
 
				+
			
 
				+            <div class="card-body">
			
 
				+              <h3 class="card-title">iFractions Web</h3>
			
 
				+              <p class="card-text">Esta versão pode ser usada no navegador livremente.</p>
			
 
				+
			
 
				+              <h4>Links de desenvolvimento</h4>
			
 
				+              <ul class="list-unstyled">
			
 
				+                <li><span class="text-muted">Versão estável</span></li>
			
 
				+                <li><a href='http://200.144.254.107/git/LInE/Ifractions-web/src/master'>Versão de desenvolvimento</a>
			
 
				+                </li>
			
 
				+              </ul>
			
 
				+
			
 
				+              <div class="text-center">
			
 
				+                <a class="btn btn-primary" href="http://www.usp.br/line/ifractions" role="button" target="_blank">
			
 
				+                  Jogue Online Aqui
			
 
				+                </a>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="col-lg-6 mb-3 d-flex">
			
 
				+          <div class="card shadow">
			
 
				+
			
 
				+            <img class="card-img-top" src="./assets/student-report.png" alt="Card image cap">
			
 
				+
			
 
				+            <div class="card-body">
			
 
				+              <h3 class="card-title">iFractions Moodle</h3>
			
 
				+              <p class="card-text">Esta versão pode ser integrada a um ambiente <a href='https://moodle.org/'>Moodle</a>
			
 
				+                a partir do pacote <a href='https://www.matematica.br/ia/index_pt.html'>iTarefa</a>, aparecendo como
			
 
				+                um de seus Módulos de Atividade Interativos (iMA).
			
 
				+              </p>
			
 
				+
			
 
				+              <h4>Links de desenvolvimento</h4>
			
 
				+              <ul class="list-unstyled">
			
 
				+                <li><a href='https://moodle.org/plugins/mod_iassign'>Versão estável (no site do Moodle)</a></li>
			
 
				+                <li><a href='http://200.144.254.107/git/LInE/iassign'>Versão de desenvolvimento</a></li>
			
 
				+              </ul>
			
 
				+            </div>
			
 
				+
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+    </section>
			
 
				+
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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/bootstrap/bootstrap.esm.min.js"></script>
			
 
				+<script src="./script/index.js"></script>
			
 
				+
			
 
				+</html>
			
--- a/paginas/area_admin/page_1.html
+++ b/paginas/area_admin/page_1.html
@@ -0,0 +1,88 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 Administrador</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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">Tutorial: instalando iFractions no Moodle
			
 
				+        </li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Área do Administrador Moodle</h1>
			
 
				+    <p class="lead">Esta área foi preparada para ajudar o administrador Moodle a instalar o iFractions.</p>
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet">
			
 
				+      </div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id="instalando">
			
 
				+          <h2>Instalando iFractions no Moodle</h2>
			
 
				+          <!-- falar sobre como o administrador pode instalar o itarefa no moodle -->
			
 
				+          <p>Em construção...</p>
			
 
				+        </section>
			
 
				+
			
 
				+        <div>
			
 
				+          <a class="btn btn-primary" href='../documentacao.html' role="button">Voltar</a>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/area_professor/index.html
+++ b/paginas/area_professor/index.html
--- a/paginas/area_professor/page_2.html
+++ b/paginas/area_professor/page_2.html
@@ -0,0 +1,168 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 Professor</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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">Tutorial: Preparando atividades no Moodle</li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Área do Professor</h1>
			
 
				+    <p class="lead">Esta área foi preparada para ajudar o professor a usar o iFractions no Moodle.</p>
			
 
				+    <hr class="display-4">
			
 
				+    <!-- <p class="lead"></p> -->
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet">
			
 
				+      </div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id="preparando">
			
 
				+          <h2>Preparando uma atividade com o iFractions</h2>
			
 
				+
			
 
				+          <p>Se você é um professor, siga o seguinte tutorial para criar uma atividade interativa do iFractions dentro
			
 
				+            do Moodle.</p>
			
 
				+
			
 
				+          <h3>1. Clicar no botão verde escrito <em>Adicionar atividade</em> com na figura abaixo:</h3>
			
 
				+
			
 
				+          <div class="text-center mb-3">
			
 
				+            <img src='../../assets/moodle_adicionar_atividade.png' class='ifr__img img-responsive shadow w-100'>
			
 
				+          </div>
			
 
				+
			
 
				+          <h3>2. Na página aberta:</h3>
			
 
				+
			
 
				+          <ol>
			
 
				+            <li>
			
 
				+              Selecionar tipo de atividade: <em>Exercício</em>;
			
 
				+            </li>
			
 
				+            <li>
			
 
				+              Digitar o título da atividade (não deve coincidir com títulos anteriores);
			
 
				+            </li>
			
 
				+            <li>
			
 
				+              Digitar o enunciado que o aluno receberá (em atividade iFractions cada tipo de jogo pode ter o mesmo
			
 
				+              enunciado);
			
 
				+            </li>
			
 
				+            <li>
			
 
				+              Selecionar o tipo iMA: <em>iFractions (0.1.20200221)</em>
			
 
				+            </li>
			
 
				+            <li id="passo-2-5">
			
 
				+              Selecionar o arquivo de atividade (via editor em linha ou arquivo previamente gravado) — veja <a
			
 
				+                href="#secao-3">seção 3</a> para
			
 
				+              mais detalhes desse passo;
			
 
				+              <div class="text-center mb-3">
			
 
				+                <img src=' ../../assets/moodle_info_atividade.png' class='ifr__img img-responsive shadow w-75'
			
 
				+                  alt='Definindo título, enunciado, selecionando iMA e definindo data.' />
			
 
				+              </div>
			
 
				+            </li>
			
 
				+            <li>
			
 
				+              Configurar o prazo da atividade;
			
 
				+            </li>
			
 
				+            <li>
			
 
				+              Clicar no botão para registrar a atividade: Salvar mudanças.
			
 
				+            </li>
			
 
				+          </ol>
			
 
				+
			
 
				+          <h3 id="secao-3">3. Selecionar arquivo ou construir uma atividade com editor iMA em linha:</h3>
			
 
				+
			
 
				+          <ol>
			
 
				+            <li>No <a href="#passo-2-5">passo 2.5</a>, deve-se clicar no botão <em>Escolha o arquivo...</em>;</li>
			
 
				+            <li id="passo-3-2">Na página aberta, clicar no botão <em>Abrir Editor iFractions online</em>;</li>
			
 
				+            <li>
			
 
				+              Na página aberta, digitar um nome de arquivo <em>(e.g. <code>ativ1_etap1</code>)</em> e selecionar jogo
			
 
				+              (trator/quadrilátero I), modo de jogo, operação e dificuldade;
			
 
				+
			
 
				+              <div class="text-center">
			
 
				+                <img src='../../assets/moodle_personalizar_jogo.png' class='ifr__img img-responsive shadow' width="60%"
			
 
				+                  alt='Definindo tipo de atividade iFractions no editor em linha de iMA (trator/quadrilátero I).'>
			
 
				+              </div>
			
 
				+            </li>
			
 
				+            <li>Clicar no botão <em>Gravar Atividade</em>.</li>
			
 
				+            <li>
			
 
				+              Aparecerá uma janela com a informação <em>"Atividade interativa gravada com sucesso sob o nome:
			
 
				+                ativ1_etap1.frc"</em>, devendo-se clicar no botão OK Aquela janela é fechada, retornando-se à tela
			
 
				+              aberta em <a href="#passo-3-2">3.2</a>, em sua parte inferior estão todas as atividades registradas, a
			
 
				+              última criada em destaque. </li>
			
 
				+            <li id="passo-3-5">
			
 
				+              Deve-se selecionar o arquivo a ser utilizado para a atividade <em>(e.g. ativ1_etap1.frc)</em>;
			
 
				+              <div class="text-center">
			
 
				+                <img src='../../assets/moodle_selecionar_jogo.png' class='ifr__img img-responsive shadow' width="60%"
			
 
				+                  alt='Gravando a iMA personalizada na atividade atual.'>
			
 
				+              </div>
			
 
				+            </li>
			
 
				+          </ol>
			
 
				+
			
 
				+          <h3>4. Completar registro da atividade:</h3>
			
 
				+
			
 
				+          <ol>
			
 
				+            <li>
			
 
				+              Após selecionar o arquivo em <a href="#passo-3-6">3.5</a>, aquela janela é fechada retornando-se a janela
			
 
				+              principal, agora
			
 
				+              basta clicar no botão Salvar mudanças.
			
 
				+
			
 
				+              <div>
			
 
				+                <a class="btn btn-primary" href='../documentacao.html' role="button">Voltar</a>
			
 
				+              </div>
			
 
				+            </li>
			
 
				+          </ol>
			
 
				+        </section>
			
 
				+
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/area_professor/page_3.html
+++ b/paginas/area_professor/page_3.html
@@ -0,0 +1,121 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 Professor</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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">Tutorial: Examinando atividades no Moodle</li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Área do Professor</h1>
			
 
				+    <p class="lead">Esta área foi preparada para ajudar o professor a usar o iFractions no Moodle.</p>
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet">
			
 
				+      </div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id="examinando">
			
 
				+          <h2>Examinando atividades dos alunos</h2>
			
 
				+
			
 
				+          <p>Se você é um professor, siga o seguinte tutorial para analisar as atividades do iFractions enviadas pelo
			
 
				+            seus alunos no
			
 
				+            Moodle.
			
 
				+          </p>
			
 
				+
			
 
				+          <h3>
			
 
				+            1. Para examinar uma atividade deve-se entrar na página da atividade (estando no papel professor);
			
 
				+          </h3>
			
 
				+
			
 
				+          <h3>
			
 
				+            2. Na página do iTarefa (da atividade), clicar no botão <em>"Relatórios"</em> (segundo botão) e depois na
			
 
				+            opção <em>"Página inicial"</em>;
			
 
				+          </h3>
			
 
				+
			
 
				+          <h3>
			
 
				+            3. Receberá uma página com uma tabela. Na coluna "Estudantes" estão os nomes dos alunos
			
 
				+            matriculados
			
 
				+            e na coluna "1" os resultados dos alunos para atividade 1 (e assim por diante se houver mais atividades);
			
 
				+          </h3>
			
 
				+
			
 
				+          <div class="text-center mb-3">
			
 
				+            <img src='../../assets/moodle_relatorio_alunos.png' class='ifr__img img-responsive shadow w-100'
			
 
				+              alt='Tabela com todos os alunos e todas as atividades do bloco.'>
			
 
				+          </div>
			
 
				+
			
 
				+          <h3>
			
 
				+            4. Para examinar uma atividade específica de um aluno, clicar na entrada correspondente à linha do aluno e
			
 
				+            coluna da atividade. A página retornada é como na figura abaixo.
			
 
				+          </h3>
			
 
				+
			
 
				+          <div class="text-center mb-3">
			
 
				+            <img src='../../assets/moodle_solucao_aluno.png' class='ifr__img img-responsive shadow w-100'
			
 
				+              alt='tividade 1 do aluno 1.'>
			
 
				+          </div>
			
 
				+
			
 
				+        </section>
			
 
				+
			
 
				+        <div>
			
 
				+          <a class="btn btn-primary" href='../documentacao.html' role="button">Voltar</a>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/area_programador/index.html
+++ b/paginas/area_programador/index.html
--- a/paginas/area_programador/page_1.html
+++ b/paginas/area_programador/page_1.html
@@ -0,0 +1,438 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet"></div> -->
			
 
				+      <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> &minus; com os diretórios que contém os arquivos de mídia
			
 
				+                    <ul>
			
 
				+                      <li>
			
 
				+                        <code>audio/</code> &minus; audios
			
 
				+                      </li>
			
 
				+                      <li>
			
 
				+                        <code>img/</code> &minus; imagens e spritesheets
			
 
				+                      </li>
			
 
				+                      <li>
			
 
				+                        <code>lang/</code> &minus; idiomas
			
 
				+                      </li>
			
 
				+                    </ul>
			
 
				+                  </li>
			
 
				+                  <li>
			
 
				+                    <code>js/</code> &minus; 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> &minus; 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> &minus; 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 &minus; 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 &minus; 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>
			
 
				+              <!--<li>Pronto!</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 &minus; 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 &minus;
			
 
				+                <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>
			
 
				+          <!-- 1 -->
			
 
				+          <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>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/area_programador/page_2.html
+++ b/paginas/area_programador/page_2.html
--- a/paginas/area_programador/page_3.html
+++ b/paginas/area_programador/page_3.html
--- a/paginas/area_programador/page_tokens.html
+++ b/paginas/area_programador/page_tokens.html
@@ -0,0 +1,304 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 | ...</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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 active" aria-current="page">...</li>
			
 
				+        <li class="breadcrumb-item active" aria-current="page">...</li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Conhecendo o iFractions</h1>
			
 
				+    <p class="lead">...</p>
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- game frame -->
			
 
				+  <iframe src=" http://localhost/Ifractions-web" frameborder="0" style="width:100%; height:800px;"></iframe>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <div class="col-lg-2 text-start p-1 ifr__noBullet"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section>
			
 
				+          <h2>Cores</h2>
			
 
				+
			
 
				+          <p>Name space: <code>colors</code></p>
			
 
				+
			
 
				+          <table class="table">
			
 
				+            <tr>
			
 
				+              <td class="p-3" style="background: #003cb3;"></td>
			
 
				+              <td>blue<br>#003cb3</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #cce5ff;"></td>
			
 
				+              <td>blueBckg<br>#cce5ff</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #b30000;"></td>
			
 
				+              <td>red<br>#b30000</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #00804d;"></td>
			
 
				+              <td>green<br>#00804d</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #708090;"></td>
			
 
				+              <td>gray<br>#708090</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #ffef1f;"></td>
			
 
				+              <td>yellow<br>#ffef1f</td>
			
 
				+            </tr>
			
 
				+
			
 
				+            <tr>
			
 
				+              <td class="p-3" style="background: #183780;"></td>
			
 
				+              <td>darkBlue<br>#183780</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #a8c0e6;"></td>
			
 
				+              <td>blueBckgInsideLevel<br>#a8c0e6</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #330000;"></td>
			
 
				+              <td>darkRed<br>#330000</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #1e2f2f;"></td>
			
 
				+              <td>darkGreen<br>#1e2f2f</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #000;"></td>
			
 
				+              <td>black<br>#000</td>
			
 
				+
			
 
				+              <td></td>
			
 
				+              <td></td>
			
 
				+            </tr>
			
 
				+
			
 
				+            <tr>
			
 
				+              <td></td>
			
 
				+              <td></td>
			
 
				+
			
 
				+
			
 
				+              <td class="p-3" style="background: #adc8e6;"></td>
			
 
				+              <td>blueBckgOff<br>#adc8e6</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #d27979;"></td>
			
 
				+              <td>lightRed<br>#d27979</td>
			
 
				+
			
 
				+
			
 
				+              <td class="p-3" style="background: #83afaf;"></td>
			
 
				+              <td>lightGreen<br>#83afaf</td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #efeff5;"></td>
			
 
				+              <td>white<br>#efeff5</td>
			
 
				+
			
 
				+              <td></td>
			
 
				+              <td></td>
			
 
				+            </tr>
			
 
				+
			
 
				+            <tr>
			
 
				+              <td></td>
			
 
				+              <td></td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #b7cdf4;"></td>
			
 
				+              <td>blueMenuLine<br>#b7cdf4</td>
			
 
				+
			
 
				+              <td></td>
			
 
				+              <td></td>
			
 
				+
			
 
				+              <td class="p-3" style="background: #00d600;"></td>
			
 
				+              <td>intenseGreen<br>#00d600</td>
			
 
				+
			
 
				+              <td></td>
			
 
				+              <td></td>
			
 
				+
			
 
				+              <td></td>
			
 
				+              <td></td>
			
 
				+
			
 
				+            </tr>
			
 
				+          </table>
			
 
				+
			
 
				+          <section id="tipografia" class="mt-5 pt-5">
			
 
				+            <h2>Tipografia</h2>
			
 
				+
			
 
				+            <p>Name space: <code>textStyles</code></p>
			
 
				+
			
 
				+            <table class="table">
			
 
				+              <tr>
			
 
				+                <td></td>
			
 
				+                <td>
			
 
				+                  <h1>h1</h1>
			
 
				+                  (32px)
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <h2>h2</h2>
			
 
				+                  (26px)
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <h3>h3</h3>
			
 
				+                  (23px)
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <h4>h4</h4>
			
 
				+                  (20px)
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p>p</p>
			
 
				+                  (14px)
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>green</th>
			
 
				+                <td>
			
 
				+                  <!-- caixa alta manualmente -->
			
 
				+                  <p style="font-size: 32px; color: #00804d">H1_GREEN</p>
			
 
				+                  <br>
			
 
				+                  <h1 style="color: #00804d">H1_GREEN</h1>
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 26px; color: #00804d">H2_GREEN</p>
			
 
				+                  <br>
			
 
				+                  <h2 style="color: #00804d">H2_GREEN</h2>
			
 
				+                </td>
			
 
				+                <td></td>
			
 
				+                <td></td>
			
 
				+                <td></td>
			
 
				+              </tr>
			
 
				+              <tr style="background: #a8c0e6">
			
 
				+                <th>white</th>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 32px; color: #efeff5">h1_white</p>
			
 
				+                  <br>
			
 
				+                  <h1 style="color: #efeff5">h1_white</h1>
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 26px; color: #efeff5">h2_white</p>
			
 
				+                  <br>
			
 
				+                  <h2 style="color: #efeff5">h2_white</h2>
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 23px; color: #efeff5">h3__white</p>
			
 
				+                  <br>
			
 
				+                  <h3 style="color: #efeff5">h3__white</h3>
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 20px; color: #efeff5">h4_white</p>
			
 
				+                  <br>
			
 
				+                  <h4 style="color: #efeff5">h4_white</h4>
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 14px; color: #efeff5">p_white</p>
			
 
				+                  <br>
			
 
				+                  <p style="color: #efeff5">p_white</p>
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>darkRed</th>
			
 
				+                <td></td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 26px; color: #330000">h2_brown</p>
			
 
				+                  <br>
			
 
				+                  <h2 style="color: #330000">h2_brown</h2>
			
 
				+                </td>
			
 
				+                <td></td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 20px; color: #330000">h4_brown</p>
			
 
				+                  <br>
			
 
				+                  <h4 style="color: #330000">h4_brown</h4>
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 14px; color: #330000">p_brown</p>
			
 
				+                  <br>
			
 
				+                  <p style="color: #330000">p_brown</p>
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>blue</th>
			
 
				+                <td></td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 26px; color: #003cb3">h2_blue_2</p>
			
 
				+                  <br>
			
 
				+                  <h2 style="color: #003cb3">h2_blue_2</h2>
			
 
				+                </td>
			
 
				+                <td></td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 20px; color: #003cb3">h4_blue_2</p>
			
 
				+                  <br>
			
 
				+                  <h4 style="color: #003cb3">h4_blue_2</h4>
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>darkBlue</th>
			
 
				+                <td></td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 26px; color: #183780">h2_blue</p>
			
 
				+                  <br>
			
 
				+                  <h2 style="color: #183780">h2_blue</h2>
			
 
				+                </td>
			
 
				+                <td></td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 20px; color: #183780">h4_blue</p>
			
 
				+                  <br>
			
 
				+                  <h4 style="color: #183780">h4_blue</h4>
			
 
				+                </td>
			
 
				+                <td>
			
 
				+                  <p style="font-size: 14px; color: #183780">p_blue</p>
			
 
				+                  <br>
			
 
				+                  <p style="color: #183780">p_blue</p>
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+            </table>
			
 
				+          </section>
			
 
				+
			
 
				+          <div class="d-flex justify-content-between mt-5">
			
 
				+            <a class="btn btn-primary" href='./index.html' role="button">Início</a>
			
 
				+          </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!--rodape -->
			
 
				+  <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>
			
--- a/paginas/area_programador/page_tutorial.html
+++ b/paginas/area_programador/page_tutorial.html
@@ -0,0 +1,309 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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">Tutorial: criando um jogo novo
			
 
				+        </li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 id='' class='display-4'>Área do Desenvolvedor</h1>
			
 
				+    <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>
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina-->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 ifr__toc p-1 ifr__noBullet"></div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id="criarJogo">
			
 
				+          <h2>Criando um novo jogo</h2>
			
 
				+
			
 
				+          <p>Se você é um desenvolvedor que deseja colaborar com o iFractions criando um novo jogo, essa seção
			
 
				+            mostrará os passos mínimos para fazê-lo.</p>
			
 
				+          <!-- <p></p> -->
			
 
				+
			
 
				+          <ul class="list-unstyled">
			
 
				+
			
 
				+            <li>
			
 
				+              <h3>1. Criar um arquivo novo em <code>js/games/nomeDoJogo.js</code>
			
 
				+                contendo:
			
 
				+              </h3>
			
 
				+
			
 
				+              <pre><code class='language-js'>/******************************
			
 
				+ * This file holds game states.
			
 
				+ ******************************/
			
 
				+
			
 
				+/** [GAME STATE]
			
 
				+ *
			
 
				+ * Write game documentation here
			
 
				+ *
			
 
				+ * @namespace
			
 
				+ */
			
 
				+const nomeDoJogo = {
			
 
				+  /**
			
 
				+   * Main code
			
 
				+   */
			
 
				+  create: function () {
			
 
				+    // Your code goes here
			
 
				+
			
 
				+    if (moodle) {
			
 
				+      navigation.add.right(['audio']);
			
 
				+    } else {
			
 
				+      navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
			
 
				+      navigation.add.right(['audio']);
			
 
				+    }
			
 
				+
			
 
				+    game.timer.start(); // Set a timer for the current level (used in postScore())
			
 
				+    game.event.add('click', this.events.onInputDown);
			
 
				+    game.event.add('mousemove', this.events.onInputOver);
			
 
				+  },
			
 
				+
			
 
				+  /**
			
 
				+   * Game loop
			
 
				+   */
			
 
				+  update: function () {
			
 
				+    // Your code goes here
			
 
				+
			
 
				+    game.render.all();
			
 
				+  },
			
 
				+
			
 
				+  utils: {
			
 
				+    // Your functions go here
			
 
				+  },
			
 
				+
			
 
				+  events: {
			
 
				+    /**
			
 
				+     * Called by mouse click event
			
 
				+     *
			
 
				+     * @param {object} mouseEvent contains the mouse click coordinates
			
 
				+     */
			
 
				+    onInputDown: (mouseEvent) => {
			
 
				+      // Your code goes here
			
 
				+
			
 
				+      navigation.onInputDown(x, y);
			
 
				+      game.render.all();
			
 
				+    },
			
 
				+
			
 
				+    /**
			
 
				+     * Called by mouse move event
			
 
				+     *
			
 
				+     * @param {object} mouseEvent contains the mouse move coordinates
			
 
				+     */
			
 
				+    onInputOver: (mouseEvent) => {
			
 
				+      // Your code goes here
			
 
				+
			
 
				+      navigation.onInputOver(mouseEvent.x, mouseEvent.y);
			
 
				+      game.render.all();
			
 
				+    },
			
 
				+  },
			
 
				+
			
 
				+  fetch: {
			
 
				+    /**
			
 
				+     * Saves players data after level ends - to be sent to database <br>
			
 
				+     *
			
 
				+     * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
			
 
				+     *
			
 
				+     * @see /php/save.php
			
 
				+     */
			
 
				+    postScore: () => {
			
 
				+      const data = ''; // Your query goes here
			
 
				+      sendToDatabase(data);
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</code></pre>
			
 
				+            </li>
			
 
				+
			
 
				+            <li>
			
 
				+              <h3>2. Adicionar o arquivo criado no <code>&lt;body></code> em
			
 
				+                <code>index.html</code>
			
 
				+              </h3>
			
 
				+
			
 
				+              <pre><code class='language-html'>&lt;script src="./js/games/nomeDoJogo.js">&lt;/script></code></pre>
			
 
				+            </li>
			
 
				+
			
 
				+            <li>
			
 
				+              <h3>3. Adicionar o novo estado do jogo no <code>&lt;script></code> em
			
 
				+                <code>index.html</code>
			
 
				+              </h3>
			
 
				+
			
 
				+              <pre><code class='language-js'>game.state.add('nomeDoJogo', nomeDoJogo);</code></pre>
			
 
				+            </li>
			
 
				+
			
 
				+
			
 
				+            <li>
			
 
				+              <h3>4. Adicionar as informações sobre o jogo novo na lista de jogos em
			
 
				+                <code>js/globals/globals_control.js</code>
			
 
				+              </h3>
			
 
				+
			
 
				+              <pre><code class='clear language-ts'>const gameList = [
			
 
				+  // ...
			
 
				+  {
			
 
				+    gameName: string, // Nome do jogo
			
 
				+    gameMode: string[], // Modos de jogo disponíveis
			
 
				+    gameOperation: string[], // Operações de jogo disponíveis
			
 
				+    gameDifficulty: number, // Nível máximo de dificuldade
			
 
				+    gameShape: string, // Figura geométrica que está representando a fração
			
 
				+    assets: {
			
 
				+      menu: { // centraliza informações necessárias no menu principal
			
 
				+        gameNameBtn: string, // ID do botão de seleção do jogo atual no menu principal
			
 
				+        infoBox: () => ({}) // Conteúdo informativo que aprece ao clicar no "?" ao lado do botão 
			
 
				+      },
			
 
				+      customMenu: { // centraliza informações necessárias no menu secundário
			
 
				+        gameModeBtn: string[], // ID do botão de modo do jogo atual no menu secundário
			
 
				+        gameOperationBtn: string[], // ID do botão de operação
			
 
				+        auxiliarTitle: (x, y, offsetX, offsetH) => {}, // renderiza parte de elemento auxiliar no menu secundário
			
 
				+        infoBox: () => ({
			
 
				+          gameMode: {},
			
 
				+          gameDifficulty: {},
			
 
				+          gameMisc: {},
			
 
				+        }), // Conteúdo informativo que aparece ao clicar no "?" ao lado de cada botão
			
 
				+      },
			
 
				+      map: { // centraliza informações necessárias no mapa do jogo
			
 
				+        characterAnimation: (operation) => {}, // Parâmetros recebidos pela função de animar personagem no mapa
			
 
				+        character: (operation) => {}, // Sprite com animação do personagem principal do jogo percorrendo o mapa
			
 
				+        startBuilding: () => {}, // Lugar de onde o personagem sai no mapa
			
 
				+        endBuilding: () => {}, // Lugar que o personagem quer chegar ao percorrer o mapa
			
 
				+      },
			
 
				+      end: { // centraliza informações necessárias na tela final do jogo
			
 
				+        characterAnimation: () => ({}), // Parâmetros recebidos pela função de animar personagem na tela final
			
 
				+        character: () => ({}), // Sprite com animação do personagem principal do jogo na tela final
			
 
				+        building: () => ({}) // Lugar que o personagem quer chegar ao percorrer o mapa
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+];
			
 
				+</code></pre>
			
 
				+            </li>
			
 
				+
			
 
				+            <li>
			
 
				+              <h3>5. Adicionar as mídias que serão usadas no jogo atual em
			
 
				+                <code>js/globals/globals_tokens.js</code>
			
 
				+              </h3>
			
 
				+
			
 
				+              <p>
			
 
				+                A global <code>url</code> referencia todos arquivos de mídia usados dentro do iFractions. Novos itens
			
 
				+                podem ser adicionados em <code>boot</code> ou dentro de uma nova propriedade com o nome do jogo.
			
 
				+                Itens colocados em <code>boot</code> são carregados em cache assim que o iFractions inicia enquanto os
			
 
				+                dentro do uma propriedade com o nome do jogo só serão carregadas quando esse jogo for selecionado.
			
 
				+              </p>
			
 
				+
			
 
				+              <pre><code class='clear language-js'>const url: {
			
 
				+  // (esses itens serão carregados logo quando o ifractions é iniciado)
			
 
				+  // é preciso pelo menos colocar os ícones de menu associados ao novo jogo
			
 
				+  boot: {
			
 
				+    image: [
			
 
				+      ['game_&lt;gameId>', &lt;url>], // ícone do jogo no menu primario
			
 
				+    ],
			
 
				+    sprite: [
			
 
				+      ['mode_&lt;gameId>', &lt;url>], // ícone do modo de jogo no menu secundario
			
 
				+    ]
			
 
				+  },
			
 
				+
			
 
				+  // (esse itens só serão carregados ao abrir o jogo)
			
 
				+  nomeDoJogo: {
			
 
				+    image: [
			
 
				+      ['&lt;lugar de onde o personagem sai no mapa>', &lt;url>],
			
 
				+      ['&lt;lugar onde o personagem chegará no mapa>', &lt;url>],
			
 
				+    ],
			
 
				+    sprite: [
			
 
				+      ['&lt;spritesheet do personagem>', &lt;url>],
			
 
				+    ],
			
 
				+    audio: [],
			
 
				+  }
			
 
				+  
			
 
				+}
			
 
				+</code></pre>
			
 
				+            </li>
			
 
				+
			
 
				+            <li>
			
 
				+              <h3>6. Adicionar novos assets</h3>
			
 
				+
			
 
				+              <p>Criar as novas figuras em:</p>
			
 
				+
			
 
				+              <ul>
			
 
				+                <li>
			
 
				+                  <code>assets/img/icons_menu/nomeDoJogo.png</code> -> ícone de <b>jogo</b> na tela de menu
			
 
				+                  principal.
			
 
				+                </li>
			
 
				+                <li>
			
 
				+                  <code>assets/img/icons_menu/nomeDoJogo_1.png</code> -> ícone de <b>modo de jogo</b> na tela de
			
 
				+                  menu de customização.
			
 
				+                </li>
			
 
				+              </ul>
			
 
				+            </li>
			
 
				+
			
 
				+          </ul>
			
 
				+        </section>
			
 
				+
			
 
				+        <div>
			
 
				+          <a class="btn btn-primary" href='../documentacao.html' role="button">Voltar</a>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/documentacao.html
+++ b/paginas/documentacao.html
@@ -0,0 +1,148 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 | Documentação</title>
			
 
				+
			
 
				+  <link rel="stylesheet" href="../style/prism/prism-default.css">
			
 
				+  <script src="../script/prism/prism.js"></script>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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 active" aria-current="page">Documentação
			
 
				+
			
 
				+        </li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Documentações & tutoriais</h1>
			
 
				+    <hr class="display-4">
			
 
				+    <p class="lead">
			
 
				+      <!-- Esta página apresenta detalhes da implementação do iFractions. É indicada para programadores 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>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <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="diretorio">
			
 
				+          <h2 id="sou-dev">Sou desenvolvedor</h2>
			
 
				+          <ul>
			
 
				+            <li><a href="./area_programador/page_1.html">Início</a>
			
 
				+              <ul>
			
 
				+                <li><a href="./area_programador/page_1.html#sec-diretorio">Estrutura de pastas</a></li>
			
 
				+                <li><a href="./area_programador/page_1.html#sec-local">Instalação local</a></li>
			
 
				+                <li><a href="./area_programador/page_1.html#sec-bd">Configuração do
			
 
				+                    banco de dados</a></li>
			
 
				+                <!-- Onde os dados são coletados -->
			
 
				+              </ul>
			
 
				+            </li>
			
 
				+
			
 
				+            <li><a href="./area_programador/page_2.html">Tecnologias utilizadas</a></li>
			
 
				+            <li><a href="./area_programador/page_3.html">Conhecendo o código</a>
			
 
				+              <ul>
			
 
				+                <li><a href="./area_programador/page_3.html#estado">Estados do jogo</a>
			
 
				+                  <ul>
			
 
				+                    <li><a href="./area_programador/page_3.html#estado__codigo">No código</a>
			
 
				+                  </ul>
			
 
				+                <li><a href="./area_programador/page_3.html#mechanics">O arquivo gameMechanics.js</a>
			
 
				+                  <ul>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__estado">Gerenciando estados</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__laco">Game loop</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__midia">Carregando mídia em cache</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__cache">Como a mídia é carregada em cache
			
 
				+                        estados</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__i18n">Sobre arquivos de idioma</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__usaMidia">Usando arquivos de idioma</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__canvasIndireto">Desenhando na tela
			
 
				+                        (indiretamente)</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__canvasDireto">Desenhando na tela
			
 
				+                        (diretamente)</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__matematica">Funções matemáticas</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__mouse">Eventos de mouse</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__animacao">Animação</a>
			
 
				+                    <li><a href="./area_programador/page_3.html#mechanics__temp">Temporizador</a>
			
 
				+                  </ul>
			
 
				+                  <!-- <li><a href="./area_programador/page_3.html#global">O arquivo globals.js</a> -->
			
 
				+              </ul>
			
 
				+            </li>
			
 
				+            <li><span class="badge bg-success">Tutorial</span> <a href="./area_programador/page_tutorial.html">Criando
			
 
				+                um novo jogo no iFractions</a>
			
 
				+          </ul>
			
 
				+
			
 
				+          <h2 id="sou-prof">Sou professor</h2>
			
 
				+          <ul>
			
 
				+            <li><span class="badge bg-success">Tutorial</span> <a href="./area_professor/page_2.html">Como preparar uma
			
 
				+                atividade com iFractions no
			
 
				+                Moodle</a></li>
			
 
				+            <li><span class="badge bg-success">Tutorial</span> <a href="./area_professor/page_3.html">Como analisar as
			
 
				+                atividades com iFractions enviadas
			
 
				+                pelos alunos
			
 
				+                no Moodle</a></li>
			
 
				+          </ul>
			
 
				+
			
 
				+          <h2 id="sou-admin">Sou administrador Moodle</h2>
			
 
				+          <ul>
			
 
				+            <li><span class="badge bg-success">Tutorial</span> <a href="./area_admin/page_1.html">Como instalar o
			
 
				+                pacote iTarefa/iFractions no Moodle</a>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+
			
 
				+          <hr>
			
 
				+
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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(1);
			
 
				+</script>
			
 
				+
			
 
				+</html>
			
--- a/paginas/index.html
+++ b/paginas/index.html
--- a/paginas/publicacoes.html
+++ b/paginas/publicacoes.html
@@ -0,0 +1,83 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 | Publicações</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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 active" aria-current="page">Publicações</li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Publicações</h1>
			
 
				+    <p class="lead">Nessa página, você encontra os trabalhos publicados sobre o iFractions.</p>
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina-->
			
 
				+  <main class='container'>
			
 
				+
			
 
				+    <section>
			
 
				+      <ul>
			
 
				+        <li class="my-3">
			
 
				+          <b>Artigo:</b> M. J. Ibarra et al., "Game Based Learning for Math Learning: Ifractions Case Study,"
			
 
				+          <i>2019
			
 
				+            International
			
 
				+            Conference on Virtual Reality and Visualization (ICVRV)</i>, 2019, pp. 208-211, doi:
			
 
				+          <a target="_blank"
			
 
				+            href='https://ieeexplore.ieee.org/abstract/document/9213024'>10.1109/ICVRV47840.2019.00050</a>.
			
 
				+        </li>
			
 
				+        <li>
			
 
				+          <b>Poster</b>: Terceiro Encontro Paulista de Pós-Graduandos em Computação (EPPC3). Jogos educativos no
			
 
				+          ensino
			
 
				+          de matemática básica. 2019. (Encontro).
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </section>
			
 
				+
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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(1);
			
 
				+</script>
			
 
				+
			
 
				+</html>
			
--- a/paginas/sobre/index.html
+++ b/paginas/sobre/index.html
--- a/paginas/sobre/page_1.html
+++ b/paginas/sobre/page_1.html
@@ -0,0 +1,162 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 | Sobre</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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 active" aria-current="page">Sobre - especificações</li>
			
 
				+        <!-- <li class="breadcrumb-item active" aria-current="page">Especificações</li> -->
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Conhecendo o iFractions</h1>
			
 
				+    <!-- <p class="lead">Nessa página, você encontrará um pouco do iFractions.</p> -->
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet"></div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id='especificacoes'>
			
 
				+          <h2>Especificações</h2>
			
 
				+
			
 
				+          <p>Abaixo, um resumo das especificações do iFractions.</p>
			
 
				+
			
 
				+          <table class="table">
			
 
				+            <thead>
			
 
				+              <tr>
			
 
				+                <th>Categoria</th>
			
 
				+                <th>Descriçao</th>
			
 
				+              </tr>
			
 
				+            </thead>
			
 
				+            <tbody>
			
 
				+              <tr>
			
 
				+                <th>Nome</th>
			
 
				+                <td>iFractions</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Resumo</th>
			
 
				+                <td>Coletânea de jogos <i>online</i> para ensino de frações</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Desenvolvido por</th>
			
 
				+                <td><a href="http://www.usp.br/line/" target="_blank">LInE</a> &minus; <em>Free Information, Private
			
 
				+                    data</em></td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Gênero</th>
			
 
				+                <td>Educativo</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th><span class="text-warning">Mídia</span></th>
			
 
				+                <td>Digital</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Plataforma</th>
			
 
				+                <td>
			
 
				+                  <ul class="list-unstyled">
			
 
				+                    <li>Navegador web</li>
			
 
				+                    <li>Moodle</li>
			
 
				+                  </ul>
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Idiomas</th>
			
 
				+                <td>
			
 
				+                  <ul class="list-unstyled">
			
 
				+                    <li>Inglês</li>
			
 
				+                    <li>Espanhol</li>
			
 
				+                    <li>Francês</li>
			
 
				+                    <li>Inglês</li>
			
 
				+                    <li>Portuguẽs (Brasil)</li>
			
 
				+                  </ul>
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Jogadores</th>
			
 
				+                <td>1</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Gráficos</th>
			
 
				+                <td>2D</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th><span class="text-warning">Tipo</span></th>
			
 
				+                <td>
			
 
				+                  <ul class="list-unstyled">
			
 
				+                    <li>Puzzle</li>
			
 
				+                    <li>Clique/Touch</li>
			
 
				+                    <!-- teclado é requerido para colocar nome -->
			
 
				+                  </ul>
			
 
				+                </td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Licença</th>
			
 
				+                <td>GNU General Public License version 3 (<a href="https://www.gnu.org/licenses/licenses.pt-br.html">GNU
			
 
				+                    GPLv3</a>)</td>
			
 
				+              </tr>
			
 
				+            </tbody>
			
 
				+          </table>
			
 
				+        </section>
			
 
				+
			
 
				+        <div class="d-flex justify-content-between">
			
 
				+          <a class="btn btn-primary ms-auto" href='./page_2.html' role="button">Próximo - Personalização</a>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/sobre/page_2.html
+++ b/paginas/sobre/page_2.html
@@ -0,0 +1,171 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 | Sobre</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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 active" aria-current="page">Sobre - personalização</li>
			
 
				+        <!-- <li class="breadcrumb-item active" aria-current="page">Personalização</li> -->
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Conhecendo o iFractions</h1>
			
 
				+    <!-- <p class="lead">...</p> -->
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet"></div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id='personalizacao'>
			
 
				+          <h2>Personalização</h2>
			
 
				+
			
 
				+          <p>
			
 
				+            O iFractions é uma coletânea de jogos que aborda diferentes assuntos relacionados a frações. Nele, o
			
 
				+            usuário pode personalizar o jogo como desejado nos menus do iFractions combinando:
			
 
				+            <span class="badge rounded-pill bg-success">Jogo</span> +
			
 
				+            <span class="badge rounded-pill bg-success">Modo de Jogo</span> +
			
 
				+            <span class="badge rounded-pill bg-success">Operação matemática</span> +
			
 
				+            <span class="badge rounded-pill bg-success">Nível de dificuldade</span> +
			
 
				+            <span class="badge rounded-pill bg-success">Elementos visuais auxiliares</span>.
			
 
				+          </p>
			
 
				+
			
 
				+          <div class="d-flex gap-3 mb-3">
			
 
				+            <img class="w-50" src="../../assets/menu.png" alt="">
			
 
				+            <img class="w-50" src="../../assets/custom-menu-s1.png" alt="">
			
 
				+          </div>
			
 
				+
			
 
				+          <table class="table text-start">
			
 
				+            <tr>
			
 
				+              <th>Jogo</th>
			
 
				+              <td>É o conceito principal. Temos disponíveis atualmente 3 jogos: quadriláteros I e quadriláteros II, que
			
 
				+                lidam com frações aplicadas em figuras retangulares, e círculos I, que apresenta fração como um arco.
			
 
				+              </td>
			
 
				+            </tr>
			
 
				+            <tr>
			
 
				+              <th>Modo de jogo</th>
			
 
				+              <td>São as diferentes variações para o jogo selecionado.
			
 
				+              </td>
			
 
				+            </tr>
			
 
				+            <tr>
			
 
				+              <th>Operação matemática</th>
			
 
				+              <td>Representam diferentes conteúdos de frações (soma, subtração, igualdade etc) que podem ser abordados
			
 
				+                pelo mesmo jogo.
			
 
				+              </td>
			
 
				+            </tr>
			
 
				+            <tr>
			
 
				+              <th>Nível de dificuldade</th>
			
 
				+              <td>Representado como um número inteiro tal que quando maior o valor, maior a dificuldade, informa a
			
 
				+                dificuldade geral do jogo, sendo parâmetro para criação dos 4 fases do jogo selecionado.</td>
			
 
				+              <!-- 
			
 
				+                p: mostrar o que dificuldade significa em cada fase (subdivisão do chão, frações mais difíceis, etc.) 
			
 
				+              -->
			
 
				+            </tr>
			
 
				+            <tr>
			
 
				+              <th>Elementos visuais auxiliares</th>
			
 
				+              <td>Dizem respeito ao controle da adição ou remoção de elementos visuais que podem facilitar o jogo, como
			
 
				+                mostrar ou não as frações na tela.</td>
			
 
				+            </tr>
			
 
				+          </table>
			
 
				+
			
 
				+          <p>
			
 
				+            Uma vez configurado, ele gera um mapa com <strong>4 fases</strong> para a jogo personalizado, <strong>com
			
 
				+              nível crescente de dificuldade</strong>. O objetivo do usuário é então chegar ao final do mapa,
			
 
				+            finalizando todos os níveis do jogo.
			
 
				+          </p>
			
 
				+
			
 
				+          <div class="d-flex justify-content-center">
			
 
				+            <img class="mb-3 w-50" src="../../assets/map.png" alt="">
			
 
				+          </div>
			
 
				+
			
 
				+          <div class="shadow p-3 w-50 mx-auto">
			
 
				+            <img src='../../assets/selected-game.png' class='ifr__img img-responsive' alt='Tela do mapa de fases.'
			
 
				+              width="100%">
			
 
				+            <table class="table text-start">
			
 
				+              <tr>
			
 
				+                <th>Jogo</th>
			
 
				+                <td><em>Quandriláteros I</em><br />(temática rural)</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Modos de jogo</th>
			
 
				+                <td><i>A</i><br />(selecionar subdivisão do chão)</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Operação matemática</th>
			
 
				+                <td><i>Plus</i><br />(soma de frações)</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Dificuldade</th>
			
 
				+                <td>3<br />(Mais difícil)</td>
			
 
				+              </tr>
			
 
				+              <tr>
			
 
				+                <th>Elementos auxiliares</th>
			
 
				+                <td><i>Mostrar frações</i></td>
			
 
				+              </tr>
			
 
				+            </table>
			
 
				+          </div>
			
 
				+
			
 
				+        </section>
			
 
				+
			
 
				+        <div class="d-flex justify-content-between">
			
 
				+          <a class="btn btn-primary" href='./page_1.html' role="button">Voltar - Especificações</a>
			
 
				+          <a class="btn btn-primary" href='./page_3.html' role="button">Próximo - Fluxo de telas</a>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/sobre/page_3.html
+++ b/paginas/sobre/page_3.html
@@ -0,0 +1,256 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 | Sobre</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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 active" aria-current="page">Sobre - fluxo de telas</li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Conhecendo o iFractions</h1>
			
 
				+    <!-- <p class="lead">...</p> -->
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet"></div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id='navegacao'>
			
 
				+          <section id='navegacao__fluxo'>
			
 
				+            <h3>Fluxo de telas</h3>
			
 
				+
			
 
				+            <p>
			
 
				+              Na imagem abaixo, as setas em preto representam o fluxo principal do <em>iFractions online</em>,
			
 
				+              passando pelas telas: seleção de idioma (1), nome de usuário (2), menu principal com os jogos (3), menu de
			
 
				+              personalização do jogo selecionado (4), mapa das fases (5), as fases em si (6) e a animação final, quando
			
 
				+              o aluno terminou todas as fases do mapa. Já as setas em amarelo apresentam o fluxo alternativo que pode
			
 
				+              ser executado pelo usuário utilizando os ícones de navegação na parte superior da tela.
			
 
				+            </p>
			
 
				+
			
 
				+            <div class="text-center">
			
 
				+              <img src='../../assets/fluxo-de-telas.png' class='ifr__img img-responsive'>
			
 
				+              <!-- <p>Fluxo das telas do iFractions.</p> -->
			
 
				+            </div>
			
 
				+
			
 
				+            <!-- Mais sobre o funcionamento do ifractions moodle na seção ?? -->
			
 
				+
			
 
				+            <!-- Fazer fluxo de telas para versão moodle -->
			
 
				+
			
 
				+            <p>
			
 
				+              O <i>iFractions para Moodle</i> utiliza variações deste fluxo para o papel de professor e de aluno,
			
 
				+              deixando toda personalização do jogo para o papel de professor e mapa e jogos para o papel de aluno.
			
 
				+            </p>
			
 
				+
			
 
				+            <section id='navegacao__lang_name'>
			
 
				+              <h4>1- Tela de idioma</h3>
			
 
				+
			
 
				+                <p>Ao abrir o <i>iFractions online</i>, a primeira tela apresentada para o usuário é a tela de idioma.
			
 
				+                  Atualmente o iFractions está disponível em Português, Inglês, Espanhol, Italiano e Francês.
			
 
				+                </p>
			
 
				+
			
 
				+                <div class="text-center mb-3">
			
 
				+                  <img class="w-50" src="../../assets/lang.png" alt="">
			
 
				+                </div>
			
 
				+            </section>
			
 
				+
			
 
				+            <section>
			
 
				+              <h4>2- Tela de nome do usuário</h4>
			
 
				+
			
 
				+              <p>Em seguida temos a tela que pede o nome do usuário. No <em> iFractions Moodle</em> as telas de nome e
			
 
				+                idioma não são mostradas pois essas informações são fornecidas pelo Moodle.
			
 
				+              </p>
			
 
				+
			
 
				+              <div class="text-center mb-3">
			
 
				+                <img class="w-50" src="../../assets/name.png" alt="">
			
 
				+              </div>
			
 
				+
			
 
				+            </section>
			
 
				+
			
 
				+            <section id='navegacao__menu'>
			
 
				+              <h4>3 e 4 - Telas de menu</h4>
			
 
				+
			
 
				+              <p>
			
 
				+                Na tela de menu principal. o usuário pode selecionar qual jogo ele deseja personalizar e jogar.
			
 
				+              </p>
			
 
				+
			
 
				+              <div class="text-center mb-3">
			
 
				+                <img class='ifr__img img-responsive w-50' src='../../assets/menu.png'>
			
 
				+              </div>
			
 
				+
			
 
				+              <p>
			
 
				+                Após a escolha, o menu secundário é apresentado, permitindo ao usuário personalizar o jogo escolhido.
			
 
				+                Abaixo é possível ver as telas de menu secundário dos três jogos disponíveis.
			
 
				+              </p>
			
 
				+
			
 
				+              <!-- atualizar com novas imagens-->
			
 
				+              <div class="row mb-3">
			
 
				+                <div class="col-lg-4"> <img src='../../assets/custom-menu-s1.png' class='ifr__img img-responsive'
			
 
				+                    width="100%">
			
 
				+                </div>
			
 
				+                <div class="col-lg-4"> <img src='../../assets/custom-menu-c1.png' class='ifr__img img-responsive'
			
 
				+                    width="100%">
			
 
				+                </div>
			
 
				+                <div class="col-lg-4"> <img src='../../assets/custom-menu-s2.png' class='ifr__img img-responsive'
			
 
				+                    width="100%">
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <!-- na imagem nao ta saindo o I de 'circulos I' (e outros) -->
			
 
				+
			
 
				+              <p>
			
 
				+                Assim, o jogo a ser gerado será uma combinação de: <b>jogo, modo de jogo, operação matemática, nível
			
 
				+                  de dificuldade</b> e <b>elementos visuais auxiliares</b>.
			
 
				+                <!-- (como mencionado nas seções <span>\ref{sec:diff}</span> e <span>\ref{sec:sobreJogos}</span>).-->
			
 
				+              </p>
			
 
				+
			
 
				+              <p>A tabela abaixo apresenta as variáveis usadas para configurar os jogos disponíveis: QI (Quadriláteros
			
 
				+                I), CI (Círculos I) e QII (Quadriláteros II) - e todos valores possíveis para elas.
			
 
				+              </p>
			
 
				+
			
 
				+              <table class="table">
			
 
				+                <thead>
			
 
				+                  <tr>
			
 
				+                    <th>Variáveis</th>
			
 
				+                    <th>Valores para QI</th>
			
 
				+                    <th>Valores para CI</th>
			
 
				+                    <th>Valores para QII</th>
			
 
				+                  </tr>
			
 
				+                </thead>
			
 
				+                <tbody>
			
 
				+                  <tr>
			
 
				+                    <th><code>gameId</code></th>
			
 
				+                    <td><code>1</code></td>
			
 
				+                    <td><code>2</code></td>
			
 
				+                    <td><code>3</code></td>
			
 
				+                  </tr>
			
 
				+                  <tr>
			
 
				+                    <th><code>gameName</code></th>
			
 
				+                    <td><code>squareOne</code></td>
			
 
				+                    <td><code>circleOne</code></td>
			
 
				+                    <td><code>squareTwo</code></td>
			
 
				+                  </tr>
			
 
				+                  <tr>
			
 
				+                    <th><code>gameMode</code></th>
			
 
				+                    <td><code>a</code>, <code>b</code></td>
			
 
				+                    <td><code>a</code>, <code>b</code></td>
			
 
				+                    <td><code>a</code>, <code>b</code></td>
			
 
				+                  </tr>
			
 
				+                  <tr>
			
 
				+                    <th><code>gameOperation</code></th>
			
 
				+                    <td><code>plus</code>, <code>minus</code></td>
			
 
				+                    <td><code>plus</code>, <code>minus</code>, <code>mixed</code></td>
			
 
				+                    <td><code>equals</code></td>
			
 
				+                  </tr>
			
 
				+                  <tr>
			
 
				+                    <th><code>gameDifficulty</code></th>
			
 
				+                    <td><code>1</code> à <code>3</code></td>
			
 
				+                    <td><code>1</code> à <code>3</code></td>
			
 
				+                    <td><code>1</code> à <code>5</code></td>
			
 
				+                  </tr>
			
 
				+                </tbody>
			
 
				+              </table>
			
 
				+
			
 
				+              <!-- faltou levelLabel pq tem esse nome horrivel q eu tenho q mudar -->
			
 
				+
			
 
				+              <!--<p class='center'>Lista de variáveis que configuram os jogos e seus possíveis valores.</p>-->
			
 
				+
			
 
				+              <!-- As telas de menu apresentam também alguns ícones de ajuda (círculos azuis com interrogações), onde com um clique o usuário pode visualizar mais informações sobre elementos do jogo. -->
			
 
				+
			
 
				+            </section>
			
 
				+            <section id='navegacao__mapa'>
			
 
				+              <h3>Mapa de fases</h3>
			
 
				+
			
 
				+              <p>
			
 
				+                Tendo finalizado a personalização do jogo, é chamada a tela do mapa de fases contendo 4 fases em nível
			
 
				+                crescente de dificuldade de acordo com as configurações definidas.
			
 
				+              </p>
			
 
				+
			
 
				+              <div class='text-center mb-3'>
			
 
				+                <img src='../../assets/map.png' class='ifr__img img-responsive' width="60%">
			
 
				+                <!-- <p>Mapa de fases (estado <b>mapState</b> em <code>/js/map.js</code>)</p> -->
			
 
				+              </div>
			
 
				+            </section>
			
 
				+            <section id='navegacao__animacao'>
			
 
				+              <h3>Animação final</h3>
			
 
				+
			
 
				+              <p>
			
 
				+                Quando uma atividade é completada corretamente o jogador passa para o próximo ponto no mapa. Tendo
			
 
				+                terminado
			
 
				+                todas as fases o personagem chega no seu objetivo, sendo apresentada a tela de animação final
			
 
				+                que encerra o fluxo de telas principal do jogo e retorna para o menu
			
 
				+                principal.
			
 
				+              </p>
			
 
				+
			
 
				+              <div class='text-center mb-3'>
			
 
				+                <img src='../../assets/end.png' class='ifr__img img-responsive' width="60%">
			
 
				+                <!-- <p>
			
 
				+                  Tela que indica fim do jogo após o aluno concluir todas fases (estado <code>endState</code> em
			
 
				+                  <code>/js/map.js</code>).
			
 
				+                </p> -->
			
 
				+              </div>
			
 
				+            </section>
			
 
				+          </section>
			
 
				+
			
 
				+          <div class="d-flex justify-content-between">
			
 
				+            <a class="btn btn-primary" href='./page_2.html' role="button">Voltar - Personalização</a>
			
 
				+            <a class="btn btn-primary" href='./page_4.html' role="button">Próximo - Jogos</a>
			
 
				+          </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/paginas/sobre/page_4.html
+++ b/paginas/sobre/page_4.html
@@ -0,0 +1,312 @@
 
				+<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
			
 
				+<!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 | Sobre</title>
			
 
				+</head>
			
 
				+
			
 
				+<body class="container-flex">
			
 
				+
			
 
				+  <!-- menu superior -->
			
 
				+  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
			
 
				+  </nav>
			
 
				+
			
 
				+  <!-- botao de voltar ao inicio da pagina -->
			
 
				+  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
			
 
				+    class="btn btn-primary">&uparrow;</button>
			
 
				+
			
 
				+  <!-- modal -->
			
 
				+  <div id="myModal" class="modal">
			
 
				+    <span class="close">&times;</span>
			
 
				+    <img class="modal-content" id="myModal-img" src="">
			
 
				+    <div id="caption"></div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- header -->
			
 
				+  <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 active" aria-current="page">Sobre - jogos disponíveis</li>
			
 
				+      </ol>
			
 
				+    </nav>
			
 
				+    <h1 class="display-4">Conhecendo o iFractions</h1>
			
 
				+    <!-- <p class="lead">...</p> -->
			
 
				+    <hr class="display-4">
			
 
				+  </header>
			
 
				+
			
 
				+  <!-- pagina -->
			
 
				+  <main class='container-flex'>
			
 
				+    <div class="row">
			
 
				+      <!-- menu de navegacao lateral -->
			
 
				+      <!-- <div class="col-lg-2 text-start p-1 ifr__toc ifr__noBullet"></div> -->
			
 
				+      <div class="col-lg-2 text-start p-1"></div>
			
 
				+
			
 
				+      <div class="col-lg-8 px-5">
			
 
				+
			
 
				+        <section id='jogo'>
			
 
				+          <h2>Jogos disponíveis</h2>
			
 
				+
			
 
				+          <p>...</p>
			
 
				+
			
 
				+          <!-- expandir no conceito dos jogos -->
			
 
				+          <section id='jogo__quadrilateroI'>
			
 
				+            <h3>Quadriláteros I</h3>
			
 
				+
			
 
				+            <ul>
			
 
				+              <li>
			
 
				+                Com temática rural, neste jogo o personagem é um trator que deseja empurrar uma porção de blocos com
			
 
				+                o
			
 
				+                intuito
			
 
				+                de tapar um buraco aberto na grama da fazenda.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                Este jogo representa uma fração como uma porção de um retângulo. Assim, os blocos levados pelo
			
 
				+                trator
			
 
				+                devem
			
 
				+                ser equivalentes ao buraco no solo.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                As operações matemáticas com frações representadas nesse jogo são soma (trator indo para a direita)
			
 
				+                e
			
 
				+                subtração (trator indo para a esquerda).
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                A figura <span>\ref{fig:s1-A}</span> apresenta o <b>modo de jogo</b> 'A', onde você deve selecionar
			
 
				+                uma
			
 
				+                porção do buraco no solo que seja proporcional aos blocos carregados pelo trator.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                A figura <span>\ref{fig:s1-B}</span> apresenta o <b>modo de jogo</b> 'B', onde você deve a
			
 
				+                quantidade
			
 
				+                de
			
 
				+                blocos necessária para que o trator consiga tapar o buraco no solo.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                Em ambos modos de jogo na figura superior trator esta 'voltando' (<b>operação matemática</b> de
			
 
				+                subtração
			
 
				+                de
			
 
				+                frações) e na inferior o trator está 'indo' (<b>operação matemática</b> de soma de frações).
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                Em ambos modos de jogo, também, a visualização de frações está ativada, permitindo ao usuário ver as
			
 
				+                frações
			
 
				+                do lado da pilha de blocos.
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+
			
 
				+            <!-- (old) tem temática rural, onde o personagem é um trator que precisa empurrar uma dada porção de blocos para tampar o buraco no chão. Este jogo representa frações como subdivisões de quadriláteros. A soma e subtração de frações é representada como a 'ida' e 'volta' do trator, respectivamente. -->
			
 
				+
			
 
				+            <div class='text-center'>
			
 
				+              <img src='../../assets/s1-A.png' class='ifr__img img-responsive' width="60%">
			
 
				+              <p>
			
 
				+                Jogo <b>Quadriláteros I</b> (squareOne) - modo de seleção do buraco no chão (A) - subníveis de
			
 
				+                subtração
			
 
				+                (Minus) e soma (Plus), respectivamente (estado <code>squareOne</code> em
			
 
				+                <code>/js/squareOne.js</code>).
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class='text-center'>
			
 
				+              <img src='../../assets/s1-B.png' class='ifr__img img-responsive' width="60%">
			
 
				+              <p>
			
 
				+                Jogo <b>Quadriláteros I</b> (squareOne) - modo de seleção da pilha de retângulos (B) - subníveis de
			
 
				+                subtração (Minus) e soma (Plus), respectivamente (estado <code>squareOne</code> em
			
 
				+                <code>/js/squareOne.js</code>).
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+          </section>
			
 
				+
			
 
				+          <hr class="my-4">
			
 
				+
			
 
				+          <section id='jogo__quadrilateroII'>
			
 
				+            <h3>Quadriláteros II</h3>
			
 
				+
			
 
				+            <ul>
			
 
				+              <li>Neste jogo o personagem é uma criança que deseja caminhar até a escola.</li>
			
 
				+
			
 
				+              <li>
			
 
				+                Este jogo representa a fração como porção de um retângulo. Assim, são mostrados dois retângulos
			
 
				+                <!-- difere da info no jogo (inicio) -->
			
 
				+                de mesmo tamanho,
			
 
				+                <!-- difere da info no jogo (fim) -->
			
 
				+                com subdivisões diferentes e o jogador deve selecionar porções equivalentes.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>A operação matemática representada neste jogo é igualdade de frações.</li>
			
 
				+
			
 
				+              <li>
			
 
				+                Na figura <span>\ref{fig:s2}</span> a imagem da esquerda apresenta o <b>modo de jogo</b> 'A', onde o
			
 
				+                número
			
 
				+                de
			
 
				+                subdivisões do retângulo superior é maior que a inferior e a imagem da direita apresenta o <b>modo
			
 
				+                  de
			
 
				+                  jogo</b>
			
 
				+                'B', onde o número de subdivisões do retângulo inferior é maior que o superior.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                Em ambos modos de jogo a visualização de retângulos auxiliares está ativada, permitindo ao usuário
			
 
				+                ver
			
 
				+                os
			
 
				+                retângulos quase transparentes abaixo dos retângulos interativos.
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+
			
 
				+            <!-- (old)
			
 
				+            também tem a temática da criança querendo chegar à escola, dessa vez à pé. Este jogo representa frações como subdivisões de quadriláteros. Aborda igualdade de frações como diferentes subdivisões em dois retângulos de mesmo tamanho.
			
 
				+          
			
 
				+            frações de diferentes denominadores são apresentadas para o aluno, permitindo que o mesmo perceba que mesmo com valores diferente, duas frações podem ser equivalentes.
			
 
				+
			
 
				+            p: considerar recolocar essas imagens embaixo com essas legendas que citam estados e mudar para uma legenda mais simples nesse ponto talvez?
			
 
				+            -->
			
 
				+
			
 
				+            <div class='text-center'>
			
 
				+              <img src='../../assets/s2.png' class='ifr__img img-responsive' width="60%">
			
 
				+              <p>
			
 
				+                Jogo <b>Quadriláteros II</b> (squareTwo) com tema igualdade de frações - modos de maior subdivisão
			
 
				+                em
			
 
				+                cima (A) e embaixo (B), respectivamente (estado <code>squareTwo</code> em
			
 
				+                <code>/js/squareTwo.js</code>).
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+          </section>
			
 
				+
			
 
				+          <hr class="my-4">
			
 
				+
			
 
				+          <section id='jogo__circuloI'>
			
 
				+            <h3>Círculos I</h3>
			
 
				+
			
 
				+            <ul>
			
 
				+              <li>
			
 
				+                Com uma temática de voo, neste jogo o personagem é uma criança que deseja voar de balão para chegar
			
 
				+                até
			
 
				+                a
			
 
				+                escola
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                Este jogo representa uma fração como uma porção de um círculo (arco). Assim, os arcos selecionados
			
 
				+                devem
			
 
				+                ser
			
 
				+                proporcionais ao caminho a ser percorrido.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                As operações matemáticas com frações representadas neste jogo são: soma (criança indo para a
			
 
				+                direita)
			
 
				+                e
			
 
				+                subtração (criança indo para a direita), além de ambas operações numa mesma fase.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                A figura <span>\ref{fig:c1-A}</span> apresenta o <b>modo de jogo</b> 'A', onde você deve selecionar
			
 
				+                a
			
 
				+                posição
			
 
				+                no solo em que o balão deve estar para que a criança consiga chegar até ele.
			
 
				+              </li>
			
 
				+              <!-- circulo -> linha no chao-->
			
 
				+
			
 
				+              <li>
			
 
				+                A figura <span>\ref{fig:c1-B}</span> apresenta o <b>modo de jogo</b> 'B', onde você deve selecionar
			
 
				+                a
			
 
				+                quantidade de arcos necessária, cuja distancia leve até a posição do balão no chão.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                Em ambos modos de jogo os arcos azuis fazer a criança ir para a direita (<b>operação matemática</b>}
			
 
				+                de
			
 
				+                soma
			
 
				+                de frações) e os arcos vermelhos fazem a criança 'voltar' para a esquerda (<b>operação
			
 
				+                  matemática</b>}
			
 
				+                de
			
 
				+                subtração de frações). Assim, em cada figura temos as operações de 'soma e subtração numa mesma
			
 
				+                fase',
			
 
				+                'soma' e
			
 
				+                'subtração'.
			
 
				+              </li>
			
 
				+
			
 
				+              <li>
			
 
				+                Em ambos modos de jogo, também, a visualização de frações está ativada, permitindo ao usuário ver as
			
 
				+                frações
			
 
				+                do lado da pilha de blocos.
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+
			
 
				+            <!-- (old)
			
 
				+          item -> <b>CI:</b> tem temática de voo, onde o personagem é uma criança querendo viajar num balão para chegar até a escola. Este jogo representa frações como arcos. A circunferência do arco é equivalente à distância da criança até o balão. Semelhante a QI, este jogo aborda soma e subtração de frações como ida e volta da criança, mas também considera ambas operações de uma só vez.
			
 
				+          -->
			
 
				+
			
 
				+            <div class='text-center'>
			
 
				+              <img src='../../assets/c1-A.png' class='ifr__img img-responsive' width="60%">
			
 
				+              <p>
			
 
				+                Jogo <b>Círculos I</b> (circleOne) - fase de selecionar a posição do balão no chão (A) - subníveis
			
 
				+                com
			
 
				+                soma
			
 
				+                e
			
 
				+                subtração juntos (Mixed), só de soma (Plus) e só de subtração (Minus), respectivamente %subníveis de
			
 
				+                soma
			
 
				+                (Plus),
			
 
				+                subtração (Minus) e ambas operações (Mixed), respectivamente (estado <code>circleOne</code> em
			
 
				+                <code>/js/circleOne.js</code>).
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class='text-center'>
			
 
				+              <img src='../../assets/c1-B.png' class='ifr__img img-responsive' width="60%">
			
 
				+              <p>
			
 
				+                Jogo <b>Círculos I</b> (circleOne) - fase de selecionar a pilha de arcos (B) - subníveis com soma e
			
 
				+                subtração juntos (Mixed), só de soma (Plus) e só de subtração (Minus), respectivamente (estado
			
 
				+                <code>circleOne</code> em <code>/js/circleOne.js</code>).
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+          </section>
			
 
				+        </section>
			
 
				+
			
 
				+        <div class="d-flex justify-content-between">
			
 
				+          <a class="btn btn-primary" href='./page_3.html' role="button">Voltar - Fluxo de telas</a>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="col-lg-2 p-1"></div>
			
 
				+      <!-- desenvolver mais sobre a criação de trilhas
			
 
				+        seguindo o fluxo do jogo, o aluno deve passar pelas fases de QI antes de ir para as fases da CI, visto que a
			
 
				+        representação de frações por quadriláteros requer menor abstração por parte do aluno. Com o iFractions o aluno deve
			
 
				+        poder aos poucos ir construindo e internalizando o conceito de frações com o aumento gradativo de abstração
			
 
				+        requerida para resolver as atividades. Dessa forma, o ponto final seria a notação formal de frações. -->
			
 
				+    </div>
			
 
				+  </main>
			
 
				+
			
 
				+  <!-- rodape -->
			
 
				+  <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>
			
--- a/script/bootstrap/bootstrap.bundle.js
+++ b/script/bootstrap/bootstrap.bundle.js
--- a/script/bootstrap/bootstrap.bundle.js.map
+++ b/script/bootstrap/bootstrap.bundle.js.map
--- a/script/bootstrap/bootstrap.bundle.min.js
+++ b/script/bootstrap/bootstrap.bundle.min.js
--- a/script/bootstrap/bootstrap.bundle.min.js.map
+++ b/script/bootstrap/bootstrap.bundle.min.js.map
--- a/script/bootstrap/bootstrap.esm.js
+++ b/script/bootstrap/bootstrap.esm.js
--- a/script/bootstrap/bootstrap.esm.js.map
+++ b/script/bootstrap/bootstrap.esm.js.map
--- a/script/bootstrap/bootstrap.esm.min.js
+++ b/script/bootstrap/bootstrap.esm.min.js
--- a/script/bootstrap/bootstrap.esm.min.js.map
+++ b/script/bootstrap/bootstrap.esm.min.js.map
--- a/script/bootstrap/bootstrap.js
+++ b/script/bootstrap/bootstrap.js
--- a/script/bootstrap/bootstrap.js.map
+++ b/script/bootstrap/bootstrap.js.map
--- a/script/bootstrap/bootstrap.min.js
+++ b/script/bootstrap/bootstrap.min.js
--- a/script/bootstrap/bootstrap.min.js.map
+++ b/script/bootstrap/bootstrap.min.js.map
--- a/script/index.js
+++ b/script/index.js
@@ -0,0 +1,158 @@
 
				+// Botao de voltar para o topo da pagina
			
 
				+let btnVoltar = document.getElementById("ifr__btn__backToTop");
			
 
				+window.onscroll = function () {
			
 
				+  scrollFunction();
			
 
				+};
			
 
				+function scrollFunction() {
			
 
				+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
			
 
				+    btnVoltar.style.display = "block";
			
 
				+  } else {
			
 
				+    btnVoltar.style.display = "none";
			
 
				+  }
			
 
				+}
			
 
				+function backToTop() {
			
 
				+  document.body.scrollTop = 0;
			
 
				+  document.documentElement.scrollTop = 0;
			
 
				+}
			
 
				+
			
 
				+// Insere em todos rodapés
			
 
				+let footer = document.getElementById("footer");
			
 
				+footer.innerHTML =
			
 
				+  "<p>Atualizado pela ultima vez em: 3 de Outubro de 2023 -- por <a href='http://www.ime.usp.br/~laira'>Laira</a>.</p>";
			
 
				+
			
 
				+// Cria menu de navegação
			
 
				+let nav = document.querySelector(".navbar");
			
 
				+nav.innerHTML = `
			
 
				+ <div class="container-fluid">
			
 
				+      <a class="navbar-brand" aria-current="page" target="_self" href="index.html">iFractions</a>
			
 
				+
			
 
				+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
			
 
				+        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			
 
				+        <span class="navbar-toggler-icon"></span>
			
 
				+      </button>
			
 
				+
			
 
				+      <div class="collapse navbar-collapse" id="navbarNavDropdown">
			
 
				+        <ul class="navbar-nav">
			
 
				+          <li class="nav-item">
			
 
				+            <a class="nav-link" target="_self" href="index.html#download">Download</a>
			
 
				+          </li>
			
 
				+
			
 
				+          <li class="nav-item">
			
 
				+            <a class="nav-link" target="_self" href="./paginas/sobre/page_1.html">Conhecendo o iFractions</a>
			
 
				+          </li>
			
 
				+
			
 
				+          <li class="nav-item dropdown">
			
 
				+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
			
 
				+              data-bs-toggle="dropdown" aria-expanded="false"> Documentação
			
 
				+            </a>
			
 
				+            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
			
 
				+              <li><a class="dropdown-item" target="_self" href='./paginas/documentacao.html'>Início</a>
			
 
				+              </li>
			
 
				+              <li><a class="dropdown-item" target="_self" href='./paginas/documentacao.html#sou-prof'>Sou Professor</a>
			
 
				+              </li>
			
 
				+              <li><a class="dropdown-item" target="_self" href='./paginas/documentacao.html#sou-admin'>Sou
			
 
				+                  Administrador Moodle</a>
			
 
				+              </li>
			
 
				+              <li><a class="dropdown-item" target="_self" href='./paginas/documentacao.html#sou-dev'>Sou
			
 
				+                  Desenvolvedor</a>
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+          </li>
			
 
				+
			
 
				+          <li class="nav-item">
			
 
				+            <a class="nav-link" target="_self" href="./paginas/publicacoes.html">Publicações</a>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+`;
			
 
				+
			
 
				+// Coloca imagem no modal
			
 
				+const modal = document.getElementById("myModal");
			
 
				+let img = document.getElementsByClassName("ifr__img");
			
 
				+for (let i = 0; i < img.length; i++) {
			
 
				+  img[i].addEventListener("click", function () {
			
 
				+    modal.style.display = "block";
			
 
				+    document.getElementById("myModal-img").src = img[i].src;
			
 
				+    document.getElementById("caption").innerHTML = this.alt;
			
 
				+  });
			
 
				+}
			
 
				+let span = document.getElementsByClassName("close")[0];
			
 
				+span.onclick = () => (modal.style.display = "none");
			
 
				+
			
 
				+// Gera indice
			
 
				+const toc = document.querySelector(".ifr__toc");
			
 
				+if (toc) {
			
 
				+  const sections_all = document.querySelectorAll("section");
			
 
				+  sections_all.forEach((section_h2) => {
			
 
				+    const h2 = section_h2.querySelectorAll("h2")[0];
			
 
				+    if (h2) {
			
 
				+      const h2_ul = document.createElement("ul");
			
 
				+      const h2_li = document.createElement("li");
			
 
				+      const h3_ul = document.createElement("ul");
			
 
				+      const sections_h3 = section_h2.querySelectorAll("section");
			
 
				+      sections_h3.forEach((section_h3) => {
			
 
				+        const h3 = section_h3.querySelectorAll("h3")[0];
			
 
				+        if (h3) {
			
 
				+          const h3_li = document.createElement("li");
			
 
				+          h3_li.innerHTML = `<a href="#${section_h3.id}" target="_self">${h3.innerHTML}</a>`;
			
 
				+          h3_ul.appendChild(h3_li);
			
 
				+        }
			
 
				+      });
			
 
				+      h2_li.innerHTML = `<a href="#${section_h2.id}" target="_self">${h2.innerHTML}</a>`;
			
 
				+      h2_ul.appendChild(h2_li);
			
 
				+      h2_ul.appendChild(h3_ul);
			
 
				+      toc.appendChild(h2_ul);
			
 
				+    }
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+// Insere em todos rodapés
			
 
				+const updateMenu = (depth) => {
			
 
				+  const path = depth == 1 ? "../" : "../../";
			
 
				+  const semiPath = depth == 1 ? "./" : "../";
			
 
				+  nav.innerHTML = `
			
 
				+ <div class="container-fluid">
			
 
				+      <a class="navbar-brand" aria-current="page" target="_self" href="${path}index.html">iFractions</a>
			
 
				+
			
 
				+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
			
 
				+        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			
 
				+        <span class="navbar-toggler-icon"></span>
			
 
				+      </button>
			
 
				+
			
 
				+      <div class="collapse navbar-collapse" id="navbarNavDropdown">
			
 
				+        <ul class="navbar-nav">
			
 
				+          <li class="nav-item">
			
 
				+            <a class="nav-link" target="_self" href="${path}index.html#download">Download</a>
			
 
				+          </li>
			
 
				+
			
 
				+          <li class="nav-item">
			
 
				+            <a class="nav-link" target="_self" href="${semiPath}sobre/page_1.html">Conhecendo o iFractions</a>
			
 
				+          </li>
			
 
				+
			
 
				+          <li class="nav-item dropdown">
			
 
				+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
			
 
				+              data-bs-toggle="dropdown" aria-expanded="false"> Documentação
			
 
				+            </a>
			
 
				+            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
			
 
				+              <li><a class="dropdown-item" target="_self" href='${semiPath}documentacao.html'>Início</a>
			
 
				+              </li>
			
 
				+              <li><a class="dropdown-item" target="_self" href='${semiPath}documentacao.html#sou-prof'>Sou Professor</a>
			
 
				+              </li>
			
 
				+              <li><a class="dropdown-item" target="_self" href='${semiPath}documentacao.html#sou-dev'>Sou
			
 
				+                  Administrador Moodle</a>
			
 
				+              </li>
			
 
				+              <li><a class="dropdown-item" target="_self" href='${semiPath}documentacao.html#sou-admin'>Sou
			
 
				+                  Desenvolvedor</a>
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+          </li>
			
 
				+
			
 
				+          <li class="nav-item">
			
 
				+            <a class="nav-link" target="_self" href="${semiPath}publicacoes.html">Publicações</a>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+`;
			
 
				+};
			
--- a/script/prism/prism.js
+++ b/script/prism/prism.js
--- a/style/bootstrap/bootstrap-grid.css
+++ b/style/bootstrap/bootstrap-grid.css
--- a/style/bootstrap/bootstrap-grid.css.map
+++ b/style/bootstrap/bootstrap-grid.css.map
--- a/style/bootstrap/bootstrap-grid.min.css
+++ b/style/bootstrap/bootstrap-grid.min.css
--- a/style/bootstrap/bootstrap-grid.min.css.map
+++ b/style/bootstrap/bootstrap-grid.min.css.map
--- a/style/bootstrap/bootstrap-grid.rtl.css
+++ b/style/bootstrap/bootstrap-grid.rtl.css
--- a/style/bootstrap/bootstrap-grid.rtl.css.map
+++ b/style/bootstrap/bootstrap-grid.rtl.css.map
--- a/style/bootstrap/bootstrap-grid.rtl.min.css
+++ b/style/bootstrap/bootstrap-grid.rtl.min.css
--- a/style/bootstrap/bootstrap-grid.rtl.min.css.map
+++ b/style/bootstrap/bootstrap-grid.rtl.min.css.map
--- a/style/bootstrap/bootstrap-reboot.css
+++ b/style/bootstrap/bootstrap-reboot.css
@@ -0,0 +1,485 @@
 
				+/*!
			
 
				+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
			
 
				+ * Copyright 2011-2021 The Bootstrap Authors
			
 
				+ * Copyright 2011-2021 Twitter, Inc.
			
 
				+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
			
 
				+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
			
 
				+ */
			
 
				+:root {
			
 
				+  --bs-blue: #0d6efd;
			
 
				+  --bs-indigo: #6610f2;
			
 
				+  --bs-purple: #6f42c1;
			
 
				+  --bs-pink: #d63384;
			
 
				+  --bs-red: #dc3545;
			
 
				+  --bs-orange: #fd7e14;
			
 
				+  --bs-yellow: #ffc107;
			
 
				+  --bs-green: #198754;
			
 
				+  --bs-teal: #20c997;
			
 
				+  --bs-cyan: #0dcaf0;
			
 
				+  --bs-white: #fff;
			
 
				+  --bs-gray: #6c757d;
			
 
				+  --bs-gray-dark: #343a40;
			
 
				+  --bs-gray-100: #f8f9fa;
			
 
				+  --bs-gray-200: #e9ecef;
			
 
				+  --bs-gray-300: #dee2e6;
			
 
				+  --bs-gray-400: #ced4da;
			
 
				+  --bs-gray-500: #adb5bd;
			
 
				+  --bs-gray-600: #6c757d;
			
 
				+  --bs-gray-700: #495057;
			
 
				+  --bs-gray-800: #343a40;
			
 
				+  --bs-gray-900: #212529;
			
 
				+  --bs-primary: #0d6efd;
			
 
				+  --bs-secondary: #6c757d;
			
 
				+  --bs-success: #198754;
			
 
				+  --bs-info: #0dcaf0;
			
 
				+  --bs-warning: #ffc107;
			
 
				+  --bs-danger: #dc3545;
			
 
				+  --bs-light: #f8f9fa;
			
 
				+  --bs-dark: #212529;
			
 
				+  --bs-primary-rgb: 13, 110, 253;
			
 
				+  --bs-secondary-rgb: 108, 117, 125;
			
 
				+  --bs-success-rgb: 25, 135, 84;
			
 
				+  --bs-info-rgb: 13, 202, 240;
			
 
				+  --bs-warning-rgb: 255, 193, 7;
			
 
				+  --bs-danger-rgb: 220, 53, 69;
			
 
				+  --bs-light-rgb: 248, 249, 250;
			
 
				+  --bs-dark-rgb: 33, 37, 41;
			
 
				+  --bs-white-rgb: 255, 255, 255;
			
 
				+  --bs-black-rgb: 0, 0, 0;
			
 
				+  --bs-body-color-rgb: 33, 37, 41;
			
 
				+  --bs-body-bg-rgb: 255, 255, 255;
			
 
				+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			
 
				+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
			
 
				+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
			
 
				+  --bs-body-font-family: var(--bs-font-sans-serif);
			
 
				+  --bs-body-font-size: 1rem;
			
 
				+  --bs-body-font-weight: 400;
			
 
				+  --bs-body-line-height: 1.5;
			
 
				+  --bs-body-color: #212529;
			
 
				+  --bs-body-bg: #fff;
			
 
				+}
			
 
				+
			
 
				+*,
			
 
				+*::before,
			
 
				+*::after {
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+@media (prefers-reduced-motion: no-preference) {
			
 
				+  :root {
			
 
				+    scroll-behavior: smooth;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+  font-family: var(--bs-body-font-family);
			
 
				+  font-size: var(--bs-body-font-size);
			
 
				+  font-weight: var(--bs-body-font-weight);
			
 
				+  line-height: var(--bs-body-line-height);
			
 
				+  color: var(--bs-body-color);
			
 
				+  text-align: var(--bs-body-text-align);
			
 
				+  background-color: var(--bs-body-bg);
			
 
				+  -webkit-text-size-adjust: 100%;
			
 
				+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			
 
				+}
			
 
				+
			
 
				+hr {
			
 
				+  margin: 1rem 0;
			
 
				+  color: inherit;
			
 
				+  background-color: currentColor;
			
 
				+  border: 0;
			
 
				+  opacity: 0.25;
			
 
				+}
			
 
				+
			
 
				+hr:not([size]) {
			
 
				+  height: 1px;
			
 
				+}
			
 
				+
			
 
				+h6, h5, h4, h3, h2, h1 {
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 0.5rem;
			
 
				+  font-weight: 500;
			
 
				+  line-height: 1.2;
			
 
				+}
			
 
				+
			
 
				+h1 {
			
 
				+  font-size: calc(1.375rem + 1.5vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h1 {
			
 
				+    font-size: 2.5rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h2 {
			
 
				+  font-size: calc(1.325rem + 0.9vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h2 {
			
 
				+    font-size: 2rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h3 {
			
 
				+  font-size: calc(1.3rem + 0.6vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h3 {
			
 
				+    font-size: 1.75rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h4 {
			
 
				+  font-size: calc(1.275rem + 0.3vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h4 {
			
 
				+    font-size: 1.5rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h5 {
			
 
				+  font-size: 1.25rem;
			
 
				+}
			
 
				+
			
 
				+h6 {
			
 
				+  font-size: 1rem;
			
 
				+}
			
 
				+
			
 
				+p {
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 1rem;
			
 
				+}
			
 
				+
			
 
				+abbr[title],
			
 
				+abbr[data-bs-original-title] {
			
 
				+  -webkit-text-decoration: underline dotted;
			
 
				+  text-decoration: underline dotted;
			
 
				+  cursor: help;
			
 
				+  -webkit-text-decoration-skip-ink: none;
			
 
				+  text-decoration-skip-ink: none;
			
 
				+}
			
 
				+
			
 
				+address {
			
 
				+  margin-bottom: 1rem;
			
 
				+  font-style: normal;
			
 
				+  line-height: inherit;
			
 
				+}
			
 
				+
			
 
				+ol,
			
 
				+ul {
			
 
				+  padding-left: 2rem;
			
 
				+}
			
 
				+
			
 
				+ol,
			
 
				+ul,
			
 
				+dl {
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 1rem;
			
 
				+}
			
 
				+
			
 
				+ol ol,
			
 
				+ul ul,
			
 
				+ol ul,
			
 
				+ul ol {
			
 
				+  margin-bottom: 0;
			
 
				+}
			
 
				+
			
 
				+dt {
			
 
				+  font-weight: 700;
			
 
				+}
			
 
				+
			
 
				+dd {
			
 
				+  margin-bottom: 0.5rem;
			
 
				+  margin-left: 0;
			
 
				+}
			
 
				+
			
 
				+blockquote {
			
 
				+  margin: 0 0 1rem;
			
 
				+}
			
 
				+
			
 
				+b,
			
 
				+strong {
			
 
				+  font-weight: bolder;
			
 
				+}
			
 
				+
			
 
				+small {
			
 
				+  font-size: 0.875em;
			
 
				+}
			
 
				+
			
 
				+mark {
			
 
				+  padding: 0.2em;
			
 
				+  background-color: #fcf8e3;
			
 
				+}
			
 
				+
			
 
				+sub,
			
 
				+sup {
			
 
				+  position: relative;
			
 
				+  font-size: 0.75em;
			
 
				+  line-height: 0;
			
 
				+  vertical-align: baseline;
			
 
				+}
			
 
				+
			
 
				+sub {
			
 
				+  bottom: -0.25em;
			
 
				+}
			
 
				+
			
 
				+sup {
			
 
				+  top: -0.5em;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  color: #0d6efd;
			
 
				+  text-decoration: underline;
			
 
				+}
			
 
				+a:hover {
			
 
				+  color: #0a58ca;
			
 
				+}
			
 
				+
			
 
				+a:not([href]):not([class]), a:not([href]):not([class]):hover {
			
 
				+  color: inherit;
			
 
				+  text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+pre,
			
 
				+code,
			
 
				+kbd,
			
 
				+samp {
			
 
				+  font-family: var(--bs-font-monospace);
			
 
				+  font-size: 1em;
			
 
				+  direction: ltr /* rtl:ignore */;
			
 
				+  unicode-bidi: bidi-override;
			
 
				+}
			
 
				+
			
 
				+pre {
			
 
				+  display: block;
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 1rem;
			
 
				+  overflow: auto;
			
 
				+  font-size: 0.875em;
			
 
				+}
			
 
				+pre code {
			
 
				+  font-size: inherit;
			
 
				+  color: inherit;
			
 
				+  word-break: normal;
			
 
				+}
			
 
				+
			
 
				+code {
			
 
				+  font-size: 0.875em;
			
 
				+  color: #d63384;
			
 
				+  word-wrap: break-word;
			
 
				+}
			
 
				+a > code {
			
 
				+  color: inherit;
			
 
				+}
			
 
				+
			
 
				+kbd {
			
 
				+  padding: 0.2rem 0.4rem;
			
 
				+  font-size: 0.875em;
			
 
				+  color: #fff;
			
 
				+  background-color: #212529;
			
 
				+  border-radius: 0.2rem;
			
 
				+}
			
 
				+kbd kbd {
			
 
				+  padding: 0;
			
 
				+  font-size: 1em;
			
 
				+  font-weight: 700;
			
 
				+}
			
 
				+
			
 
				+figure {
			
 
				+  margin: 0 0 1rem;
			
 
				+}
			
 
				+
			
 
				+img,
			
 
				+svg {
			
 
				+  vertical-align: middle;
			
 
				+}
			
 
				+
			
 
				+table {
			
 
				+  caption-side: bottom;
			
 
				+  border-collapse: collapse;
			
 
				+}
			
 
				+
			
 
				+caption {
			
 
				+  padding-top: 0.5rem;
			
 
				+  padding-bottom: 0.5rem;
			
 
				+  color: #6c757d;
			
 
				+  text-align: left;
			
 
				+}
			
 
				+
			
 
				+th {
			
 
				+  text-align: inherit;
			
 
				+  text-align: -webkit-match-parent;
			
 
				+}
			
 
				+
			
 
				+thead,
			
 
				+tbody,
			
 
				+tfoot,
			
 
				+tr,
			
 
				+td,
			
 
				+th {
			
 
				+  border-color: inherit;
			
 
				+  border-style: solid;
			
 
				+  border-width: 0;
			
 
				+}
			
 
				+
			
 
				+label {
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+  border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+button:focus:not(:focus-visible) {
			
 
				+  outline: 0;
			
 
				+}
			
 
				+
			
 
				+input,
			
 
				+button,
			
 
				+select,
			
 
				+optgroup,
			
 
				+textarea {
			
 
				+  margin: 0;
			
 
				+  font-family: inherit;
			
 
				+  font-size: inherit;
			
 
				+  line-height: inherit;
			
 
				+}
			
 
				+
			
 
				+button,
			
 
				+select {
			
 
				+  text-transform: none;
			
 
				+}
			
 
				+
			
 
				+[role=button] {
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+select {
			
 
				+  word-wrap: normal;
			
 
				+}
			
 
				+select:disabled {
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+
			
 
				+[list]::-webkit-calendar-picker-indicator {
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+button,
			
 
				+[type=button],
			
 
				+[type=reset],
			
 
				+[type=submit] {
			
 
				+  -webkit-appearance: button;
			
 
				+}
			
 
				+button:not(:disabled),
			
 
				+[type=button]:not(:disabled),
			
 
				+[type=reset]:not(:disabled),
			
 
				+[type=submit]:not(:disabled) {
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+::-moz-focus-inner {
			
 
				+  padding: 0;
			
 
				+  border-style: none;
			
 
				+}
			
 
				+
			
 
				+textarea {
			
 
				+  resize: vertical;
			
 
				+}
			
 
				+
			
 
				+fieldset {
			
 
				+  min-width: 0;
			
 
				+  padding: 0;
			
 
				+  margin: 0;
			
 
				+  border: 0;
			
 
				+}
			
 
				+
			
 
				+legend {
			
 
				+  float: left;
			
 
				+  width: 100%;
			
 
				+  padding: 0;
			
 
				+  margin-bottom: 0.5rem;
			
 
				+  font-size: calc(1.275rem + 0.3vw);
			
 
				+  line-height: inherit;
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  legend {
			
 
				+    font-size: 1.5rem;
			
 
				+  }
			
 
				+}
			
 
				+legend + * {
			
 
				+  clear: left;
			
 
				+}
			
 
				+
			
 
				+::-webkit-datetime-edit-fields-wrapper,
			
 
				+::-webkit-datetime-edit-text,
			
 
				+::-webkit-datetime-edit-minute,
			
 
				+::-webkit-datetime-edit-hour-field,
			
 
				+::-webkit-datetime-edit-day-field,
			
 
				+::-webkit-datetime-edit-month-field,
			
 
				+::-webkit-datetime-edit-year-field {
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+::-webkit-inner-spin-button {
			
 
				+  height: auto;
			
 
				+}
			
 
				+
			
 
				+[type=search] {
			
 
				+  outline-offset: -2px;
			
 
				+  -webkit-appearance: textfield;
			
 
				+}
			
 
				+
			
 
				+/* rtl:raw:
			
 
				+[type="tel"],
			
 
				+[type="url"],
			
 
				+[type="email"],
			
 
				+[type="number"] {
			
 
				+  direction: ltr;
			
 
				+}
			
 
				+*/
			
 
				+::-webkit-search-decoration {
			
 
				+  -webkit-appearance: none;
			
 
				+}
			
 
				+
			
 
				+::-webkit-color-swatch-wrapper {
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+::-webkit-file-upload-button {
			
 
				+  font: inherit;
			
 
				+}
			
 
				+
			
 
				+::file-selector-button {
			
 
				+  font: inherit;
			
 
				+}
			
 
				+
			
 
				+::-webkit-file-upload-button {
			
 
				+  font: inherit;
			
 
				+  -webkit-appearance: button;
			
 
				+}
			
 
				+
			
 
				+output {
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+
			
 
				+iframe {
			
 
				+  border: 0;
			
 
				+}
			
 
				+
			
 
				+summary {
			
 
				+  display: list-item;
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+progress {
			
 
				+  vertical-align: baseline;
			
 
				+}
			
 
				+
			
 
				+[hidden] {
			
 
				+  display: none !important;
			
 
				+}
			
 
				+
			
 
				+/*# sourceMappingURL=bootstrap-reboot.css.map */
			
--- a/style/bootstrap/bootstrap-reboot.css.map
+++ b/style/bootstrap/bootstrap-reboot.css.map
--- a/style/bootstrap/bootstrap-reboot.min.css
+++ b/style/bootstrap/bootstrap-reboot.min.css
--- a/style/bootstrap/bootstrap-reboot.min.css.map
+++ b/style/bootstrap/bootstrap-reboot.min.css.map
--- a/style/bootstrap/bootstrap-reboot.rtl.css
+++ b/style/bootstrap/bootstrap-reboot.rtl.css
@@ -0,0 +1,482 @@
 
				+/*!
			
 
				+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
			
 
				+ * Copyright 2011-2021 The Bootstrap Authors
			
 
				+ * Copyright 2011-2021 Twitter, Inc.
			
 
				+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
			
 
				+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
			
 
				+ */
			
 
				+:root {
			
 
				+  --bs-blue: #0d6efd;
			
 
				+  --bs-indigo: #6610f2;
			
 
				+  --bs-purple: #6f42c1;
			
 
				+  --bs-pink: #d63384;
			
 
				+  --bs-red: #dc3545;
			
 
				+  --bs-orange: #fd7e14;
			
 
				+  --bs-yellow: #ffc107;
			
 
				+  --bs-green: #198754;
			
 
				+  --bs-teal: #20c997;
			
 
				+  --bs-cyan: #0dcaf0;
			
 
				+  --bs-white: #fff;
			
 
				+  --bs-gray: #6c757d;
			
 
				+  --bs-gray-dark: #343a40;
			
 
				+  --bs-gray-100: #f8f9fa;
			
 
				+  --bs-gray-200: #e9ecef;
			
 
				+  --bs-gray-300: #dee2e6;
			
 
				+  --bs-gray-400: #ced4da;
			
 
				+  --bs-gray-500: #adb5bd;
			
 
				+  --bs-gray-600: #6c757d;
			
 
				+  --bs-gray-700: #495057;
			
 
				+  --bs-gray-800: #343a40;
			
 
				+  --bs-gray-900: #212529;
			
 
				+  --bs-primary: #0d6efd;
			
 
				+  --bs-secondary: #6c757d;
			
 
				+  --bs-success: #198754;
			
 
				+  --bs-info: #0dcaf0;
			
 
				+  --bs-warning: #ffc107;
			
 
				+  --bs-danger: #dc3545;
			
 
				+  --bs-light: #f8f9fa;
			
 
				+  --bs-dark: #212529;
			
 
				+  --bs-primary-rgb: 13, 110, 253;
			
 
				+  --bs-secondary-rgb: 108, 117, 125;
			
 
				+  --bs-success-rgb: 25, 135, 84;
			
 
				+  --bs-info-rgb: 13, 202, 240;
			
 
				+  --bs-warning-rgb: 255, 193, 7;
			
 
				+  --bs-danger-rgb: 220, 53, 69;
			
 
				+  --bs-light-rgb: 248, 249, 250;
			
 
				+  --bs-dark-rgb: 33, 37, 41;
			
 
				+  --bs-white-rgb: 255, 255, 255;
			
 
				+  --bs-black-rgb: 0, 0, 0;
			
 
				+  --bs-body-color-rgb: 33, 37, 41;
			
 
				+  --bs-body-bg-rgb: 255, 255, 255;
			
 
				+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			
 
				+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
			
 
				+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
			
 
				+  --bs-body-font-family: var(--bs-font-sans-serif);
			
 
				+  --bs-body-font-size: 1rem;
			
 
				+  --bs-body-font-weight: 400;
			
 
				+  --bs-body-line-height: 1.5;
			
 
				+  --bs-body-color: #212529;
			
 
				+  --bs-body-bg: #fff;
			
 
				+}
			
 
				+
			
 
				+*,
			
 
				+*::before,
			
 
				+*::after {
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+@media (prefers-reduced-motion: no-preference) {
			
 
				+  :root {
			
 
				+    scroll-behavior: smooth;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+  font-family: var(--bs-body-font-family);
			
 
				+  font-size: var(--bs-body-font-size);
			
 
				+  font-weight: var(--bs-body-font-weight);
			
 
				+  line-height: var(--bs-body-line-height);
			
 
				+  color: var(--bs-body-color);
			
 
				+  text-align: var(--bs-body-text-align);
			
 
				+  background-color: var(--bs-body-bg);
			
 
				+  -webkit-text-size-adjust: 100%;
			
 
				+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			
 
				+}
			
 
				+
			
 
				+hr {
			
 
				+  margin: 1rem 0;
			
 
				+  color: inherit;
			
 
				+  background-color: currentColor;
			
 
				+  border: 0;
			
 
				+  opacity: 0.25;
			
 
				+}
			
 
				+
			
 
				+hr:not([size]) {
			
 
				+  height: 1px;
			
 
				+}
			
 
				+
			
 
				+h6, h5, h4, h3, h2, h1 {
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 0.5rem;
			
 
				+  font-weight: 500;
			
 
				+  line-height: 1.2;
			
 
				+}
			
 
				+
			
 
				+h1 {
			
 
				+  font-size: calc(1.375rem + 1.5vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h1 {
			
 
				+    font-size: 2.5rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h2 {
			
 
				+  font-size: calc(1.325rem + 0.9vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h2 {
			
 
				+    font-size: 2rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h3 {
			
 
				+  font-size: calc(1.3rem + 0.6vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h3 {
			
 
				+    font-size: 1.75rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h4 {
			
 
				+  font-size: calc(1.275rem + 0.3vw);
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  h4 {
			
 
				+    font-size: 1.5rem;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h5 {
			
 
				+  font-size: 1.25rem;
			
 
				+}
			
 
				+
			
 
				+h6 {
			
 
				+  font-size: 1rem;
			
 
				+}
			
 
				+
			
 
				+p {
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 1rem;
			
 
				+}
			
 
				+
			
 
				+abbr[title],
			
 
				+abbr[data-bs-original-title] {
			
 
				+  -webkit-text-decoration: underline dotted;
			
 
				+  text-decoration: underline dotted;
			
 
				+  cursor: help;
			
 
				+  -webkit-text-decoration-skip-ink: none;
			
 
				+  text-decoration-skip-ink: none;
			
 
				+}
			
 
				+
			
 
				+address {
			
 
				+  margin-bottom: 1rem;
			
 
				+  font-style: normal;
			
 
				+  line-height: inherit;
			
 
				+}
			
 
				+
			
 
				+ol,
			
 
				+ul {
			
 
				+  padding-right: 2rem;
			
 
				+}
			
 
				+
			
 
				+ol,
			
 
				+ul,
			
 
				+dl {
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 1rem;
			
 
				+}
			
 
				+
			
 
				+ol ol,
			
 
				+ul ul,
			
 
				+ol ul,
			
 
				+ul ol {
			
 
				+  margin-bottom: 0;
			
 
				+}
			
 
				+
			
 
				+dt {
			
 
				+  font-weight: 700;
			
 
				+}
			
 
				+
			
 
				+dd {
			
 
				+  margin-bottom: 0.5rem;
			
 
				+  margin-right: 0;
			
 
				+}
			
 
				+
			
 
				+blockquote {
			
 
				+  margin: 0 0 1rem;
			
 
				+}
			
 
				+
			
 
				+b,
			
 
				+strong {
			
 
				+  font-weight: bolder;
			
 
				+}
			
 
				+
			
 
				+small {
			
 
				+  font-size: 0.875em;
			
 
				+}
			
 
				+
			
 
				+mark {
			
 
				+  padding: 0.2em;
			
 
				+  background-color: #fcf8e3;
			
 
				+}
			
 
				+
			
 
				+sub,
			
 
				+sup {
			
 
				+  position: relative;
			
 
				+  font-size: 0.75em;
			
 
				+  line-height: 0;
			
 
				+  vertical-align: baseline;
			
 
				+}
			
 
				+
			
 
				+sub {
			
 
				+  bottom: -0.25em;
			
 
				+}
			
 
				+
			
 
				+sup {
			
 
				+  top: -0.5em;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  color: #0d6efd;
			
 
				+  text-decoration: underline;
			
 
				+}
			
 
				+a:hover {
			
 
				+  color: #0a58ca;
			
 
				+}
			
 
				+
			
 
				+a:not([href]):not([class]), a:not([href]):not([class]):hover {
			
 
				+  color: inherit;
			
 
				+  text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+pre,
			
 
				+code,
			
 
				+kbd,
			
 
				+samp {
			
 
				+  font-family: var(--bs-font-monospace);
			
 
				+  font-size: 1em;
			
 
				+  direction: ltr ;
			
 
				+  unicode-bidi: bidi-override;
			
 
				+}
			
 
				+
			
 
				+pre {
			
 
				+  display: block;
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 1rem;
			
 
				+  overflow: auto;
			
 
				+  font-size: 0.875em;
			
 
				+}
			
 
				+pre code {
			
 
				+  font-size: inherit;
			
 
				+  color: inherit;
			
 
				+  word-break: normal;
			
 
				+}
			
 
				+
			
 
				+code {
			
 
				+  font-size: 0.875em;
			
 
				+  color: #d63384;
			
 
				+  word-wrap: break-word;
			
 
				+}
			
 
				+a > code {
			
 
				+  color: inherit;
			
 
				+}
			
 
				+
			
 
				+kbd {
			
 
				+  padding: 0.2rem 0.4rem;
			
 
				+  font-size: 0.875em;
			
 
				+  color: #fff;
			
 
				+  background-color: #212529;
			
 
				+  border-radius: 0.2rem;
			
 
				+}
			
 
				+kbd kbd {
			
 
				+  padding: 0;
			
 
				+  font-size: 1em;
			
 
				+  font-weight: 700;
			
 
				+}
			
 
				+
			
 
				+figure {
			
 
				+  margin: 0 0 1rem;
			
 
				+}
			
 
				+
			
 
				+img,
			
 
				+svg {
			
 
				+  vertical-align: middle;
			
 
				+}
			
 
				+
			
 
				+table {
			
 
				+  caption-side: bottom;
			
 
				+  border-collapse: collapse;
			
 
				+}
			
 
				+
			
 
				+caption {
			
 
				+  padding-top: 0.5rem;
			
 
				+  padding-bottom: 0.5rem;
			
 
				+  color: #6c757d;
			
 
				+  text-align: right;
			
 
				+}
			
 
				+
			
 
				+th {
			
 
				+  text-align: inherit;
			
 
				+  text-align: -webkit-match-parent;
			
 
				+}
			
 
				+
			
 
				+thead,
			
 
				+tbody,
			
 
				+tfoot,
			
 
				+tr,
			
 
				+td,
			
 
				+th {
			
 
				+  border-color: inherit;
			
 
				+  border-style: solid;
			
 
				+  border-width: 0;
			
 
				+}
			
 
				+
			
 
				+label {
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+  border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+button:focus:not(:focus-visible) {
			
 
				+  outline: 0;
			
 
				+}
			
 
				+
			
 
				+input,
			
 
				+button,
			
 
				+select,
			
 
				+optgroup,
			
 
				+textarea {
			
 
				+  margin: 0;
			
 
				+  font-family: inherit;
			
 
				+  font-size: inherit;
			
 
				+  line-height: inherit;
			
 
				+}
			
 
				+
			
 
				+button,
			
 
				+select {
			
 
				+  text-transform: none;
			
 
				+}
			
 
				+
			
 
				+[role=button] {
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+select {
			
 
				+  word-wrap: normal;
			
 
				+}
			
 
				+select:disabled {
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+
			
 
				+[list]::-webkit-calendar-picker-indicator {
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+button,
			
 
				+[type=button],
			
 
				+[type=reset],
			
 
				+[type=submit] {
			
 
				+  -webkit-appearance: button;
			
 
				+}
			
 
				+button:not(:disabled),
			
 
				+[type=button]:not(:disabled),
			
 
				+[type=reset]:not(:disabled),
			
 
				+[type=submit]:not(:disabled) {
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+::-moz-focus-inner {
			
 
				+  padding: 0;
			
 
				+  border-style: none;
			
 
				+}
			
 
				+
			
 
				+textarea {
			
 
				+  resize: vertical;
			
 
				+}
			
 
				+
			
 
				+fieldset {
			
 
				+  min-width: 0;
			
 
				+  padding: 0;
			
 
				+  margin: 0;
			
 
				+  border: 0;
			
 
				+}
			
 
				+
			
 
				+legend {
			
 
				+  float: right;
			
 
				+  width: 100%;
			
 
				+  padding: 0;
			
 
				+  margin-bottom: 0.5rem;
			
 
				+  font-size: calc(1.275rem + 0.3vw);
			
 
				+  line-height: inherit;
			
 
				+}
			
 
				+@media (min-width: 1200px) {
			
 
				+  legend {
			
 
				+    font-size: 1.5rem;
			
 
				+  }
			
 
				+}
			
 
				+legend + * {
			
 
				+  clear: right;
			
 
				+}
			
 
				+
			
 
				+::-webkit-datetime-edit-fields-wrapper,
			
 
				+::-webkit-datetime-edit-text,
			
 
				+::-webkit-datetime-edit-minute,
			
 
				+::-webkit-datetime-edit-hour-field,
			
 
				+::-webkit-datetime-edit-day-field,
			
 
				+::-webkit-datetime-edit-month-field,
			
 
				+::-webkit-datetime-edit-year-field {
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+::-webkit-inner-spin-button {
			
 
				+  height: auto;
			
 
				+}
			
 
				+
			
 
				+[type=search] {
			
 
				+  outline-offset: -2px;
			
 
				+  -webkit-appearance: textfield;
			
 
				+}
			
 
				+
			
 
				+[type="tel"],
			
 
				+[type="url"],
			
 
				+[type="email"],
			
 
				+[type="number"] {
			
 
				+  direction: ltr;
			
 
				+}
			
 
				+::-webkit-search-decoration {
			
 
				+  -webkit-appearance: none;
			
 
				+}
			
 
				+
			
 
				+::-webkit-color-swatch-wrapper {
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+::-webkit-file-upload-button {
			
 
				+  font: inherit;
			
 
				+}
			
 
				+
			
 
				+::file-selector-button {
			
 
				+  font: inherit;
			
 
				+}
			
 
				+
			
 
				+::-webkit-file-upload-button {
			
 
				+  font: inherit;
			
 
				+  -webkit-appearance: button;
			
 
				+}
			
 
				+
			
 
				+output {
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+
			
 
				+iframe {
			
 
				+  border: 0;
			
 
				+}
			
 
				+
			
 
				+summary {
			
 
				+  display: list-item;
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+progress {
			
 
				+  vertical-align: baseline;
			
 
				+}
			
 
				+
			
 
				+[hidden] {
			
 
				+  display: none !important;
			
 
				+}
			
 
				+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
			
--- a/style/bootstrap/bootstrap-reboot.rtl.css.map
+++ b/style/bootstrap/bootstrap-reboot.rtl.css.map
--- a/style/bootstrap/bootstrap-reboot.rtl.min.css
+++ b/style/bootstrap/bootstrap-reboot.rtl.min.css
--- a/style/bootstrap/bootstrap-reboot.rtl.min.css.map
+++ b/style/bootstrap/bootstrap-reboot.rtl.min.css.map
--- a/style/bootstrap/bootstrap-utilities.css
+++ b/style/bootstrap/bootstrap-utilities.css
--- a/style/bootstrap/bootstrap-utilities.css.map
+++ b/style/bootstrap/bootstrap-utilities.css.map
--- a/style/bootstrap/bootstrap-utilities.min.css
+++ b/style/bootstrap/bootstrap-utilities.min.css
--- a/style/bootstrap/bootstrap-utilities.min.css.map
+++ b/style/bootstrap/bootstrap-utilities.min.css.map
--- a/style/bootstrap/bootstrap-utilities.rtl.css
+++ b/style/bootstrap/bootstrap-utilities.rtl.css
--- a/style/bootstrap/bootstrap-utilities.rtl.css.map
+++ b/style/bootstrap/bootstrap-utilities.rtl.css.map
--- a/style/bootstrap/bootstrap-utilities.rtl.min.css
+++ b/style/bootstrap/bootstrap-utilities.rtl.min.css
--- a/style/bootstrap/bootstrap-utilities.rtl.min.css.map
+++ b/style/bootstrap/bootstrap-utilities.rtl.min.css.map
--- a/style/bootstrap/bootstrap.css
+++ b/style/bootstrap/bootstrap.css
--- a/style/bootstrap/bootstrap.css.map
+++ b/style/bootstrap/bootstrap.css.map
--- a/style/bootstrap/bootstrap.min.css
+++ b/style/bootstrap/bootstrap.min.css
--- a/style/bootstrap/bootstrap.min.css.map
+++ b/style/bootstrap/bootstrap.min.css.map
--- a/style/bootstrap/bootstrap.rtl.css
+++ b/style/bootstrap/bootstrap.rtl.css
--- a/style/bootstrap/bootstrap.rtl.css.map
+++ b/style/bootstrap/bootstrap.rtl.css.map