integracao parcial com iTarefa

arredondamento das bordas

finalizar integracao

css/iHanoiStyle.css

@@ -0,0 +1,48 @@
+
+			#planoDeFundo {
+				background :transparent;
+				width: 100%; 
+				height: 75%;
+				position: absolute;
+			}
+			#restart_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 0.875;
+				word-wrap: break-word;
+				max-width: 7%;
+				left: 21%;
+				top:5%;
+			}
+			#A_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 1;
+				height:3%;
+				width: 20%;
+				left: 6.6%;
+				top:76%;
+			}
+			#B_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 1;
+				height: 3%;
+				word-wrap: break-word;
+				width: 20%;
+				left: 40.5%;
+				top:76%;
+			}
+			#C_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 1;
+				height: 3%;
+				width: 20%;
+				left: 74%;
+				top:76%;
+			}

geary-html5gamedev-article-one-code/COPYING

@@ -1,5 +0,0 @@
-This software contains open-source graphics from Replica Island, licensed under the Apache 2 license. See COPYING for more information. David Geary made some minor modifications to those graphics.
-
-This software also contains open-source graphics from MJKRZAK of People's Sprites. The website from which MJKRZAK's graphics were obtained -- peoplessprites.org -- is no longer available. Those graphics were modified by David Geary.
-
-All of the code in this software is distributed under the Apache 2 Software License and is copyrighted to David Geary, 2013.

geary-html5gamedev-article-one-code/NOTICE

@@ -1,5 +0,0 @@
-This software contains open-source graphics from Replica Island, licensed under the Apache 2 license. See COPYING for more information. David Geary made some minor modifications to those graphics.
-
-This software also contains open-source graphics from MJKRZAK of People's Sprites. The website from which MJKRZAK's graphics were obtained -- peoplessprites.org -- is no longer available. Those graphics were modified by David Geary.
-
-All of the code in this software is distributed under the Apache 2 Software License and is copyrighted to David Geary, 2013.

geary-html5gamedev-article-one-code/game.css

@@ -1,79 +0,0 @@
-/*
- * Copyright (C) 2012 David Geary. This code is from the book
- * Core HTML5 Canvas, published by Prentice-Hall in 2012.
- *
- * License:
- *
- * Permission is hereby granted, free of charge, to any person 
- * obtaining a copy of this software and associated documentation files
- * (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software,
- * and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * The Software may not be used to create training material of any sort,
- * including courses, books, instructional videos, presentations, etc.
- * without the express written consent of David Geary.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
- * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- * OTHER DEALINGS IN THE SOFTWARE.
-*/
-body {
-   background: teal;
-   background: url('images/background.jpg');
-   margin: 0;
-   padding: 0;
-}
-
-#arena {
-   text-align: center;
-   padding: 5px;
-   width: 805px;
-   height: 445px;
-}
-
-#wrapper {
-   margin: 0 auto;
-   margin-top: 10px;
-   padding: 5px;
-   width: 817px;
-   height: 520px;
-}
-         
-#score {
-   font: 40px fantasy;
-   text-align: center;
-   color: #ff0;
-   text-shadow: 2px 2px 4px rgba(0,0,80,1.0);
-
-   /*border: thin solid white;
-   -webkit-box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;
-   -moz-box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;
-   -o-box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;
-   box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;*/
-}
-
-#game-canvas {
-   position: relative;
-   border: 2px inset rgba(0,0,80,0.62);
-
-   -webkit-transition: opacity 0.5s;
-   -moz-transition: opacity 0.5s;
-   -o-transition: opacity 0.5s;
-   transition: opacity 0.5s;
-
-   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-}

geary-html5gamedev-article-one-code/game.html

@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<!--
-- Copyright (C) 2012 David Geary. 
--
-- License:
--
-- Permission is hereby granted, free of charge, to any person 
-- obtaining a copy of this software and associated documentation files
-- (the "Software"), to deal in the Software without restriction,
-- including without limitation the rights to use, copy, modify, merge,
-- publish, distribute, sublicense, and/or sell copies of the Software,
-- and to permit persons to whom the Software is furnished to do so,
-- subject to the following conditions:
--
-- The above copyright notice and this permission notice shall be
-- included in all copies or substantial portions of the Software.
--
-- The Software may not be used to create training material of any sort,
-- including courses, books, instructional videos, presentations, etc.
-- without the express written consent of David Geary.
--
-- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
-- OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-- NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-- HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-- WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-- FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-- OTHER DEALINGS IN THE SOFTWARE.
--->
-
-<html>
-   <!-- Head........................................................-->
-
-	<head>
-	   <title>Snail Bait</title>
-      <link rel='stylesheet' href='game.css'/>
-   </head>
-
-   <!-- Body........................................................-->
-
-   <body>
-      <!-- Wrapper..................................................-->
-
-      <div id='wrapper'>
-         <!-- Header..................................................-->
-
-         <div id='header'>
-            <div id='score'>0</div>
-         </div>
-            
-         <!-- Arena..................................................-->
-
-         <div id='arena'>
-            <!-- The game canvas.....................................-->
-
-            <canvas id='game-canvas' width='800' height='400'>
-               Your browser does not support HTML5 Canvas.
-            </canvas>
-         </div>
-      </div>
-
-      <!-- JavaScript................................................-->
-
-      <script src='game.js'></script>
-  </body>
-</html>

geary-html5gamedev-article-one-code/game.js

@@ -1,168 +0,0 @@
-/*
- * Copyright (C) 2012 David Geary. This code is from the book
- * Core HTML5 Canvas, published by Prentice-Hall in 2012.
- *
- * License:
- *
- * Permission is hereby granted, free of charge, to any person 
- * obtaining a copy of this software and associated documentation files
- * (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software,
- * and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * The Software may not be used to create training material of any sort,
- * including courses, books, instructional videos, presentations, etc.
- * without the express written consent of David Geary.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
- * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- * OTHER DEALINGS IN THE SOFTWARE.
-*/
-// ---------------------------------------------------------------------
-// --------------------------- DECLARATIONS ----------------------------
-// ---------------------------------------------------------------------
-
-var canvas = document.getElementById('game-canvas'),
-   context = canvas.getContext('2d'),
-
-// Constants............................................................
-
-   PLATFORM_HEIGHT = 8,  
-   PLATFORM_STROKE_WIDTH = 2,
-   PLATFORM_STROKE_STYLE = 'rgb(0,0,0)',
-
-   STARTING_RUNNER_LEFT = 50,
-   STARTING_RUNNER_TRACK = 1,
-
-// Track baselines...................................................
-
-   TRACK_1_BASELINE = 323,
-   TRACK_2_BASELINE = 223,
-   TRACK_3_BASELINE = 123,
-
-// Images............................................................
-   
-   background  = new Image(),
-   runnerImage = new Image(),
-
-   // Platforms.........................................................
-
-   platformData = [  // One screen for now
-      // Screen 1.......................................................
-      {
-         left:      10,
-         width:     230,
-         height:    PLATFORM_HEIGHT,
-         fillStyle: 'rgb(250,250,0)',
-         opacity:   0.5,
-         track:     1,
-         pulsate:   false,
-      },
-
-      {  left:      250,
-         width:     100,
-         height:    PLATFORM_HEIGHT,
-         fillStyle: 'rgb(150,190,255)',
-         opacity:   1.0,
-         track:     2,
-         pulsate:   false,
-      },
-
-      {  left:      400,
-         width:     125,
-         height:    PLATFORM_HEIGHT,
-         fillStyle: 'rgb(250,0,0)',
-         opacity:   1.0,
-         track:     3,
-         pulsate:   false
-      },
-
-      {  left:      633,
-         width:     100,
-         height:    PLATFORM_HEIGHT,
-         fillStyle: 'rgb(250,250,0)',
-         opacity:   1.0, 
-         track:     1,
-         pulsate:   false,
-      },
-   ];
-
-// ------------------------- INITIALIZATION ----------------------------
-
-function initializeImages() {
-   background.src = 'images/background_level_one_dark_red.png';
-   runnerImage.src = 'images/runner.png';
-
-   background.onload = function (e) {
-      startGame();
-   };
-}
-
-
-function drawBackground() {
-   context.drawImage(background, 0, 0);
-}
-
-function calculatePlatformTop(track) {
-   var top;
-
-   if      (track === 1) { top = TRACK_1_BASELINE; }
-   else if (track === 2) { top = TRACK_2_BASELINE; }
-   else if (track === 3) { top = TRACK_3_BASELINE; }
-
-   return top;
-}
-
-function drawPlatforms() {
-   var pd, top;
-
-   context.save(); // Save context attributes
-   
-   for (var i=0; i < platformData.length; ++i) {
-      pd = platformData[i];
-      top = calculatePlatformTop(pd.track);
-
-      context.lineWidth = PLATFORM_STROKE_WIDTH;
-      context.strokeStyle = PLATFORM_STROKE_STYLE;
-      context.fillStyle = pd.fillStyle;
-      context.globalAlpha = pd.opacity;
-
-      // If you switch the order of the following two
-      // calls, you get a different effect.
-
-      context.strokeRect(pd.left, top, pd.width, pd.height);
-      context.fillRect  (pd.left, top, pd.width, pd.height);
-   }
-
-   context.restore(); // Restore context attributes
-}
-
-function drawRunner() {
-   context.drawImage(runnerImage,
-      STARTING_RUNNER_LEFT,
-      calculatePlatformTop(STARTING_RUNNER_TRACK) - runnerImage.height);
-}
-
-function draw(now) {
-   drawBackground();
-   drawPlatforms();
-   drawRunner();
-}
-
-function startGame() {
-   draw();
-}
-
-// Launch game.........................................................
-
-initializeImages();

iHanoi_IMA.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<html>
+	<head>
+		<title> Torre de Hanoi </title>
+		<Style>
+			#planoDeFundo {
+				background :transparent;
+				width: 100%; 
+				height: 75%;
+				position: absolute;
+			}
+			#restart_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 0.875;
+				word-wrap: break-word;
+				max-width: 7%;
+				left: 21%;
+				top:5%;
+			}
+			#A_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 1;
+				height:3%;
+				width: 20%;
+				left: 6.6%;
+				top:76%;
+			}
+			#B_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 1;
+				height: 3%;
+				word-wrap: break-word;
+				width: 20%;
+				left: 40.5%;
+				top:76%;
+			}
+			#C_button{
+				position:absolute;
+				border:1px solid gray;
+				border-radius: 7%;
+				font-size: 1;
+				height: 3%;
+				width: 20%;
+				left: 74%;
+				top:76%;
+			}
+		</Style>
+		<script src="js/jquery-3.3.1.min.js"></script>
+		<script src="js/integration-functions.js"></script>
+	</head>
+	<body>
+	<div class="exercicio"  style="display:none">
+		<button id="A_button" onclick="buttonClick(0)">A</button>
+		<button id="B_button" onclick="buttonClick(1)">B</button>
+		<button id="C_button" onclick="buttonClick(2)">C</button>
+		<canvas id="planoDeFundo"  width="1024" height="615">
+		Seu navegador não suporta o recurso Canvas. Atualize-o para utilizar esse recurso
+		</canvas>
+		<script src="js/iHanoiFunctions.js"></script>
+	</div>
+	<div class="elaboracao" style="display:none">
+		Quantidade de discos no desafio: 
+		<select name="Discos">
+			<option>2</option>
+			<option>3</option>
+			<option>4</option>
+			<option>5</option>
+			<option>6</option>
+			<option>7</option>
+		</select>
+	</div>
+    	
+  </body>
+</html>

imgs/pf.svg

@@ -1,122 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="210mm"
-   height="297mm"
-   viewBox="0 0 210 297"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.3 (d244b95, 2018-08-02)"
-   sodipodi:docname="pfsvg.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35"
-     inkscape:cx="479.94524"
-     inkscape:cy="480.12057"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer2"
-     showgrid="false"
-     inkscape:window-width="1215"
-     inkscape:window-height="1000"
-     inkscape:window-x="65"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:snap-grids="true"
-     showguides="true"
-     inkscape:guide-bbox="true" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="Fundo"
-     style="display:inline">
-    <rect
-       style="fill:#00ffff;stroke-width:0.26458332"
-       id="rect3841"
-       width="451.30356"
-       height="242.66072"
-       x="-18.898809"
-       y="68.702377" />
-  </g>
-  <g
-     inkscape:label="Torres"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="display:inline">
-    <rect
-       id="rect3713"
-       width="118.68452"
-       height="7.5595236"
-       x="-413.0871"
-       y="289.64197"
-       style="fill:#d38d5f;stroke-width:0.34752944"
-       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
-    <rect
-       id="rect3715"
-       width="6.8035712"
-       height="191.90002"
-       x="-357.14764"
-       y="98.497856"
-       style="fill:#d38d5f;stroke-width:0.31775796"
-       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
-    <rect
-       id="rect3713-0"
-       width="118.68452"
-       height="7.5595236"
-       x="-268.92889"
-       y="288.96158"
-       style="fill:#d38d5f;stroke-width:0.34752944"
-       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)"
-       ry="0" />
-    <rect
-       id="rect3715-9"
-       width="6.8035712"
-       height="191.90002"
-       x="-212.9875"
-       y="97.70565"
-       style="fill:#d38d5f;stroke-width:0.31775796"
-       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
-    <rect
-       id="rect3713-3"
-       width="118.68452"
-       height="7.5595236"
-       x="-118.4914"
-       y="289.26398"
-       style="fill:#d38d5f;stroke-width:0.34752944"
-       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
-    <rect
-       id="rect3715-6"
-       width="6.8035712"
-       height="191.90002"
-       x="-62.553886"
-       y="98.057732"
-       style="fill:#d38d5f;stroke-width:0.31775796"
-       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
-  </g>
-</svg>

js/Global.js

@@ -1,26 +0,0 @@
-/**
- * Cria o objeto "Desenhavel" que será a classe base para
- * todos os objetos desenháveis do jogo. Define também as variáveis padrão
- * que todos os objetos filhos herdarão, assim como as funções padrão.
- */
-function Desenhavel(){
-	this.larguraCanvas = 0;
-	this.alturaCanvas = 0;
-
- 	 // Define uma função abastrata para ser sobrescrita nos objetos filho
- 	this.Desenhar= function(){};
-
- 	this.iniciar = function (x,y){
- 		//variaveis padrao do eixo cartesiano
- 		this.x = x;
- 		this.y = y;
- 	}
-}
-
-var repositorio= new function(){
-	this.planoFundo = new Image();
-
-	this.planoFundo.src = "imgs/pf.png";//caminho da source
-}
-
-function

iHanoi.html

@@ -1,120 +1,31 @@
-<!DOCTYPE html>
-<meta charset="UTF-8">
-<html>
-	<head>
-		<title> Torre de Hanoi </title>
-		<Style>
-			#planoDeFundo {
-				background :transparent;
-				left: 10%;
-				top : 10%;
-				width: 80%; 
-				height: 60%;
-				position: absolute;
-			}
-			#fim_button{
-				position: absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				max-width: 5%;
-				left:10%;
-				top: 5%;
-			}
-			#atualiza_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				max-width: 7%;
-				left: 15%;
-				top:5%;
-			}
-
-			#A_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				width: 20%;
-				max-width: 20%;
-				left: 13%;
-				top:71%;
-			}
-			#B_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				width: 20%;
-				max-width: 20%;
-				left: 40%;
-				top:71%;
-			}
-			#C_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				width: 20%;
-				max-width: 20%;
-				left: 67%;
-				top:71%;
-			}
-
-
-
-		</Style>
-	</head>
-	<body>
-	<button id="fim_button">Fim</button>
-	<button id="atualiza_button">Atualiza</button>
-	<button id="A_button" onclick="buttonClick(0)">A</button>
-	<button id="B_button" onclick="buttonClick(1)">B</button>
-	<button id="C_button" onclick="buttonClick(2)">C</button>
-	<select name ="Disks" onchange="reinicio()" id="selectDisks">
-		<option value = "1">1 Disk</option>
-		<option value = "2">2 Disk</option>
-		<option value = "3">3 Disk</option>
-		<option value = "4">4 Disk</option>
-		<option value = "5">5 Disk</option>
-		<option value = "6">6 Disk</option>
-		<option value = "7">7 Disk</option>
-
-	</select>
-		<canvas id="planoDeFundo"  width="1024" height="768">
-		Seu navegador não suporta o recurso Canvas. Atualize-o para utilizar esse recurso
-		</canvas>
-		<script>
-			var canvas = document.getElementById('planoDeFundo');
+var canvas = document.getElementById('planoDeFundo');
 			var context = canvas.getContext('2d');
 			var towerA = [], towerB = [], towerC = [];
 			var toMove = null;
 			var idF=" ", idT= " ";
-			var nMovements = 0, nDisks = 0;
-					 	//NavyBlue  Lime     Fuchsia   lightPink   Orange   LightSteelBlue  Pink
-			var colors = ["#000080","#00FF00", "#FF00FF", "#FFC0CB", "#FFA500", "#B0C4DE","#F441AC"];
+			var nMovements = 0, nDisks;
+			var moves="";
+			var acertos;
+			var optimalSolution;
+					 	//NavyBlue  Lime     Fuchsia   yellow   Orange   LightSteelBlue  red
+			var colors = ["#000080","#00FF00", "#FF00FF", "yellow", "#FFA500", "#B0C4DE","red"];
 			
 
-			function inicio (){
-				nDisks = document.getElementById('selectDisks').value;
+			function inicio (QntityDisks){
+				nDisks = QntityDisks;
+				optimalSolution= Math.pow(2,nDisks)-1;
 				var x = 0;
 				var y = 558;
 				var w = 330;
+				moves="";
 				for (var i = 0; i < nDisks; i++) {
 					var disk = new Disk(x,y,w,40,colors[i]);
 					towerA.push(disk);
-					x+=25;  //moves to the right
+					x+=20;  //moves to the right
 					y-=42; //moves up, +1 to separate disks
-					w-=50; //reduces disk width
+					w-=40; //reduces disk width
 				}
 				drawScene();
-				console.log(y);
 		    
 			}
 
@@ -126,9 +37,10 @@
 					this.h=h;
 					this.fill=fill;
 				}
-				draw(){
+				draw(){//(ctx, x, y, width, height, radius, fill, stroke)
 					context.fillStyle = this.fill;
-					context.fillRect(this.x, this.y, this.w, this.h);
+					context.strokeStyle = "black";
+					roundRect(context, this.x, this.y, this.w, this.h, 20, 20, true);
 				}
 				clear(){
 					context.clearRect(this.x, this.y, this.w, this.h);
@@ -150,7 +62,7 @@
 				toMove=null;
 				inicio();
 			}
-			function drawTowers(){
+			function drawTowers (){
 				context.beginPath();
 				<!-- torre 1 -->
 				context.fillStyle = 'black';
@@ -192,14 +104,13 @@
 			}
 
 			function buttonClick (id){
-				console.log(id);
 				if(toMove == null && getTower(id).length>0){
 					toMove = id;
 					idF= String.fromCharCode(65+id);
 					idT= " ";
 					drawScene();
 
-				} else if(toMove != id){
+				} else if(toMove != null && toMove != id){
 					idT = String.fromCharCode(65+id);
 					moveDisk(toMove, id);
 					toMove=null;
@@ -220,14 +131,16 @@
 			function drawFromTo (){
 				context.font = "50px Arial";
 				context.fillStyle = "black";
-				context.fillText("Move from "+idF+" to ", 50, 50);
+				context.fillText("Move from "+idF+" to "+idT, 50, 50);
 				context.fillText("Movements: "+nMovements, 50, 100);
 			}
 
 
 			function moveDisk (origin, destiny){
 				var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
-				
+				moves+="\n"+origin+" "+destiny;
+				console.clear();
+				console.log(moves);
 				
 				topDiskOrigin = originTower[originTower.length-1];
 				if(destinyTower.length>0){
@@ -253,15 +166,40 @@
 					nMovements++;
 					drawScene();
 				}
+				acertos=0;
 				if(towerC.length == nDisks && nDisks!=0){
-					alert("You Won!!!\nCongratulations!!");
+					acertos=1;
+					if(nMovements==optimalSolution){
+						alert("You Won in the least amount of movements!!!\nCongratulations!!!");
+					}else{
+						alert("You Won!!!\nCongratulations!!");
+					}
 				}
 			}
 
-
-    	</script>
-
-    	<script> inicio(); </script>
-    	
-  </body>
-</html>
+			function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
+			  if (typeof stroke == "undefined" ) {
+			    stroke = true;
+			  }
+			  if (typeof radius === "undefined") {
+			    radius = 5;
+			  }
+			  ctx.beginPath();
+			  ctx.moveTo(x + radius, y);
+			  ctx.lineTo(x + width - radius, y);
+			  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+			  ctx.lineTo(x + width, y + height - radius);
+			  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+			  ctx.lineTo(x + radius, y + height);
+			  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+			  ctx.lineTo(x, y + radius);
+			  ctx.quadraticCurveTo(x, y, x + radius, y);
+			  ctx.closePath();
+			  if (stroke) {
+			    ctx.stroke();
+			  }
+			  if (fill) {
+			    ctx.fill();
+			  }        
+			}
+			inicio();

js/integration-functions.js

@@ -0,0 +1,89 @@
+// Função para ler parâmetros informados pelo iTarefa via URL
+// Apesar de não ser obrigatório, será muito útil para capturar os parâmetros
+function getParameterByName(name) {
+    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
+    return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;
+}
+
+// Criando um array com os parâmetros informados pelo iTarefa
+// Observe que para cada parâmetro, é realizada a chamada do método getParameterByName, implementado acima
+var iLMparameters = {
+    iLM_PARAM_ServerToGetAnswerURL: getParameterByName("iLM_PARAM_ServerToGetAnswerURL"),
+    iLM_PARAM_SendAnswer: getParameterByName("iLM_PARAM_SendAnswer"),
+    iLM_PARAM_AssignmentURL: getParameterByName("iLM_PARAM_AssignmentURL"),
+    iLM_PARAM_Assignment: getParameterByName("iLM_PARAM_Assignment"),
+    lang: getParameterByName("lang")
+};
+
+// Função chamada pelo iTarefa quando o professor finaliza a criação da atividade
+// ou quando o aluno finaliza a resolução do exercício
+// O retorno é um JSON com os dados do exercício ou da resolução
+// Esse retorno será armazenado no banco de dados do Moodle, pelo iTarefa
+function getAnswer() {
+    // Se o parâmetro "iLM_PARAM_SendAnswer" for false,
+    // então trata-se de resolução de atividade
+    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
+        // Montar o retorno da resposta do aluno
+        var respostas = Array();
+        for (j = 0; j < desafios.length; j++) {
+            respostas.push(parseInt($("#resposta_" + j).val()));
+        }
+
+        return '[{"respostas": ' + JSON.stringify(respostas) + '}, {"operacao": "' + operacao + '"}, {"parcelas": ' + JSON.stringify(parcelas) + '}, {"desenhos": ' + JSON.stringify(desenhos) + ' }, '
+                    + '{"desafios": ' + JSON.stringify(desafios) + '}]';
+    } else {//se for o professor acessando, mostra a pagina de elaboração
+        return JSON.stringify($('form[name="elaborar"]').serializeArray());
+    }
+}
+
+// Função chamada pelo iTarefa para receber a nota do aluno na atividade
+// O retorno é um valor entre 0.0 e 1.0
+function getEvaluation() {
+    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
+        // Calcula a nota do aluno:
+
+
+        // Agora, verificamos se o aluno acertou
+       // var acertos = 0;
+        
+        // Cálculo da nota: resposta correta =1, errada =0
+        var nota = acertou;
+
+        // A chamada do método abaixo é obrigatória!
+        // Observe que a chamada parte do iLM para o iTarefa
+        parent.getEvaluationCallback(nota);
+    }
+}
+
+
+// Função para que o iMA leia os dados da atividade fornecidos pelo iTarefa
+function getiLMContent() {
+
+    // O parâmetro "iLM_PARAM_Assignment" fornece o URL do endereço que deve ser
+    // requisitado via AJAX para a captura dos dados da atividade
+    $.get(iLMparameters.iLM_PARAM_Assignment, function (d) {
+
+        // Uma vez que os dados foram recebidos, o método "organizaAtividade" é chamado.
+        // Observe que esse método faz parte do arquivo js/iarithmetic-functions.js
+        organizaAtividade(JSON.parse(d));
+
+    });
+}
+
+// Adicionamos a diretiva .ready(), para que quando a página HTML estiver carregada,
+// seja verificado qual a visualização deve ser apresentada: se a área de construção
+// de atividade ou de resolução. E no caso de ser resolução, os dados da atividade
+// precisam ser consultados, pelo método implementado acima, o getiLMContent()
+$(document).ready(function() {
+iLMparameters.iLM_PARAM_SendAnswer='false';
+    // Se iLM_PARAM_SendAnswer for false, então trata-se de resolução de atividade,
+    // portanto, a "DIV" de resolução é liberada
+    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
+        $('.exercicio').css("display","block");
+        getiLMContent();
+    } else {
+        // Caso não esteja em modo de resolução de atividade, a visualização no momento
+        // é para a elaboração de atividade:
+        $('.elaboracao').css("display","block");
+    }
+});

old/index.html

@@ -1,232 +0,0 @@
-<!DOCTYPE html>
-<meta charset="UTF-8">
-<html>
-	<head>
-		<title> Torre de Hanoi </title>
-		<Style>
-			#planoDeFundo {
-				background :transparent;
-				left: 10%;
-				top : 10%;
-				width: 80%; 
-				height: 60%;
-				position: absolute;
-			}
-			#fim_button{
-				position: absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				max-width: 5%;
-				left:10%;
-				top: 5%;
-			}
-			#atualiza_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				max-width: 7%;
-				left: 15%;
-				top:5%;
-			}
-
-			#A_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				width: 20%;
-				max-width: 20%;
-				left: 13%;
-				top:71%;
-			}
-			#B_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				width: 20%;
-				max-width: 20%;
-				left: 40%;
-				top:71%;
-			}
-			#C_button{
-				position:absolute;
-				border:1px solid gray;
-				border-radius: 7%;
-				font-size: 0.875;
-				word-wrap: break-word;
-				width: 20%;
-				max-width: 20%;
-				left: 67%;
-				top:71%;
-			}
-		</Style>
-	</head>
-	<body>
-	<button id="fim_button">Fim</button>
-	<button id="atualiza_button">Atualiza</button>
-	<button id="A_button" onclick="buttonClick(0)">A</button>
-	<button id="B_button" onclick="buttonClick(1)">B</button>
-	<button id="C_button" onclick="buttonClick(2)">C</button> 
-		<canvas id="planoDeFundo">
-		Seu navegador não suporta o recurso Canvas. Atualize-o para utilizar esse recurso
-		</canvas>
-		<script>
-			var canvas = document.getElementById('planoDeFundo');
-			var context = canvas.getContext('2d');
-			var towerA = [], towerB = [], towerC = [], toMove = null;
-			var idF=" ", idT=" ";
-			function inicio (){
-						 	//NavyBlue  Lime     Fuchsia   lightPink   Orange   LightSteelBlue
-				var colors = ["#000080","#00FF00", "#FF00FF", "#FFC0CB", "#FFA500", "#B0C4DE"];
-				var x = 13.5;
-				var y = 109;
-				var w = 70;
-				for (var i = 0; i < 6; i++) {
-					var disk = new Disk(x,y,w,10,colors[i]);
-					towerA.push(disk);
-					x+=5;  //moves to the right
-					y-=11; //moves up, +1 to separate disks
-					w-=10; //reduces disk width
-				}
-				drawScene();
-		    document.write("width:",canvas.width,"  height: ",canvas.height);
-
-			}
-
-			class Disk{
-				constructor(x,y,w,h,fill){
-					this.x=x;
-					this.y=y;
-					this.w=w;
-					this.h=h;
-					this.fill=fill;
-				}
-				draw(){
-					context.fillStyle = this.fill;
-					context.fillRect(this.x, this.y, this.w, this.h);
-				}
-				clear(){
-					context.clearRect(this.x, this.y, this.w, this.h);
-				}
-			}
-
-			function drawTowers(){
-				context.beginPath();
-				<!-- torre 1 -->
-				context.rect(45,20,5, 100);//x, y, largura, altura
-				context.fillStyle = 'yellow';
-			    context.fill();
-			    
-			    <!--Base t1-->
-				context.rect(13.5,120,70, 5);
-			    context.fill();
-
-				<!-- torre 2 -->
-				context.rect(145,20 ,5, 100);
-			    context.fill();
-
-			    <!--Base t2-->
-				context.rect(113.5,120,70, 5);
-			    context.fill();
-
-				<!-- torre 3 -->
-				context.rect(245,20 ,5, 100);
-			    context.fill();
-
-			    <!--Base t2-->
-				context.rect(213.5,120,70, 5);
-			    context.fill();
-			}
-
-			function drawDisks (){
-				for(i=0; i<towerA.length; i++){
-					towerA[i].draw();
-				}
-				for(i=0; i<towerB.length; i++){
-					towerB[i].draw();
-				}
-				for(i=0; i<towerC.length; i++){
-					towerC[i].draw();
-				}
-			}
-
-			function drawScene (){
-				context.clearRect(0, 0, canvas.width, canvas.height);
-				drawTowers();
-				drawDisks();
-				drawFromTo();
-			}
-
-			function buttonClick (id){
-				console.log(id);
-				if(toMove == null && getTower(id).length>0){
-					toMove = id;
-					idF= String.fromCharCode(65+id);
-					idT= " ";
-					drawScene();
-				} else if(toMove != id){
-					idT = String.fromCharCode(65+id);
-					moveDisk(toMove, id)					
-					toMove=null;
-				}
-			}
-
-			function drawFromTo(){
-				context.font = "10px Arial";
-				context.strokeText("Move from "+idF+" to "+idT, 10, 10);
-			}
-
-			function getTower (id){
-				switch(id){
-					case 0:
-						return towerA;
-					case 1:
-						return towerB;
-					case 2:
-						return towerC;
-				}
-			}
-
-			function moveDisk (origin, destiny){
-				var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
-				
-				
-				topDiskOrigin = originTower[originTower.length-1];
-				if(destinyTower.length>0){
-					topDiskDestiny = destinyTower[destinyTower.length-1];
-					if(topDiskOrigin.w<topDiskDestiny.w){
-						topDiskOrigin.x += 100*(destiny-origin);
-						topDiskOrigin.y += 11*(originTower.length-destinyTower.length-1);
-						originTower.pop();
-						destinyTower.push(topDiskOrigin);
-						drawScene();
-					} else{
-						alert("Movimento Inválido");
-						idF =" ";
-						idT =" ";
-						drawScene();
-
-					}
-				}else{	
-					topDiskOrigin.x += 100*(destiny-origin);
-					topDiskOrigin.y += 11*(originTower.length-destinyTower.length-1);
-					originTower.pop();
-					destinyTower.push(topDiskOrigin);
-					drawScene();
-				}
-			}
-
-
-    	</script>
-
-    	<script> inicio(); </script>
-    	
-  </body>
-</html>