Juntar traduçao en ao repositorio master

en/alteracoes_erros.txt

@@ -0,0 +1,83 @@
+2018/11/17
+
+Usei marcador "//leo1"
+
+/home/leo/projetos/iMA/ima/ivprog_html5/2018/manual_ima/www/ivprogh/i18n/i18n-engine.js
+ + fuction i18n(identifier): no Vivaldi resulta erro (e NAO carrega)
+     at i18n (i18n-engine.js:11)
+       Uncaught TypeError: Cannot read property 'ERROR' of undefined
+     Solucao: acrescentei 'try/catch'
+       try { // Vivaldi: error 'Uncaught TypeError: Cannot read property 'ERROR' of undefined
+         if (StringTypes.ERROR === type) ...
+       } catch (error) { 
+         //DEBUG alert('./ivprogh/i18n/i18n-engine.js: i18n('+identifier+'): error ' + error);
+         }
+
+
+/home/leo/projetos/iMA/ima/ivprog_html5/2018/manual_ima/www/ivprogh/build/ivprog.bundle.js:
+  + linha 49198/50226: var lang = localStorage.getItem(this.lsKey);
+    Erro: SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
+    Rever: essa funcao esta sendo chamada MUITAS vezes!
+    LanguageService.prototype.getLang = function (): linha "var lang = localStorage.getItem(this.lsKey);"
+    Troque por:
+    var lang;
+    try { lang = localStorage.getItem(this.lsKey); } catch (error) {
+      //DEBUG alert('./ivprogh/build/ivprog.bundle.js: LanguageService.prototype.getLang(): error ' + error);
+      /TODO   rever aqui, pois ao carregar iVProg esse metodo esta sendo chamado MUITAS vezes!		
+      return "pt"; //TODO "pt_BR" "en_US"
+      }
+
+
+/home/leo/projetos/iMA/ima/ivprog_html5/2018/manual_ima/www/ivprogh/js/iassign-integration-functions.js
+  + linha 20/340 (antes de alterar, depois 341)
+    Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
+      at file:///home/leo/projetos/iMA/ima/ivprog_html5/2018/manual_ima/www/ivprogh/js/iassign-integration-functions.js:20:1
+    Troqui: localStorage.setItem('ivprog.lang', iLMparameters.lang);
+    Por:
+    try { localStorage.setItem('ivprog.lang', iLMparameters.lang); }
+    catch (error) { } //leo1 If NOT in iAssign 'localStorage' is undefined! Do not try: localStorage.setItem('ivprog.lang', 'pt');
+
+---
+
+Botao 'submit'
+
+/home/leo/projetos/iMA/ima/ivprog_html5/2018/manual_ima/www/ivprogh/js/iassign-integration-functions.js
+  + function getEvaluation (): if (iLMparameters.iLM_PARAM_SendAnswer == 'false') runCodeAssessment();
+
+
+/home/leo/projetos/iMA/ima/ivprog_html5/2018/manual_ima/www/ivprogh/build/ivprog.bundle.js
+  + 19265/50232:
+    window.runCodeAssessment = runCodeAssessment;
+  + 19587/50232:
+    function runCodeAssessment(): ...
+    
+
+---
+
+Manual
+
+Eliminar recurso de: https://www.w3schools.com/w3css/4/w3.css
+Usar origem: https://pastebin.com/raw/VLAn1rV0
+
+Eliminar recurso de: https://www.w3schools.com/lib/w3-theme-teal.css
+
+Eliminar: https://fonts.googleapis.com/css?family=Roboto
+
+Eliminar: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
+
+index.html
+ + 'myAccordion' -> 'manuItem'
+ + "onclick="carregar('..." -> "onclick="carregar('menu_...": 24 mudancas
+
+Alterados nomes de quase todos os HTML.
+
+Alterados inicio de quase todos os HTML.
+
+Alteradas explicacoes em quase todos os HTML.
+
+w3.css
+ .w3-button:hover: color:#000 -> color:#fff e background-color:#ccc -> background-color:#001A66
+ .w3-show: acresc ";color:#001065;background-color:#eee" em "{display:block!important;color:#001065;background-color:#eee}"
+ .w3-item{padding:4px;display:block;border:1pt;border-bottom:1px solid #001A66;width:100%}: novo!
+
+ 

en/bugs/get.php

@@ -0,0 +1,75 @@
+<?php
+	if (!isset($_POST['details'])) {
+    	header('Location:report.html');
+    	exit;
+ 	}
+
+ 	try {
+		// Fazendo login no wekan:
+		$ch = curl_init();
+		curl_setopt($ch, CURLOPT_URL,"http://200.144.254.107/wekan/users/login");
+		curl_setopt($ch, CURLOPT_POST, 1);
+		curl_setopt($ch, CURLOPT_POSTFIELDS,
+		            "username=ivprogsite&password=T2mWR4vNr7tVwpTVR2gS");
+		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+		$server_output = curl_exec($ch);
+		curl_close ($ch);
+		$dadosLogin = json_decode($server_output);
+
+		if (!$dadosLogin) {
+			throw new Exception();
+		}
+
+		// Preparando o texto para submeter ao wekan:
+		$details = '';
+		if (isset($_POST['name']) && !empty(trim($_POST['name']))) {
+			$details .= 'Nome: ' . strip_tags(trim($_POST['name'])) . '\n';
+		}
+		if (isset($_POST['email']) && !empty(trim($_POST['email']))) {
+			$details .= 'E-mail: ' . strip_tags(trim($_POST['email'])) . '\n';
+		}
+		$details .= 'Detalhes: ' . strip_tags(trim($_POST['details']));
+
+		$summary = '';
+		if (isset($_POST['summary']) && !empty(trim($_POST['summary']))) {
+			$summary = strip_tags(trim($_POST['summary']));
+		}
+		// Fazendo a submissão dos dados para o Wekan:
+		$ch = curl_init();
+		curl_setopt($ch, CURLOPT_HTTPHEADER, array(
+		    'Authorization: Bearer ' . $dadosLogin->token,
+		    'Content-type:application/json'
+		));
+		curl_setopt($ch, CURLOPT_URL,"http://200.144.254.107/wekan/api/boards/v82Wx3C3dk79t4pJw/lists/dHNhYSSyyqWhRn6NX/cards");
+		curl_setopt($ch, CURLOPT_POST, 1);
+		curl_setopt($ch, CURLOPT_POSTFIELDS,
+		            '{ "title": "'.$summary.'", "description": "'.$details.'", "authorId": "'. $dadosLogin->id.'", "swimlaneId": "HeJBje3EdmJ3GpZyb" }');
+		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+		$retorno = curl_exec($ch);
+		curl_close ($ch);
+		$resposta = json_decode($retorno);
+		if (!$resposta->_id) {
+			throw new Exception();
+		}
+	} catch (Exception $ex) {
+		if (isset($_POST['redirect'])) {
+			header('Location:'.$_POST['redirect'].'?error=true');
+	    	exit;
+		} else {
+			header('Location:report.html?error=true');
+	    	exit;
+		}
+	}
+
+	if (isset($_POST['redirect'])) {
+		header('Location:'.$_POST['redirect'].'?reported=true');
+    	exit;
+	} else {
+		header('Location:report.html?reported=true');
+    	exit;
+	}
+
+?>
+
+
+

en/bugs/report.html

@@ -0,0 +1,161 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="../css/bootstrap.min.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
+      <b><a class="navbar-brand" href="../">iVProgH</a></b>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="../" 
+               title="Navigate to iVProgH homepage.">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../sobre_ivprog.html"
+               title="Know what iVProgH is and what iVProgH is for.">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../ex_en/index.html"
+               title="See some examples and test iVProgH online.">Examples</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../download.html"
+               title="Download a copy of iVProgH for your computer.">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../manual_en/index.html" 
+               title="Access online iVProgH manual and learn about all the features.">Help</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../bugs/report.html"
+               title="Send a message to the iVProgH team.">Contact</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="//www.usp.br/line/"
+               title="Meet the Laboratory of Informatics in Education of the Institute of Mathematics and Statistics of USP.">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../docs/"
+               title="Get access to all iVProgH documentation.">Developers</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../publicacoes.html"
+               title="Read the team publications about iVProgH.">Publications</a>
+          </li>
+        </ul>
+        <div class="form-inline my-2 my-lg-0">
+          <a href="../../index.html"><img src="../img/img_flag_brazil.png"/></a>
+          <a href="../index.html"><img src="../img/img_flag_usa.png"/></a>
+        </div>
+      </div>
+    </nav>
+
+    <main role="main">
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>Contact</h1>
+        </div>
+      </div>
+      <div class="container ivprog-container" style="padding: 3em; margin-top: 3em;">
+      	<p style="color: gray">Thank you for your interest in contacting iVProgH! <br />
+      		Please, fill in the fields below.</p>
+      	<form action="get.php" method="post" class="needs-validation" novalidate>
+      		<input type="hidden" name="redirect" value="report.html">
+      		<div class="form-group row">
+				<label for="inputname" class="col-sm-2 col-form-label">Name:</label>
+				<div class="col-sm-10">
+			    	<input type="text" class="form-control" id="inputname" name="name">
+			    </div>
+			</div>
+			<div class="form-group row">
+				<label for="inputemail" class="col-sm-2 col-form-label">E-mail:</label>
+				<div class="col-sm-10">
+			    	<input type="email" class="form-control" id="inputemail" name="email">
+			    </div>
+			</div>
+			<div class="form-group row">
+				<label for="inputsummary" class="col-sm-2 col-form-label">Subject:</label>
+				<div class="col-sm-10">
+			    	<input type="text" class="form-control" id="inputsummary" name="summary">
+			    </div>
+			</div>
+			<div class="form-group row">
+				<label for="inputdetails" class="col-sm-2 col-form-label">Message:*</label>
+				<div class="col-sm-10">
+			    	<textarea id="inputdetails" class="form-control" name="details" style="height: 15em;" required></textarea>
+			    	<div class="invalid-feedback">
+			        	Please give us a message!
+			        </div>
+			    </div>
+			</div>
+			<div class="form-group row">
+		      <div class="offset-sm-2 col-sm-10">
+		        <button type="submit" class="btn btn-primary">Submit</button>
+		        <span class="reported" style="color: green; font-size: 120%;"></span>
+		        <span class="error" style="color: red; font-size: 120%;"></span>
+		      </div>
+		    </div>
+
+      	</form>
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="../js/jquery.min.js"></script>
+    <script src="../js/bootstrap.bundle.min.js"></script>
+    <script type="text/javascript">
+    	$( document ).ready(function() {
+    		$( '#inputname' ).focus();
+    		var forms = document.getElementsByClassName('needs-validation');
+		    // Loop over them and prevent submission
+		    var validation = Array.prototype.filter.call(forms, function(form) {
+		      form.addEventListener('submit', function(event) {
+		        if (form.checkValidity() === false) {
+		          event.preventDefault();
+		          event.stopPropagation();
+		          $(' #inputdetails').focus();
+		        }
+		        form.classList.add('was-validated');
+		      }, false);
+		    });
+
+		    if (getUrlParameter('reported')) {
+		    	$('.reported').text('The information has been sent successfully!');
+		    } else if (getUrlParameter('error')) {
+		    	$('.error').text('There was an error while trying to send the data, please try again!');
+		    }
+		});
+
+		function getUrlParameter(sParam) {
+		    var sPageURL = window.location.search.substring(1),
+		        sURLVariables = sPageURL.split('&'),
+		        sParameterName,
+		        i;
+
+		    for (i = 0; i < sURLVariables.length; i++) {
+		        sParameterName = sURLVariables[i].split('=');
+
+		        if (sParameterName[0] === sParam) {
+		            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
+		        }
+		    }
+		}
+		
+    </script>
+  </body>
+</html>

en/css/style.css

@@ -0,0 +1,173 @@
+.ivprog-container {
+  -webkit-box-shadow: 0px 0px 31px -5px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 31px -5px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 31px -5px rgba(0,0,0,0.75);
+  border-radius: 4px; padding-top: 0.3rem;
+}
+footer.container {
+  margin-top: 1%;
+}
+.jumbotron.ivprogh-desc {
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+.text-reduced {
+  font-size: 96%;
+  margin-bottom: 0.5rem;
+}
+h1 {
+  margin-bottom: 0;
+}
+.col-md-3.item {
+  padding: 1em; background: #007bff; color: white;
+  margin: 1em; border-radius: .5em; text-align: center; 
+  border: 1px groove; cursor: pointer;
+} 
+.col-md-3.item .octicon {
+  font-size: 2em;
+}
+.col-md-3.item h4 {
+  font-size: 1.4em;
+  margin-top: 0.6em;
+}
+.row.thumbs-ivprog {
+  margin-top: 1em;
+}
+.row.thumbs-ivprog-download .item {
+  background-color: #5a6570;
+  border: 2px groove;
+}
+.col-md-3.item:hover {
+  background-color: #03396c;
+}
+.col-md-3.item hr {
+  background: white;
+}
+.col-md-3.item a {
+  color: white;
+}
+.btn.btn-primary .octicon {
+  font-size: 1.5em;
+  margin-right: 0.5em;
+}
+.download-ivprog {
+  font-size: 1.3em;
+}
+.div-button {
+  text-align: center;
+  padding-top: 2.5em;
+}
+.div-button .span-version {
+  display: block;
+  font-size: 98%;
+}
+.my-4 .octicon-history {
+  font-size: 1em;
+}
+.row.thumbs-ivprog-download {
+  padding-bottom: 3em;
+}
+
+.history-ivprog-version {
+  display: block;
+  font-size: 1em;
+  font-weight: bold;
+  margin-top: -.5em;
+  margin-bottom: .5em;
+}
+.history-ivprog-time {
+  background-color: gray;
+  padding: .4em;
+  border-radius: .4em;
+}
+footer.container {
+  margin-bottom: 1em;
+}
+.example-large-div {
+  background-color: #0bbf4a;
+  border-radius: .8em;
+  margin-top: 0.5em;
+}
+
+.example-large-div .container .embed-responsive {
+  border-radius: .5em;
+  margin-top: 1em;
+}
+
+.text-count-example {
+  font-size: 1.5em;
+  color: white;
+  text-shadow: 2px 2px gray;
+  font-weight: 600;
+  margin-bottom: .3em;
+  padding-top: .3em;
+  padding-bottom: .2em;
+  cursor: pointer;
+}
+.example-large-div .text-reduced {
+  color: #06065a;
+  font-size: 1.1em;
+  text-indent: 1em;
+}
+.text-count-example .octicon {
+  text-shadow: none;
+  font-weight: normal;
+  font-size: .9em;
+  margin-right: .1em;
+}
+.container.text-center .btn {
+  margin: .5em;
+}
+.container.example-large-div.autoeval-descript {
+  background-color: #538564;
+  color: white;
+  padding: .2em;
+  padding-left: 1em;
+  font-size: 1.1em;
+  border-radius: .3em;
+}
+.container.example-large-div.autoeval-descript .pointer {
+  cursor:pointer;
+}
+.container.example-large-div.autoeval-descript span {
+  font-size: 1.2em;
+  margin-right: .2em;
+}
+#area-autoeval-descript {
+  padding-left: 2em;
+  padding-top: 1em;
+  padding-right: 2em;
+  padding-bottom: 1em;
+}
+button.btn.btn-primary.show-solution {
+  float: right;
+  margin-right: 1em;
+}
+.ivprogh-title-download {
+  color: #03396c;
+}
+.ivprogh-title-download .octicon {
+  font-size: 1em;
+}
+.table.about-auto-eval {
+  border: 2px solid white;
+}
+.box-download {
+  background: #efefef;
+  border-radius: .5em;
+}
+.distinct-container {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+.zoom-images {
+  width: 10em;
+  cursor: zoom-in;
+  height: 5.5em !important;
+}
+ul.col_download {
+  margin-left:4px; padding:0; list-style:square;
+  }
+li.col_download {
+  display:inline-block; text-align:left;font-size: 0.9em;
+  }

en/css/style.css~

@@ -0,0 +1,167 @@
+.ivprog-container {
+  -webkit-box-shadow: 0px 0px 31px -5px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 31px -5px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 31px -5px rgba(0,0,0,0.75);
+  border-radius: 4px; padding-top: 0.3rem;
+}
+footer.container {
+  margin-top: 1%;
+}
+.jumbotron.ivprogh-desc {
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+.text-reduced {
+  font-size: 96%;
+  margin-bottom: 0.5rem;
+}
+h1 {
+  margin-bottom: 0;
+}
+.col-md-3.item {
+  padding: 1em; background: #007bff; color: white;
+  margin: 1em; border-radius: .5em; text-align: center; 
+  border: 1px groove; cursor: pointer;
+} 
+.col-md-3.item .octicon {
+  font-size: 3em;
+}
+.col-md-3.item h4 {
+  font-size: 1.4em;
+  margin-top: 0.6em;
+}
+.row.thumbs-ivprog {
+  margin-top: 1em;
+}
+.row.thumbs-ivprog-download .item {
+  background-color: #5a6570;
+  border: 2px groove;
+}
+.col-md-3.item:hover {
+  background-color: #03396c;
+}
+.col-md-3.item hr {
+  background: white;
+}
+.col-md-3.item a {
+  color: white;
+}
+.btn.btn-primary .octicon {
+  font-size: 1.5em;
+  margin-right: 0.5em;
+}
+.download-ivprog {
+  font-size: 1.3em;
+}
+.div-button {
+  text-align: center;
+  padding-top: 2.5em;
+}
+.div-button .span-version {
+  display: block;
+  font-size: 98%;
+}
+.my-4 .octicon-history {
+  font-size: 1em;
+}
+.row.thumbs-ivprog-download {
+  padding-bottom: 3em;
+}
+
+.history-ivprog-version {
+  display: block;
+  font-size: 1em;
+  font-weight: bold;
+  margin-top: -.5em;
+  margin-bottom: .5em;
+}
+.history-ivprog-time {
+  background-color: gray;
+  padding: .4em;
+  border-radius: .4em;
+}
+footer.container {
+  margin-bottom: 1em;
+}
+.example-large-div {
+  background-color: #0bbf4a;
+  border-radius: .8em;
+  margin-top: 0.5em;
+}
+
+.example-large-div .container .embed-responsive {
+  border-radius: .5em;
+  margin-top: 1em;
+}
+
+.text-count-example {
+  font-size: 1.5em;
+  color: white;
+  text-shadow: 2px 2px gray;
+  font-weight: 600;
+  margin-bottom: .3em;
+  padding-top: .3em;
+  padding-bottom: .2em;
+  cursor: pointer;
+}
+.example-large-div .text-reduced {
+  color: #06065a;
+  font-size: 1.1em;
+  text-indent: 1em;
+}
+.text-count-example .octicon {
+  text-shadow: none;
+  font-weight: normal;
+  font-size: .9em;
+  margin-right: .1em;
+}
+.container.text-center .btn {
+  margin: .5em;
+}
+.container.example-large-div.autoeval-descript {
+  background-color: #538564;
+  color: white;
+  padding: .2em;
+  padding-left: 1em;
+  font-size: 1.1em;
+  border-radius: .3em;
+}
+.container.example-large-div.autoeval-descript .pointer {
+  cursor:pointer;
+}
+.container.example-large-div.autoeval-descript span {
+  font-size: 1.2em;
+  margin-right: .2em;
+}
+#area-autoeval-descript {
+  padding-left: 2em;
+  padding-top: 1em;
+  padding-right: 2em;
+  padding-bottom: 1em;
+}
+button.btn.btn-primary.show-solution {
+  float: right;
+  margin-right: 1em;
+}
+.ivprogh-title-download {
+  color: #03396c;
+}
+.ivprogh-title-download .octicon {
+  font-size: 1em;
+}
+.table.about-auto-eval {
+  border: 2px solid white;
+}
+.box-download {
+  background: #efefef;
+  border-radius: .5em;
+}
+.distinct-container {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+.zoom-images {
+  width: 10em;
+  cursor: zoom-in;
+  height: 5.5em !important;
+}

en/docs/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="../css/bootstrap.min.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
+      <b><a class="navbar-brand" href="../">iVProgH</a></b>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="../" 
+               title="Navigate to iVProgH homepage.">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../sobre_ivprog.html"
+               title="Know what iVProgH is and what iVProgH is for.">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../ex_en/index.html"
+               title="See some examples and test iVProgH online.">Examples</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../download.html"
+               title="Download a copy of iVProgH for your computer.">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../manual_en/index.html" 
+               title="Access online iVProgH manual and learn about all the features.">Help</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../bugs/report.html"
+               title="Send a message to the iVProgH team.">Contact</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="//www.usp.br/line/"
+               title="Meet the Laboratory of Informatics in Education of the Institute of Mathematics and Statistics of USP.">LInE</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="../docs/"
+               title="Get access to all iVProgH documentation.">Developers</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../publicacoes.html"
+               title="Read the team publications about iVProgH.">Publications</a>
+          </li>
+        </ul>
+        <div class="form-inline my-2 my-lg-0">
+          <a href="../../index.html"><img src="../img/img_flag_brazil.png"/></a>
+          <a href="../index.html"><img src="../img/img_flag_usa.png"/></a>
+        </div>
+      </div>
+    </nav>
+
+    <main role="main">
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>iVProgH</h1>
+          
+        </div>
+      </div>
+      <div class="container ivprog-container" style="padding: 3em; margin-top: 3em;">
+      	<h4>IVProgH Documentation</h4>
+      	<p style="color: gray">Here you can find all the iVProgH documentation</p>
+      	
+      </div>
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="../js/jquery.min.js"></script>
+    <script src="../js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

en/download.html

@@ -0,0 +1,205 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+     <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
+      <b><a class="navbar-brand" href="./">iVProgH</a></b>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="./" 
+               title="Navigate to iVProgH homepage.">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./sobre_ivprog.html"
+               title="Know what iVProgH is and what iVProgH is for.">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./ex_en/index.html"
+               title="See some examples and test iVProgH online.">Examples</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="./download.html"
+               title="Download a copy of iVProgH for your computer.">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./manual_en/index.html" 
+               title="Access online iVProgH manual and learn about all the features.">Help</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./bugs/report.html"
+               title="Send a message to the iVProgH team.">Contact</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="//www.usp.br/line/"
+               title="Meet the Laboratory of Informatics in Education of the Institute of Mathematics and Statistics of USP.">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./docs/"
+               title="Get access to all iVProgH documentation.">Developers</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./publicacoes.html"
+               title="Read the team publications about iVProgH.">Publications</a>
+          </li>
+        </ul>
+        <div class="form-inline my-2 my-lg-0">
+          <a href="../index.html"><img src="img/img_flag_brazil.png"/></a>
+          <a href="./index.html"><img src="img/img_flag_usa.png"/></a>
+        </div>
+      </div>
+    </nav>
+
+    <main role="main">
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>Download</h1>
+        </div>
+      </div>
+      <div class="container ivprog-container" style="width:900px">
+           <!-- Page Content -->
+      <div class="container" style="margin-top:50px;" >
+
+      <div class="row">
+
+        <div class="col-md-8">
+          <div class="fig"><figure>
+          <img class="img-fluid" src="./img/img_ivprogh_download_page.png" alt="Image of the iVProgH UI in its most current version.">
+            <figcaption align="center">Fig. <i>IVProgH</i> static image with input and output instructions in its current version</figcaption>
+          </figure></div>
+        </div>
+
+        <div class="col-md-4 box-download">
+          <h4 class="my-4 ivprogh-title-download"> <span class="octicon octicon-desktop-download"></span> Download iVProgH</h4>
+          
+          <ul class="col_download">
+            <li>Free and open source education/learning environment;</li>
+            <li>Includes automatic evaluator;</li>
+            <li>It has features for vectors, functions and recursion;</li>
+            <li>Provides predefined functions (such as math for sine and cosine);</li>
+            <li>You can download only iVProgH or it and all that page set;</li>
+            <li>Just need a browser to work!</li>
+          </ul>
+
+          <div class="div-button">
+            <a class="btn btn-primary download-ivprog" href="versions/www-ivprog_2019_03_11.tgz" role="button" title="download iVProgH and all its tutorial">
+	       <span class="octicon octicon-desktop-download"></span>Download all</a>
+	    <br/>&nbsp;<br/>
+            <a class="btn btn-primary download-ivprog" href="versions/ivprog_2019_03_11.tgz" role="button" title="download iVProgH only">
+	       <span class="octicon octicon-desktop-download"></span>iVProgH only</a>
+            <!--span class="span-version">Atualização 2019/01/12</span-->
+            <span class="span-version">Update 2019/03/11</span>
+          </div>
+        </div>
+      </div>
+
+      <hr class="distinct-container">
+
+      <h4 class="my-4 ivprogh-title-download" style="margin-top: 5px"> <span class="octicon octicon-history"></span> Previous Versions of iVProg</h4>
+
+      <div class="row">
+        <div class="col-md-12">
+          <p>Over time, iVProg has improvements and modifications while maintaining full compatibility with today's browsers. Initially it was developed in Java in the format of applet (Version I - Java and Version II - Java), had to be rewritten after blocking the execution of applets by the main browsers of the market, resulting in Version III - HTML.</p>
+          
+          <p>Version III - HTML continues to work in browsers and can be integrated with Web systems. However, to enable new features (such as vectors, arrays and functions), a completely new version (Version IV - HTML) has been developed.</p>
+
+          <p>Below you will find the previous versions, which can be downloaded and used freely.</p>
+        </div>
+      </div>
+      <div class="modal fade" id="enlargeImageModal" tabindex="-1" role="dialog" aria-labelledby="enlargeImageModal" aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <span class="version-ivprogh"></span>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+            </div>
+            <div class="modal-body">
+              <img src="" class="enlargeImageModalSource" style="width: 100%;">
+            </div>
+          </div>
+        </div>
+    </div>
+      <div class="row">
+
+      <div class="container">
+        <div class="row thumbs-ivprog-download">
+          <div class="col-md-1"></div>
+          <div class="col-md-3 item" data-version="1">
+            <img class="img-fluid zoom-images" src="img/img_ivprog_java_1.png" alt="Version I - Java">
+            <hr>
+            <span class="history-ivprog-version">Version I - Java</span>
+            <span class="history-ivprog-time">2009 - 2012</span>
+          </div>
+          <div class="col-md-3 item" data-version="2">
+            <img class="img-fluid zoom-images" src="img/img_ivprog_java_2.1.0.png" alt="Version II - Java">
+            <hr>
+            <span class="history-ivprog-version">Version II - Java</span>
+            <span class="history-ivprog-time">2013 - 2015</span>
+          </div>
+          <div class="col-md-3 item" data-version="3">
+            <img class="img-fluid zoom-images" src="img/img_ivprog_html_1.png" alt="Version III - HTML">
+            <hr>
+            <span class="history-ivprog-version">Version III - HTML</span>
+            <span class="history-ivprog-time">2016 - 2018</span>
+          </div>
+          <div class="col-md-1"></div>
+        </div>
+       </div>
+      </div>
+
+    </div>
+
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/bootstrap.bundle.min.js"></script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
+
+    <script type="text/javascript">
+      $(function() {
+        $('.zoom-images').on('click', function() {
+          $('.version-ivprogh').text($(this).attr('alt'));
+          $('.enlargeImageModalSource').attr('src', $(this).attr('src'));
+          $('#enlargeImageModal').modal('show');
+        });
+       $('.item').on('click', function(e) {
+          e.stopPropagation();
+          if (e.target.nodeName.toLowerCase() === 'img') {
+            return;
+          }
+          var r_url = '';
+          switch ($(this).data('version')) {
+            case 1:
+              r_url = 'legacy/versao1/index.html';
+              break;
+            case 2:
+              r_url = 'legacy/versao2/index.html';
+              break;
+            case 3:
+              r_url = 'legacy/versao3/index.html';
+              break;
+          }
+          document.location = r_url;
+       });
+  });
+    </script>
+  </body>
+</html>

en/ex_en/exerc/exemplo_1_ler_e_imprimir_inteiro.ivph

@@ -0,0 +1,25 @@
+{
+"testcases" : [ 
+{ 
+ "input": ["-123"], 
+"output": ["-123"]
+},
+{ 
+ "input": ["0"], 
+"output": ["0"]
+},
+{ 
+ "input": ["123"], 
+"output": ["123"]
+},
+{ 
+ "input": ["4321"], 
+"output": ["4321"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"}],
+"settings_functions": 
+[] }

en/ex_en/exerc/exemplo_2_imprimir_quadrado.ivph

@@ -0,0 +1,25 @@
+{
+"testcases" : [ 
+{ 
+ "input": ["2"], 
+"output": ["4"]
+},
+{ 
+ "input": ["-10"], 
+"output": ["100"]
+},
+{ 
+ "input": ["25"], 
+"output": ["625"]
+},
+{ 
+ "input": ["-40"], 
+"output": ["1600"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"}],
+"settings_functions": 
+[] }

en/ex_en/exerc/exemplo_3_soma_dois_valores.ivph

@@ -0,0 +1,33 @@
+ {  
+ "testcases" : [ 
+{ 
+ "input": ["2", "2"], 
+ "output": ["4"]
+},
+{ 
+ "input": ["1", "10"], 
+ "output": ["11"]
+},
+{ 
+ "input": ["5", "5"], 
+ "output": ["10"]
+},
+{ 
+ "input": ["100", "350"], 
+ "output": ["450"]
+},
+{ 
+ "input": ["10", "-10"], 
+ "output": ["0"]
+},
+{ 
+ "input": ["-3", "4"], 
+ "output": ["1"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_4_media_aritmetica.ivph

@@ -0,0 +1,29 @@
+{  
+ "testcases" : [ 
+{ 
+ "input": ["10", "20"], 
+ "output": ["15.0"]
+},
+{ 
+ "input": ["5", "6"], 
+ "output": ["5.5"]
+},
+{ 
+ "input": ["70", "100"], 
+ "output": ["85.0"]
+},
+{ 
+ "input": ["97", "100"], 
+ "output": ["98.5"]
+},
+{ 
+ "input": ["300", "500"], 
+ "output": ["400.0"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_4_media_aritmetica.ivph~

@@ -0,0 +1,29 @@
+ {  
+ "testcases" : [ 
+{ 
+ "input": ["10", "20"], 
+ "output": ["15.0"]
+},
+{ 
+ "input": ["5", "6"], 
+ "output": ["5.5"]
+},
+{ 
+ "input": ["70", "100"], 
+ "output": ["85.0"]
+},
+{ 
+ "input": ["97", "100"], 
+ "output": ["98.5"]
+},
+{ 
+ "input": ["300", "500"], 
+ "output": ["400.0"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_5_maior_valor.ivph

@@ -0,0 +1,25 @@
+ {  
+ "testcases" : [ 
+{ 
+ "input": ["1", "2"], 
+ "output": ["2"]
+},
+{ 
+ "input": ["789", "1000"], 
+ "output": ["1000"]
+},
+{ 
+ "input": ["5", "2"], 
+ "output": ["5"]
+},
+{ 
+ "input": ["1432", "50"], 
+ "output": ["1432"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_6_imprimir_de_1_a_10.ivph

@@ -0,0 +1,13 @@
+ {  
+ "testcases" : [ 
+{ 
+ "input": [], 
+ "output": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_7_imprimir_ivprogh_10_vezes.ivph

@@ -0,0 +1,13 @@
+ {  
+ "testcases" : [ 
+{ 
+ "input": [], 
+ "output": ["iVProgH", "iVProgH", "iVProgH", "iVProgH", "iVProgH", "iVProgH", "iVProgH", "iVProgH", "iVProgH", "iVProgH"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_8_somar_valores_ate_digitar_0.ivph

@@ -0,0 +1,29 @@
+{  
+ "testcases" : [ 
+{ 
+ "input": ["3", "4", "0"], 
+ "output": ["7"]
+},
+{ 
+ "input": ["0"], 
+ "output": ["0"]
+},
+{ 
+ "input": ["3", "-3", "4", "-1"], 
+ "output": ["3"]
+},
+{ 
+ "input": ["7", "5", "0"], 
+ "output": ["12"]
+},
+{ 
+ "input": ["10", "10", "10", "10", "10", "10", "0"], 
+ "output": ["60"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_8_somar_valores_ate_digitar_0.ivph~

@@ -0,0 +1,29 @@
+ {  
+ "testcases" : [ 
+{ 
+ "input": ["3", "4", "0"], 
+ "output": ["7"]
+},
+{ 
+ "input": ["0"], 
+ "output": ["0"]
+},
+{ 
+ "input": ["3", "-3", "4", "-1"], 
+ "output": ["3"]
+},
+{ 
+ "input": ["7", "5", "0"], 
+ "output": ["12"]
+},
+{ 
+ "input": ["10", "10", "10", "10", "10", "10", "0"], 
+ "output": ["60"]
+}
+] ,
+"settings_data_types": 
+[{"name":"integer_data_type","value":"on"},{"name":"real_data_type","value":"on"},{"name":"text_data_type","value":"on"},{"name":"boolean_data_type","value":"on"},{"name":"void_data_type","value":"on"}],
+"settings_commands": 
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"},{"name":"commands_attribution","value":"on"},{"name":"commands_functioncall","value":"on"},{"name":"commands_iftrue","value":"on"},{"name":"commands_repeatNtimes","value":"on"},{"name":"commands_while","value":"on"},{"name":"commands_dowhile","value":"on"},{"name":"commands_switch","value":"on"}],
+"settings_functions": 
+[{"name":"functions_creation","value":"on"},{"name":"functions_move","value":"on"}] } 

en/ex_en/exerc/exemplo_fatorial.ivph

@@ -0,0 +1,43 @@
+{
+ "testcases" : [
+ ]
+}
+::algorithm::
+{
+"functions":[{
+"type":"function","name":"inicio","return_type":"void","return_dimensions":0,"parameters_list":[],"is_main":true,"is_hidden":false,"variables_list":[{
+"type":"integer","name":"n","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},{
+"type":"integer","name":"fat","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},{
+"type":"integer","name":"i","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0}],"function_comment":{
+"type":"comment","comment_text":"Esta é a função principal..."},"commands":[{
+"type":"reader","variable_value_menu":{
+"type":"var_value","variable_and_value":1,"content":{
+"type":"integer","name":"n","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":false,"dimensions":0}},{
+"type":"repeatNtimes","var_attribution":{
+"type":"var_value","variable_and_value":1,"content":{
+"type":"integer","name":"i","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":false,"dimensions":0},"var_incrementation":{
+"type":"var_value","variable_and_value":1,"content":{
+"type":"integer","name":"i","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":false,"dimensions":0},"expression1":{
+"type":"var_value","variable_and_value":7,"content":"2","row":null,"column":null,"include_constant":true,"dimensions":0},"expression2":{
+"type":"exp_conditional","expression":{
+"type":"exp_arithmetic","first_operand":{
+"type":"var_value","variable_and_value":1,"content":{
+"type":"integer","name":"i","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":false,"dimensions":0},"second_operand":{
+"type":"var_value","variable_and_value":7,"content":{
+"type":"integer","name":"n","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":true,"dimensions":0},"operator":"less_than_or_equals_to"}},"expression3":{
+"type_exp":"exp_op_exp","itens":[{
+"type":"var_value","variable_and_value":1,"content":{
+"type":"integer","name":"i","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":false,"dimensions":0},"plus",{
+"type":"var_value","variable_and_value":7,"content":"1","row":null,"column":null,"include_constant":true,"dimensions":0}]},"commands_block":[{
+"type":"attribution","variable":{
+"type":"var_value","variable_and_value":1,"content":{
+"type":"integer","name":"fat","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":false,"dimensions":0},"expression":[{
+"type_exp":"op_exp","itens":["none",{
+"type_exp":"exp_op_exp","itens":[{
+"type":"var_value","variable_and_value":7,"content":{
+"type":"integer","name":"fat","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":true,"dimensions":0},"multiplication",{
+"type":"var_value","variable_and_value":7,"content":{
+"type":"integer","name":"i","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":true,"dimensions":0}]}]}]}]},{
+"type":"writer","content":[{
+"type":"var_value","variable_and_value":7,"content":{
+"type":"integer","name":"fat","value":1,"dimensions":0,"is_constant":false,"rows":0,"columns":0},"row":null,"column":null,"include_constant":true,"dimensions":0}]}]}],"globals":[] }

en/ex_en/exerc/exerc_1_1_ler_imprimir_novo.ivph

@@ -0,0 +1,25 @@
+{
+"testcases" : [
+{
+ "input": ["-123"], 
+"output": ["-123"]
+},
+{
+ "input": ["0"],
+"output": ["0"]
+},
+{
+ "input": ["123"],
+"output": ["123"]
+},
+{
+ "input": ["4321"],
+"output": ["4321"]
+}
+],
+"settings_data_types":
+[{"name":"integer_data_type","value":"on"}],
+"settings_commands":
+[{"name":"commands_read","value":"on"},{"name":"commands_write","value":"on"},{"name":"commands_comment","value":"on"}],
+"settings_functions":
+[] }

en/ex_en/index.html

@@ -0,0 +1,502 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="../css/bootstrap.min.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+  </head>
+
+<!--
+   -------------------------------------------------------------------------------
+  JavaScript code: starting point
+  This JavaScript code could be inserted in any LMS to get the iLM content and send it to the server.
+  In this example it use a single "applet" instance, here from iHanoi.
+ -->
+<script Language="JavaScript">
+  //<![CDATA[
+  var strAnswer = '';
+  var evaluationResult = '';
+  var comment = '';
+
+  function submit_iMA_Answer (index) {
+    // alert('./ex_pt/index.html: window.frames=' + window.frames);
+    // alert('./ex_pt/index.html: window.frames.iLM=' + window.frames.iLM);
+
+    var name = 'iLM[' + index + ']'; // alert('name='+name);
+    window.frames[name].getEvaluation();
+    var strAnswer = window.frames[name].getAnswer();
+    alert('Copy the following ivph code (to use it with iVProgH): ' + strAnswer);
+
+    //DEBUG
+    //D var strFrames = "";
+    //D var arrFrames = parent.document.getElementsByTagName("IFRAME");
+    //D for (var i=0; i<arrFrames.length; i++) {
+    //D   strFrames += ', ' + arrFrames[i].name; // if (arrFrames[i].contentWindow === window) alert("yay!");
+    //D   } // acho 'window.frames' de nome 'iLM'!!!
+    //D if (index<10)
+    //D alert('./ex_pt/index.html: window.frames=' + strFrames);
+
+    // alert('window.frames.iLM=' + window.frames.iLM); // undefined
+
+    //D var docForm = document.formEnvio;
+    //D // Prepared to be used with more than 1 "applet'
+    //D var exercise_answer = new Array(3); // answer: to get the learner answer
+    //D var exercise_value = new Array(3);  // value from the iLM automatic evaluator
+    //D // var doc = document.formEnvio; // ----------------------------------------------------------
+    //D // var doc = javascript:window.jsAnalyseAnswer();
+    //D try {
+    //D   alert('submit_iMA_Answer(): evaluationResult=' + evaluationResult);
+    //D   exercise_answer[0] = doc.getAnswer();    // answer: it must be first (usually the iLM first get the answer to compute the evaluation grade)
+    //D   exercise_value[0] = doc.getEvaluation(); // value from the iLM automatic evaluator
+    //D } catch (Exception) { alert("Error!"); }
+    //D docForm.iLM_POST_Archive_0.value = exercise_answer[0]; // Content coming from the iLM
+    //D docForm.iLM_POST_Value_0.value = exercise_value[0];    // The activity evaluation coming from the iLM
+    //D // This is used to help the developer to debug his iLM
+    //D // It presents the file content that will be registered. 
+    //D alert('The file activity value is: ' + exercise_value[0] + '\nThe activity content is:\n' + exercise_answer[0]);
+    //D //uncomment_this docForm.submit(); // envia de fato o formulario
+    //D //uncomment_this return true;
+
+    }
+
+  function getEvaluationCallback (evaluation) {
+    evaluationResult = evaluation;
+    strAnswer = window.frames.iLM[index].getAnswer();
+    alert('getEvaluationCallback(...)' + evaluation + ', strAnswer=' + strAnswer);
+    comment = document.formEnvio.submission_comment.value;
+    //leo
+    if ((strAnswer==null || strAnswer=='' || strAnswer==-1) && (comment==null || comment=='')) { // undefined
+      alert('Activity sent without content.'); // 'Activity sent without content.'
+      return false; // error...
+      }
+    else {
+      //leo alert('getEvaluationCallback: enviando evaluationResult=' + evaluation + ', strAnswer=' + strAnswer);
+      document.formEnvio.iLM_PARAM_ArchiveContent.value = strAnswer;
+      document.formEnvio.iLM_PARAM_ActivityEvaluation.value = evaluationResult;
+      document.formEnvio.submit();
+      return true; // success
+      }
+    }
+
+    function openSolution (url_file, el_button) {
+        $(el_button).parent().find('iframe').attr('src', '../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=' + url_file + '&iLM_PARAM_SendAnswer=false&lang=en');
+      }
+//]]>
+</script>
+
+<!--
+  JavaScript code: final -------------------------------------------------------------------------------
+-->
+
+  <body>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
+      <b><a class="navbar-brand" href="../">iVProgH</a></b>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="../" 
+               title="Navigate to iVProgH homepage.">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../sobre_ivprog.html"
+               title="Know what iVProgH is and what iVProgH is for.">About</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="../ex_en/index.html"
+               title="See some examples and test iVProgH online.">Examples</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../download.html"
+               title="Download a copy of iVProgH for your computer.">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../manual_en/index.html" 
+               title="Access online iVProgH manual and learn about all the features.">Help</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../bugs/report.html"
+               title="Send a message to the iVProgH team.">Contact</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="//www.usp.br/line/"
+               title="Meet the Laboratory of Informatics in Education of the Institute of Mathematics and Statistics of USP.">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../docs/"
+               title="Get access to all iVProgH documentation.">Developers</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../publicacoes.html"
+               title="Read the team publications about iVProgH.">Publications</a>
+          </li>
+        </ul>
+        <div class="form-inline my-2 my-lg-0">
+          <a href="../../index.html"><img src="../img/img_flag_brazil.png"/></a>
+          <a href="../index.html"><img src="../img/img_flag_usa.png"/></a>
+        </div>
+      </div>
+    </nav>
+
+    <main role="main">
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>Examples</h1>
+        </div>
+      </div>
+
+      <div class="container example-large-div autoeval-descript">
+        <div data-toggle="collapse" class="pointer" href="#area-autoeval-descript" aria-expanded="false" aria-controls="area-autoeval-descript"><span class="octicon octicon-info"></span>
+	     Understand the operation of the automatic valuer</div>
+        <div id="area-autoeval-descript" class="collapse">
+          <p>IVProg allows automatic exercises to be made available directly on Web pages. If the teacher has an installation of the Moodle manager with the <a href="www.matematica.br/ia">iTarefa</a> package, then the activity performed by the student will be recorded, as well as the grade assigned to the student's solution.</p>
+
+          <p>The automatic evaluation in the iVProg is made from a template, which must have been prepared by the teacher, providing data inputs and their respective outputs. When the student "click" on the button to evaluate their solution, iVProg uses the first list as inputs to the student's problem, comparing each generated output with those of the list of outputs.</p>
+
+          <p>To better understand the process, let's use an example algorithm that must sum separately all the numbers positive and negative signals entered by the user.</p>
+
+          <p><span class="octicon octicon-pin"></span><b>Problem:</b></p>
+          
+          <p>Make an algorithm that prompts the user to enter integer values, finalizing their execution when typed the value zero. At the end, your program should print the sum of all positive integers that were typed and then print the sum of all negative integers.</p>
+
+          <p><span class="octicon octicon-light-bulb"></span> <b> How can I prepare a exercise template with automatic evaluation in iVProg</b></p>
+
+          <p>The teacher can prepare any number of lists of entries and exits, for the above problem, we will use only 3 lists, shown in the table below. The first column has the number of the "input/output" pair, the second shows the list of inputs (separated by white space), in the third column are the expected outputs (for those inputs) and the last column has a short explanation about the pair.
+
+          <table class="table about-auto-eval">
+            <thead class="thead-light">
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Inputs</th>
+                <th scope="col">Outputs</th>
+                <th scope="col">Comments</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>0</td>
+                <td>0 0</td>
+                <td>This is a tricky test, because if the first entry is zero, nothing will be added (then 0 and 0 should be printed)</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>1 -1 1 0</td>
+                <td> 2 -1 </td>
+                <td>It presents 2 positive and 1 negative values, with sums respectively 2 and -1</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>-1 -1 3 1 0</td>
+                <td>4 -2</td>
+                <td>It presents 2 positive and 2 negative values, with sums respectively 4 and -2</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p>IVProg has a special interface for the teacher to enter each list of inputs and outputs.</p>
+
+          <p><span class="octicon octicon-light-bulb"></span> <b> How does iVProg automatically evaluate a student solution?</b></p>
+
+          <p>Assuming that the student has built an algorithm, when he "click" the button to evaluate your solution, iVProg:</p>
+
+          <ol>
+            <li>It takes the first input from the first list and submits it to the first reading in the student code (error if it does not exist), then the second input and so on until the last one.</li>
+            <li>The first output (print command) generated by the student code is compared to the first expected output if it matches a hit is recorded, if not an error.</li>
+            <li>Repeat steps 1 and 2 for each of the other lists of inputs/outputs and at the end an average of hits and errors is generated. <p>For example, if the student algorithm is wrong in 2 of the 6 outputs, its grade will be 1/3.</p></li>
+          </ol>
+        </div>
+      </div>
+
+      <div class="container example-large-div autoeval-descript">
+        <div aria-expanded="false" aria-controls="area-autoeval-descript">
+             Try the exercises listed below, from example 1 through example 8. Example 9 illustrates how to construct a template for an exercise with automatic evaluation in <i>iVProgH</i>.<br/>To open the example, click on its title. You can hide it again by clicking on the same title.
+        </div>
+      </div>
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-1" aria-expanded="false" aria-controls="area-exemplo-1"><span class="octicon octicon-rocket"></span>
+            Example 1: Input and Output</div>
+        <div class="example-content collapse" id="area-exemplo-1">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_1_ler_e_imprimir_inteiro_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Make a program that prompts the user for an integer value, then print the value typed by the user.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[1]" id="iLM[1]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_1_ler_e_imprimir_inteiro.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(1);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-2" aria-expanded="false" aria-controls="area-exemplo-2"><span class="octicon octicon-rocket"></span>
+            Example 2: Print the square of a number (integer)</div>
+        <div class="example-content collapse" id="area-exemplo-2">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_2_imprimir_quadrado_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construct an algorithm that prompts the user to enter a number (integer) and prints the square of that value.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[2]" id="iLM[2]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_2_imprimir_quadrado.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(2);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+
+       <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-3" aria-expanded="false" aria-controls="area-exemplo-3"><span class="octicon octicon-rocket"></span>
+            Example 3: Sum of two values</div>
+        <div class="example-content collapse" id="area-exemplo-3">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_3_soma_dois_valores_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construct an algorithm that receives two integers and prints the sum of these values.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[3]" id="iLM[3]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_3_soma_dois_valores.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(3);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-4" aria-expanded="false" aria-controls="area-exemplo-4"><span class="octicon octicon-rocket"></span>
+            Example 4: Arithmetic mean</div>
+        <div class="example-content collapse" id="area-exemplo-4">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_4_media_aritmetica_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construct an algorithm that receives two integers from the input, calculates the arithmetic mean of those numbers, and prints it.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[4]" id="iLM[4]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_4_media_aritmetica.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(4);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+       <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-5" aria-expanded="false" aria-controls="area-exemplo-5"><span class="octicon octicon-rocket"></span>
+            Example 5: Higher value</div>
+        <div class="example-content collapse" id="area-exemplo-5">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_5_maior_valor_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construct an algorithm that receives two integers from the input and prints the higher of the two numbers.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[5]" id="iLM[5]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_5_maior_valor.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(5);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-6" aria-expanded="false" aria-controls="area-exemplo-6"><span class="octicon octicon-rocket"></span>
+            Example 6: Sequence</div>
+        <div class="example-content collapse" id="area-exemplo-6">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_6_imprimir_de_1_a_10_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Make an algorithm that prints the sequence of integers from 1 to 10.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[6]" id="iLM[6]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_6_imprimir_de_1_a_10.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(6);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-7" aria-expanded="false" aria-controls="area-exemplo-7"><span class="octicon octicon-rocket"></span>
+            Example 7: Print text</div>
+        <div class="example-content collapse" id="area-exemplo-7">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_7_imprimir_ivprogh_10_vezes_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Build an algorithm that prints the word iVProgH 10 times.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[7]" id="iLM[7]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_7_imprimir_ivprogh_10_vezes.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(7);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-8" aria-expanded="false" aria-controls="area-exemplo-8"><span class="octicon octicon-rocket"></span>
+            Example 8: Add n values</div>
+        <div class="example-content collapse" id="area-exemplo-8">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_8_somar_valores_ate_digitar_0_solucao.ivph', this)">See solution</button>
+          <p class="text-reduced">
+            Exercise example with <i>automatic evaluation</i> in <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Make an algorithm that reads a sequence of integers, adding them until a value of zero is entered, at which point you must print the value of the sum and stop.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#'\ \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[8]" id="iLM[8]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_8_somar_valores_ate_digitar_0.ivph&iLM_PARAM_SendAnswer=false&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                       title='Click here to see your code.'
+                       onclick='javascript:window.submit_iMA_Answer(8);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-9" aria-expanded="false" aria-controls="area-exemplo-9"><span class="octicon octicon-rocket"></span> Template: Building an Activity</div>
+        <div class="example-content collapse" id="area-exemplo-9">
+          <p class="text-reduced">
+            <b>In this example, construct an activity, inserting the test cases that will be used to evaluate the algorithm and configure the resources that will be made available to the student in iVProgH.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#'\ \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[9]" id="iLM[9]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_SendAnswer=true&lang=en"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Send reply' class="btn btn-warning" 
+                      title='Click here to see your code.'
+                      onclick='javascript:window.submit_iMA_Answer(9);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="../js/jquery.min.js"></script>
+    <script src="../js/bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
+    <script type="text/javascript">
+      $('.example-content').on('shown.bs.collapse', function () {
+        this.parentNode.scrollIntoView();
+      });
+    </script>
+  </body>
+</html>

en/ex_en/index.html~

@@ -0,0 +1,515 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="../css/bootstrap.min.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+  </head>
+
+<!--
+   -------------------------------------------------------------------------------
+  JavaScript code: starting point
+  This JavaScript code could be inserted in any LMS to get the iLM content and send it to the server.
+  In this example it use a single "applet" instance, here from iHanoi.
+ -->
+<script Language="JavaScript">
+  //<![CDATA[
+  var strAnswer = '';
+  var evaluationResult = '';
+  var comment = '';
+
+  function submit_iMA_Answer (index) {
+    // alert('./ex_pt/index.html: window.frames=' + window.frames);
+    // alert('./ex_pt/index.html: window.frames.iLM=' + window.frames.iLM);
+
+    var name = 'iLM[' + index + ']'; // alert('name='+name);
+    window.frames[name].getEvaluation();
+    var strAnswer = window.frames[name].getAnswer();
+    alert('Copie o código ivph a seguir (para usá-lo com o iVProgH): ' + strAnswer);
+
+    //DEBUG
+    //D var strFrames = "";
+    //D var arrFrames = parent.document.getElementsByTagName("IFRAME");
+    //D for (var i=0; i<arrFrames.length; i++) {
+    //D   strFrames += ', ' + arrFrames[i].name; // if (arrFrames[i].contentWindow === window) alert("yay!");
+    //D   } // acho 'window.frames' de nome 'iLM'!!!
+    //D if (index<10)
+    //D alert('./ex_pt/index.html: window.frames=' + strFrames);
+
+    // alert('window.frames.iLM=' + window.frames.iLM); // undefined
+
+    //D var docForm = document.formEnvio;
+    //D // Prepared to be used with more than 1 "applet'
+    //D var exercise_answer = new Array(3); // answer: to get the learner answer
+    //D var exercise_value = new Array(3);  // value from the iLM automatic evaluator
+    //D // var doc = document.formEnvio; // ----------------------------------------------------------
+    //D // var doc = javascript:window.jsAnalyseAnswer();
+    //D try {
+    //D   alert('submit_iMA_Answer(): evaluationResult=' + evaluationResult);
+    //D   exercise_answer[0] = doc.getAnswer();    // answer: it must be first (usually the iLM first get the answer to compute the evaluation grade)
+    //D   exercise_value[0] = doc.getEvaluation(); // value from the iLM automatic evaluator
+    //D } catch (Exception) { alert("Error!"); }
+    //D docForm.iLM_POST_Archive_0.value = exercise_answer[0]; // Content coming from the iLM
+    //D docForm.iLM_POST_Value_0.value = exercise_value[0];    // The activity evaluation coming from the iLM
+    //D // This is used to help the developer to debug his iLM
+    //D // It presents the file content that will be registered. 
+    //D alert('The file activity value is: ' + exercise_value[0] + '\nThe activity content is:\n' + exercise_answer[0]);
+    //D //uncomment_this docForm.submit(); // envia de fato o formulario
+    //D //uncomment_this return true;
+
+    }
+
+  function getEvaluationCallback (evaluation) {
+    evaluationResult = evaluation;
+    strAnswer = window.frames.iLM[index].getAnswer();
+    alert('getEvaluationCallback(...)' + evaluation + ', strAnswer=' + strAnswer);
+    comment = document.formEnvio.submission_comment.value;
+    //leo
+    if ((strAnswer==null || strAnswer=='' || strAnswer==-1) && (comment==null || comment=='')) { // undefined
+      alert('Activity sent without content.'); // 'Activity sent without content.'
+      return false; // error...
+      }
+    else {
+      //leo alert('getEvaluationCallback: enviando evaluationResult=' + evaluation + ', strAnswer=' + strAnswer);
+      document.formEnvio.iLM_PARAM_ArchiveContent.value = strAnswer;
+      document.formEnvio.iLM_PARAM_ActivityEvaluation.value = evaluationResult;
+      document.formEnvio.submit();
+      return true; // success
+      }
+    }
+
+    function openSolution (url_file, el_button) {
+        $(el_button).parent().find('iframe').attr('src', '../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=' + url_file + '&iLM_PARAM_SendAnswer=false&lang=pt');
+      }
+//]]>
+</script>
+
+<!--
+  JavaScript code: final -------------------------------------------------------------------------------
+-->
+
+  <body>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
+      <b><a class="navbar-brand" href="../">iVProgH</a></b>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="../" 
+               title="Navegue para a página inicial do site do iVProgH.">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../sobre_ivprog.html"
+               title="Conheça resumidamente o que é e para que serve o iVProgH.">Conheça</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="../ex_pt/index.html"
+               title="Veja alguns exemplos e teste o iVProgH online.">Exemplos</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../download.html"
+               title="Faça uma cópia do iVProgH para sua máquina.">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../manual_pt/index.html" 
+               title="Acesse um manual online do iVProgH e conheça todos os recursos.">Ajuda</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../bugs/report.html"
+               title="Envie uma mensagem para a equipe do iVProgH.">Contato</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="//www.usp.br/line/"
+               title="Conheça o Laboratório de Informática na Educação do Instituto de Matemática e Estatística da USP.">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../docs/"
+               title="Tenha acesso a toda a documentação do iVProgH.">Desenvolvedores</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="../publicacoes.html"
+               title="Leia as publicações da equipe a respeito do iVProgH.">Publicações</a>
+          </li>
+        </ul>
+        <div class="form-inline my-2 my-lg-0">
+          <img src="../img/img_flag_brazil.png" />
+          <img src="../img/img_flag_usa.png" ;>
+        </div>
+      </div>
+    </nav>
+
+    <main role="main">
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>Exemplos</h1>
+        </div>
+      </div>
+
+      <div class="container example-large-div autoeval-descript">
+        <div data-toggle="collapse" class="pointer" href="#area-autoeval-descript" aria-expanded="false" aria-controls="area-autoeval-descript"><span class="octicon octicon-info"></span>
+	     Entenda o funcionamento do avaliador automático</div>
+        <div id="area-autoeval-descript" class="collapse">
+          <p>O iVProg permite a disponibilização de exercícios com avaliação automática diretamente em páginas Web.
+          Se o professor dispuser de uma instalação do gerenciador Moodle com o pacote <a href="www.matematica.br/ia">iTarefa</a>, então a atividade realizada pelo aluno será registrada, assim como a nota atribuida à solução do aluno.</p>
+
+          <p>A avaliação automática no iVProg é feita a partir de um modelo (gabarito), que deve ter sido preparado pelo professor,
+          prevendo entradas de dados e suas respectivas saídas. Quando o aluno "clicar" no botão para avaliar sua solução,
+          o iVProg usa a primeira lista como entradas para o problema do aluno, comparando cada saída gerada com aquelas da
+          lista de saídas.</p>
+
+          <p>Para compreender melhor o processo, vamos usar um exemplo de algoritmo que deve somar separadamente todos os números
+          positivos e negativos digitados pelo usuário.</p>
+
+          <p><span class="octicon octicon-pin"></span><b>Problema:</b></p>
+          
+          <p>Fazer um algoritmo que solicite que o usuário digite valores inteiros, finalizando sua execução quando for digitado
+          o valor zero. Ao final, seu programa deve imprimir a soma de todos os inteiros positivos que foram digitados e a seguir,  imprimir a soma de todos os inteiros negativos.</p>
+
+          <p><span class="octicon octicon-light-bulb"></span> <b> Como posso preparar um gabarito para exercício com avaliação automática no iVProg</b></p>
+
+          <p>O professor pode preparar um número qualquer de listas de entradas e de saídas, para o problema acima, usaremos apenas 3 listas,
+          ilustradas na tabela abaixo. A primeira coluna tem o numero do par "entradas/saidas", a segunda apresenta a lista de entradas
+          (separadas por espaço em branco), no terceira coluna estão as saídas esperadas (para aquelas entradas) e na última coluna uma
+          explicação curta sobre o par.
+
+          <table class="table about-auto-eval">
+            <thead class="thead-light">
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Entradas</th>
+                <th scope="col">Saídas</th>
+                <th scope="col">Comentários</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>0</td>
+                <td>0 0</td>
+                <td>Esse é um teste capcioso, pois se a primeira entrada for zero, nada será somado (daí deve-se imprimir 0 e 0)</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>1 -1 1 0</td>
+                <td> 2 -1 </td>
+                <td>Apresenta 2 valores positivos e 1 negativo, com somas respectivamente 2 e -1</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>-1 -1 3 1 0</td>
+                <td>4 -2</td>
+                <td>Apresenta 2 valores positivos e 2 negativo, com somas respectivamente 4 e -2</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p>O iVProg dispõe de uma interface especial para que o professor digite cada lista de entrada e sua respectiva lista de saídas.</p>
+
+          <p><span class="octicon octicon-light-bulb"></span> <b> Como o iVProg avalia automaticamente uma solução do aluno?</b></p>
+
+          <p>Supondo que o aluno tenha construído um algoritmo, quando ele "clicar" no botão para avaliar
+          sua solução, o iVProg:</p>
+
+          <ol>
+            <li>Pega a primeira entrada da primeira lista e submete ao primeiro de leitura presente no código do aluno (se não existir, erro), depois a segunda entrada e assim por diante até a última.</li>
+            <li>A primeira saída (comando de impressão) gerada pelo código do aluno é comparada com a primeira saída esperada, se coincidir
+               é registrado um acerto, senão um erro.</li>
+            <li>Repete-se os passos 1 e 2 para cada uma das demais listas de entradas/saídas e ao final é gerada uma média de acertos e erros.
+               <p>Por exemplo, se o algoritmo do aluno errar em 2 das 6 saídas, sua nota será 1/3.</p></li>
+          </ol>
+        </div>
+      </div>
+
+      <div class="container example-large-div autoeval-descript">
+        <div aria-expanded="false" aria-controls="area-autoeval-descript">
+             Experimente os exercícios listados abaixo, de exemplo 1 até exemplo 8.
+             O exemplo 9 ilustra como construir um gabarito para um exercício com avaliação automática no <i>iVProgH</i></div>
+        </div>
+      </div>
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-1" aria-expanded="false" aria-controls="area-exemplo-1"><span class="octicon octicon-rocket"></span>
+            Exemplo 1: Entrada e Saída</div>
+        <div class="example-content collapse" id="area-exemplo-1">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_1_ler_e_imprimir_inteiro_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Faça um programa que solicite do usuário um valor inteiro, depois imprima o valor por ele digitado.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[1]" id="iLM[1]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_1_ler_e_imprimir_inteiro.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(1);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-2" aria-expanded="false" aria-controls="area-exemplo-2"><span class="octicon octicon-rocket"></span>
+            Exemplo 2: Imprimir o quadrado de um número (inteiro)</div>
+        <div class="example-content collapse" id="area-exemplo-2">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_2_imprimir_quadrado_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construa um algoritmo que solicite que o usuário digite um número (inteiro) e imprime o quadrado desse valor.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[2]" id="iLM[2]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_2_imprimir_quadrado.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(2);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+
+       <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-3" aria-expanded="false" aria-controls="area-exemplo-3"><span class="octicon octicon-rocket"></span>
+            Exemplo 3: Soma de dois valores</div>
+        <div class="example-content collapse" id="area-exemplo-3">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_3_soma_dois_valores_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construa um algoritmo que recebe dois números inteiros e imprime a soma desses valores.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[3]" id="iLM[3]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_3_soma_dois_valores.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(3);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-4" aria-expanded="false" aria-controls="area-exemplo-4"><span class="octicon octicon-rocket"></span>
+            Exemplo 4: Média aritmética</div>
+        <div class="example-content collapse" id="area-exemplo-4">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_4_media_aritmetica_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construa um algoritmo que recebe dois números inteiros da entrada, calcula a média aritmética desses números e a imprima.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[4]" id="iLM[4]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_4_media_aritmetica.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(4);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+       <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-5" aria-expanded="false" aria-controls="area-exemplo-5"><span class="octicon octicon-rocket"></span>
+            Exemplo 5: Maior valor</div>
+        <div class="example-content collapse" id="area-exemplo-5">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_5_maior_valor_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construa um algoritmo que recebe dois números inteiros da entrada e imprime o maior dentre os dois números.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[5]" id="iLM[5]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_5_maior_valor.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(5);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-6" aria-expanded="false" aria-controls="area-exemplo-6"><span class="octicon octicon-rocket"></span>
+            Exemplo 6: Sequência</div>
+        <div class="example-content collapse" id="area-exemplo-6">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_6_imprimir_de_1_a_10_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construa um algoritmo que imprima a sequência de números inteiros de 1 a 10.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[6]" id="iLM[6]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_6_imprimir_de_1_a_10.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(6);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-7" aria-expanded="false" aria-controls="area-exemplo-7"><span class="octicon octicon-rocket"></span>
+            Exemplo 7: Imprimir texto</div>
+        <div class="example-content collapse" id="area-exemplo-7">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_7_imprimir_ivprogh_10_vezes_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Construa um algoritmo que imprima a palavra iVProgH 10 vezes.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#' \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[7]" id="iLM[7]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_7_imprimir_ivprogh_10_vezes.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(7);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-8" aria-expanded="false" aria-controls="area-exemplo-8"><span class="octicon octicon-rocket"></span>
+            Exemplo 8: Somar n valores</div>
+        <div class="example-content collapse" id="area-exemplo-8">
+          <button type="button" class="btn btn-primary show-solution" onclick="openSolution('../ex_pt/exerc/exemplo_8_somar_valores_ate_digitar_0_solucao.ivph', this)">Ver solução</button>
+          <p class="text-reduced">
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+          </p>
+          
+          <p class="text-reduced">
+            <b>Fazer um algoritmo que lê uma sequência de números inteiros, somando-os até que um valor 0 seja digitado, nesse momento deve imprimir o valor da soma e parar.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#'\ \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[8]" id="iLM[8]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exemplo_8_somar_valores_ate_digitar_0.ivph&iLM_PARAM_SendAnswer=false&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                       title='Clique aqui para visualizar seu código.'
+                       onclick='javascript:window.submit_iMA_Answer(8);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+      <!-- Para cada exemplo, copiar toda a DIV abaixo e não alterar as classes dos elementos :) -->
+      <div class="container example-large-div">
+        <div class="text-count-example" data-toggle="collapse" href="#area-exemplo-9" aria-expanded="false" aria-controls="area-exemplo-9"><span class="octicon octicon-rocket"></span> Gabarito: Construindo uma atividade</div>
+        <div class="example-content collapse" id="area-exemplo-9">
+          <p class="text-reduced">
+            <b>Nesse exemplo, construa uma atividade, inserindo os casos de teste que serão utilizados para avaliar o algoritmo e configure os recursos que serão disponibilizados para o aluno no iVProgH.</b>
+          </p>
+
+          <div class="container text-center">
+            <form name='formEnvio' id='formEnvio' method='post' action='#'\ \
+                  enctype='multipart/form-data'>
+              <div class="embed-responsive embed-responsive-16by9"> <!-- 4by3 -->
+                <iframe name="iLM[9]" id="iLM[9]" class="embed-responsive-item"
+                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_SendAnswer=true&lang=pt"
+                        allowfullscreen></iframe><br/>
+              </div>
+               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
+                      title='Clique aqui para visualizar seu código.'
+                      onclick='javascript:window.submit_iMA_Answer(9);' /><!-- chama funcao iMA-->
+            </form>
+          </div>
+        </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="../js/jquery.min.js"></script>
+    <script src="../js/bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
+    <script type="text/javascript">
+      $('.example-content').on('shown.bs.collapse', function () {
+        this.parentNode.scrollIntoView();
+      });
+    </script>
+  </body>
+</html>

en/ivprog-html.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
+      <b><a class="navbar-brand" href="#">iVProgH</a></b>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="manual_pt/index.html" title="manual iVProgH">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="ex_pt/index.html">Examples</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="bugs/report.html">Report a bug</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Help</a>
+          </li>
+        </ul>
+        <div class="form-inline my-2 my-lg-0">
+          <img src="img/img_flag_brazil.png">
+          <img src="img/img_flag_usa.png">
+        </div>
+      </div>
+    </nav>
+
+    <main role="main">
+      
+      <div class="container ivprog-container" style="width:900px">
+           <!-- Page Content -->
+      <div class="container" style="margin-top:50px;" >
+
+      <!-- Portfolio Item Heading -->
+      <h1 class="my-4">iVProg - Visual Programming
+        <small>LInE-IME-USP</small>
+      </h1>
+
+      <!-- Portfolio Item Row -->
+      <div class="row">
+
+        <div class="col-md-8">
+          <figure>
+          <img class="img-fluid" width="500px" height="250px" src="img/versao-html.png" alt="Image of iVProg-new version interface">
+            <figcaption align="center"> iVProg HTML version </figcaption>
+</figure>
+        </div>
+
+        <div class="col-md-4">
+          <h3 class="my-3">About iVProg</h3>
+          <p>The iVProgH is a free educational system, implemented in HTML5 (strongly uses JavaScript), is intended for teaching and learning algorithms and programming. Its web version has a scheme for automatic evaluation of exercises. IVProg was designed from a visual model for programming, and can be used since the second cycle of elementary school.</p>
+          <a href="http://www.matematica.br/ivprogh5/manual/"> Go to manual </a>
+        </div>
+
+<button type="button" class="btn btn-primary" style="margin-left:50%;margin-bottom: 30px" onclick="javascript:window.history.go(-1)"> Back</button>
+    </div>
+    <!-- /.container -->
+
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

en/ivprogh/css/ivprog-term.css

@@ -0,0 +1,71 @@
+.ivprog-term-div {
+  background-color: black;
+  width: 100%;
+  height: 12rem;
+  overflow-y: scroll;
+}
+
+.ivprog-term-userText {
+  color: white;
+}
+
+.ivprog-term-info {
+  color: green;
+}
+
+.ivprog-term-error {
+  color: red;
+}
+
+.ivprog-term-input {
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 500;
+  background-color: inherit;
+  border: 0;
+  color: white;
+}
+
+.ivprog-term-div > .ivprog-term-input, .ivprog-term-div > .ivprog-term-userText,
+.ivprog-term-div > .ivprog-term-info, .ivprog-term-div, .ivprog-term-error {
+  padding-left: 20px;
+}
+
+#ivprog-term {
+  border: 1px solid gray;
+  background: black;
+  margin-top: -30px;
+  position: relative;
+  padding: 5px;
+}
+#ivprog-term i {
+  margin-left: 5px;
+  cursor: pointer;
+}
+.div_toggle_console {
+  cursor: pointer;
+}
+.ivprog-term-active {
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1) !important;
+  border: 3px solid rgba(81, 203, 238, 1) !important;
+}
+
+.ivprog-term-div {
+  overflow:scroll;
+}
+
+.ivprog-term-div::-webkit-scrollbar {
+    width: 12px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: green;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}

en/ivprogh/css/ivprog-visual-1.0.css

@@ -0,0 +1,870 @@
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+}
+
+.ui.raised.container.segment.div_to_body {
+  height: 92%;
+  padding: 10px;
+  padding-left: 6px;
+  padding-right: 6px;
+  background-color: #1279c6;
+}
+
+.ivprog_visual_panel {
+	height: 96%;
+	overflow: auto;
+	overflow-x: auto;
+}
+
+.ivprog_textual_code {
+	width: 100%;
+	min-height: 500px;
+	resize: none;
+	background-color: white;
+}
+
+.main_title h2 {
+	margin: 0;
+	color: white;
+}
+.main_title span {
+	font-size: 80%;
+	font-style: italic;
+}
+.ivprog_format_info {
+	cursor: pointer;
+	margin-left: 10px;
+}
+.ivprog_visual_panel {
+	border: 2px solid #A0A0A0;
+	background-color: red;
+}
+
+.ui.container.main_title {
+	float: left;
+	width: 200px;
+}
+.ui.container.content_margin {
+	margin-top: 10px;
+}
+.content_margin .content_sub_margin {
+	display: inline; 
+    margin-left: 34%;
+	margin-top: 50px;
+}
+.ui.icon.menu.center.aligned.container {
+	width: 438px;
+	margin-top: -10px;
+}
+
+.ghost {
+  opacity: .5;
+  background: #C8EBFB;
+}
+
+/* editor visual: **/
+
+.function_signature_div,
+.function_close_div {
+	font-weight: bold;
+	color: black;
+}
+.ui.selection.data_types_dropdown.visible.dropdown>.text:not(.default),
+.ui.selection.parameter_data_types_dropdown.visible.dropdown>.text:not(.default) {
+	font-weight: bold;
+}
+.ui.selection.data_types_dropdown.dropdown,
+.ui.selection.parameter_data_types_dropdown.dropdown {
+	padding-bottom: 0;
+}
+
+.ui.fluid.dropdown.data_types_dropdown {
+	display: inline;
+	width: 150px;
+	border: none;
+	background: none;
+}
+
+.ui.fluid.dropdown.parameter_data_types_dropdown {
+	display: inline;
+	border: none;
+	background: none;
+}
+
+.ui.fluid.dropdown.data_types_dropdown.selection .dropdown.icon,
+.ui.fluid.dropdown.parameter_data_types_dropdown.selection .dropdown.icon {
+	font-size: 1em;
+}
+
+.function_close_div {
+	margin-left: 20px;
+}
+
+.command_div {
+	margin-left: 16px;
+}
+
+.function_draggable_div {
+	width: 16px;
+	float: left;
+}
+
+.function_draggable_div img {
+	margin-bottom: -4px;
+	margin-left: -2px;
+}
+
+.input_name_function{
+	min-width: 50px;
+}
+
+.text_attr_receives {
+	margin-left: 20px;
+	margin-right: 20px;
+}
+
+.menu_operations {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.case_commands_block {
+	/*border: 1px solid red;*/
+}
+
+.context_menu {
+	display: inline;
+	float: right; 
+	margin-right: 25px;
+	margin-top: -4px;
+}
+
+.case_div {
+	border: 1px solid gray;
+	margin-left: 30px;
+	padding-left: 5px;
+	margin-top: 5px;
+}
+
+.function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
+.expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
+.expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression,
+.incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var, .parameter_div_edit,
+.all_elements_write, .container_var_element_control, .inline_add_command, .restart_expression, .div_parent_handler, .div_drag_writer {
+	display: inline;
+}
+
+.conditional_comands_block {
+	min-height: 10px;
+}
+
+.div_comment_text {
+	min-width: 100px;
+	font-style: italic;
+}
+
+.enable_edit_name_function, .add_parameter, .remove_parameter, .add_parameter_button, .remove_variable {
+	cursor: pointer;
+}
+
+[contenteditable="true"]:active,
+[contenteditable="true"]:focus,
+[contenteditable="true"]:hover {
+	border: 1px dashed #000;
+	background: white;
+}
+
+.ui.segment.ivprog_visual_panel {
+	padding: 3px;
+	margin-top: -5px;
+	background: white;
+}
+
+.ui.segment.function_div {
+	padding: 5px;
+	margin: 0;
+	margin-bottom: 5px;
+	background-color: #bddbff;
+}
+
+.ui.button.add_function_button,
+.ui.button.add_variable_button,
+.ui.button.add_command_button {
+	padding: 8px;
+	margin: 0;
+}
+
+.glyphicon-move {
+  cursor: move;
+  cursor: -webkit-grabbing;
+}
+
+.glyphicon.glyphicon-move {
+	float: left;
+}
+
+.remove_function_button, .minimize_function_button, .add_var_top_button, .add_command_top_button {
+	float: right;
+}
+
+.ui.icon.button.remove_function_button,
+.ui.icon.button.minimize_function_button {
+	background: none;
+	padding: 0;
+	margin-top: 12px;
+}
+
+.ui.segment.variables_list_div,
+.ui.segment.commands_list_div {
+	padding: 5px;
+	margin: 0;
+	margin-left: 30px;
+	width: calc(100% - 30px);
+	background-color: #f9f9f9;
+	min-height: 30px;
+}
+
+.ui.segment.variables_list_div {
+	margin-top: 5px;
+}
+
+.ui.labeled.icon.button.add_variable_button,
+.ui.labeled.icon.button.add_command_button {
+	
+}
+
+.program_signature {
+	font-weight: bold;
+	margin: -3px 0 10px -5px;
+}
+
+.program_final {
+	font-weight: bold;
+	margin: 5px 0 0 -5px;
+}
+
+.parameters_list {
+	display: inline;
+}
+
+.parameter_type {
+	margin-left: 10px;
+    margin-right: 15px;
+}
+
+.function_return .dropdown .icon, .parameter_type .dropdown .icon {
+	margin-left: 6px;
+}
+.tabela_var {
+	display: inline;
+}
+.buttons_manage_columns i, .tr_manage_lines i {
+	cursor: pointer;
+	display: inline;
+}
+div.buttons_manage_columns {
+	display: inline;
+}
+.tr_manage_lines {
+	text-align: center;
+}
+.div_valor_var {
+	display: inline;
+}
+.ui.comment span {
+	font-style: italic;
+}
+.ui.comment, .ui.reader, .ui.writer, .ui.attribution, .ui.iftrue, .ui.repeatNtimes, .ui.whiletrue, .ui.dowhiletrue, .ui.switch, .ui.functioncall,
+.ui.return {
+	padding: 5px;
+	margin: 5px;
+	background: #f7f2c9;
+    border: 2px solid #4d4be3;
+    border-radius: 0.25em;
+    box-shadow: 1px 1px;
+}
+.ui.repeatNtimes .separator_character {
+	margin-right: 10px;
+}
+.ui.repeatNtimes, .ui.whiletrue {
+    min-height: 50px;
+}
+.ui.dowhiletrue .ui.block_commands {
+	min-height: 10px;
+}
+.add_var_top_button {
+	padding-right: 50px;
+}
+
+.function_signature_div {
+	min-height: 40px;
+	padding-top: 8px;
+}
+
+.move_function {
+	margin-top: 9px;
+}
+
+.div_start_minimize_v {
+	float: right;
+	width: 22px; 
+	height: 10px;
+}
+
+.global_var {
+	margin-bottom: 7px;
+}
+
+.list_globals, .global_const {
+	display: inline;
+}
+
+.created_element {
+	position: absolute;
+	width: 50%;
+	z-index: 99999999;
+	opacity: .8;
+	cursor: move;
+}
+
+.width-dynamic {
+	min-width: 100px;
+}
+
+.ui.icon.plus.square.outline.icon_add_item_to_writer {
+	margin-right: 10px;
+	margin-left: 10px;
+	cursor: pointer;
+}
+
+.button_remove_command, .button_refresh_attribution {
+	float: right;
+	cursor: pointer;
+}
+
+.expression_drag {
+	cursor: col-resize;
+	border: 2px gray solid;
+	display: inline;
+	width: 5px;
+}
+
+.ui.icon.red.exclamation.triangle.error_icon {
+	float: left;
+    margin-left: -1.6em;
+    z-index: 10;
+    position: absolute;
+    font-size: 1.5em;
+}
+
+.height_100 {
+  height: 100%;
+}
+
+.default_visual_title {
+  display: none;
+}
+
+.expandingArea textarea {
+	min-height: 30px;
+	resize: none;
+	padding: 5px;
+}
+
+.ui table .btn_actions {
+	text-align: center;
+}
+
+.button_remove_case {
+	cursor: pointer;
+	padding: 3px;
+}
+
+.ui.button_add_case {
+	margin-top: 10px;
+}
+.accordion {
+	margin: auto;
+}
+
+.global_container:hover, 
+.variable_container:hover {
+	border: 2px solid gray;
+	padding-left: 8px;
+	padding-right: 8px;
+	padding-top: 5px;
+	padding-bottom: 4px;
+}
+
+.ui.label.function_name_parameter:hover {
+	border: 2px solid gray;
+	padding: 5px 6px 5px 6px;
+}
+
+.ui.label.function_name_parameter {
+	padding: 7px 8px 7px 8px;
+}
+
+.global_container:hover,  .variable_container:hover {
+	margin-bottom:  4px !important;
+}
+
+.global_container .global_type, .editing_name_var, .global_container .span_value_variable,
+.variable_container .variable_type,  .variable_container .span_value_variable,
+.ui.dropdown.function_return, div.function_name_div_updated,
+.ui.dropdown.parameter_type, .parameter_div_edit {
+	background: #cecece;
+	border-radius: 5px;
+	padding: 4px;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+.parameter_div_edit {
+	padding-bottom: 2px;
+	padding-top: 2px;
+}
+.ui.dropdown.parameter_type {
+
+}
+div.function_name_div_updated {
+	padding-top: 5px;
+	padding-bottom: 5px;
+	margin-right: 10px;
+}
+.function_name_div_updated .name_function_updated {
+	padding-left: 10px;
+    padding-right: 10px;
+}
+.variable_container .variable_type {
+	padding: 5px;
+	margin-left: 0;
+	margin-right: 3px;
+}
+
+.global_container .global_type:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover, .variable_container .span_value_variable:hover,
+.ui.dropdown.function_return:hover, div.function_name_div_updated:hover,
+.ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
+	background: #848484;
+	color: #fff;
+	z-index: 999999;
+}
+
+.editing_name_var {
+	min-width: 40px;
+	padding-top: 3px;
+	padding-bottom: 3px;
+}
+
+.global_container .global_type:active, 
+.variable_container .variable_type:active,
+.ui.dropdown.function_return:active, 
+div.function_name_div_updated:active,
+.ui.dropdown.parameter_type:active {
+	background: #636363;
+	color: #fff;
+}
+
+.global_container i {
+	cursor: pointer;
+}
+
+.global_container .ui.icon.plus.square.outline, .global_container .ui.icon.minus.square.outline {
+	font-size: 120%;
+}
+
+.character_equals {
+	vertical-align: sub;
+    font-size: 150%;
+}
+
+.yellow.icon.times.remove_global,
+.yellow.icon.times.remove_variable,
+.yellow.icon.times.remove_parameter {
+	float: right;
+    margin-right: -1px;
+    margin-left: 8px;
+    opacity: 0;
+}
+
+.global_container:hover > .yellow.icon.times.remove_global, .variable_container:hover > .yellow.icon.times.remove_variable,
+.function_name_parameter:hover > .yellow.icon.times.remove_parameter {
+	opacity: 1;
+}
+
+.tr_manage_lines {
+	padding-top: 10px;
+}
+
+.ui.icon.button.add-globalVar-button.add_global_button {
+	padding: 7px;
+    margin-bottom: 4px;
+    padding-bottom: 9px;
+}
+.all_functions {
+	margin-top: -5px;
+}
+.only_in_frame {
+	position: absolute;
+    z-index: 9999;
+    width: 90px;
+    top: 5px;
+    left: 5px;
+    opacity: .6;
+}
+.only_in_frame:hover {
+	opacity: 1;
+}
+.only_in_frame:hover span {
+	display: block;
+}
+.only_in_frame span {
+	display: none;
+	margin-top: -5px;
+}
+.ui.container.main_title {
+	width: 85px;
+}
+.ui.label.global_container {
+	margin-bottom: 3px;
+}
+.ui.label.variable_container {
+	margin-bottom: 3px;
+}
+.created_div_valor_var {
+	display: inline-block;
+}
+.ui.dropdown.function_return {
+	padding-left: 15px;
+    padding-right: 15px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+.parethesis_function {
+	font-size: 120%;
+}
+
+.var_value_menu_div,
+.attribution .var_attributed,
+.component_element,
+.conditional_expression .expression_element,
+.menu_start_rendered,
+.attribution_expression .variable_attribution,
+.render_style_param,
+.attribution_expression .div_expression_st:not(:empty),
+.incrementation_field .incrementation_variable,
+.incrementation_field .first_operand:not(:empty),
+.incrementation_field .operator:not(:empty),
+.incrementation_field .second_operand:not(:empty) {
+	background: #e8e8e8;
+	border-radius: 5px;
+	min-width: 40px;
+	padding: 2px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 1px solid gray;
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
+    color: black;
+}
+.menu_start_rendered {
+	padding-left: 12px;
+}
+.menu_start_rendered i {
+	width: 1.5em;
+    margin-right: -1em;
+}
+.row_container:hover, .column_container:hover {
+	background: #cecece;
+}
+
+.column_container, .row_container {
+	border-radius: 4px;
+    border: 1px solid gray;
+    padding: 1px 2px 1px 2px;
+    background: #e8e8e8;
+
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
+}
+
+.var_value_menu_div div i {
+	color: black;
+}
+
+.span_command_spec {
+	color: black;
+	font-weight: bold;
+	font-size: 110%;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	display: inline-block;
+	width: 93%;
+}
+
+.ui.comment.command_container .var_value_menu_div .variable_rendered,
+.ui.comment.command_container .var_value_menu_div .value_rendered {
+    width: 100%;
+    cursor: text;
+    font-style: italic;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	cursor: text;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	background: none;
+	border-radius: 0;
+    border: 0px solid gray;
+    box-shadow: none;
+    padding: 0px;
+    font-size: 110%;
+}
+.ui.comment.command_container .var_name,
+.ui.comment.command_container .value_rendered {
+	color: rgba(0,0,0,.6);
+}
+.ui.comment.command_container .var_value_menu_div input {
+    width: 100%;
+    display: inline-block;
+    font-style: italic;
+}
+.ui.dropdown.menu_start_rendered .text i {
+    padding-right: 8px;
+}
+
+* {
+	font-family: 'Roboto', sans-serif;
+}
+
+.add_global_button i {
+	font-size: 130%;
+}
+
+.global_var .circle.add_global_button, .global_var i.back,
+.ui.add_var_context .icon.plus.circle, .ui.add_var_context .icon.circle.back,
+.ui.rail .icon.plus.circle, .ui.rail .icon.circle.back {
+	position: absolute;
+}
+.global_var .circle.add_global_button,
+.ui.add_var_context .icon.plus.circle,
+.ui.rail .icon.plus.circle {
+	z-index: 10;
+	color: #bf80d4!important;
+	cursor: pointer;
+	font-style: 120%;
+}
+.global_var i.back,
+.ui.add_var_context .icon.circle.back,
+.ui.rail .icon.circle.back {
+	z-index: 9;
+	color: white !important;
+}
+.ui.add_var_context{
+	margin-left: -4px;
+}
+.ui.rail {
+	color: #ab0054 !important;
+}
+
+.ui.add_var_context .icon.superscript {
+	font-size: 110%;
+}
+.ui.add_var_context .ui.icon.button.purple {
+	padding: 8px;
+}
+
+.global_container .global_const, .global_container .global_type,
+.variable_container .variable_type {
+	font-size: 114%;
+}
+.global_container .editing_name_var,
+.variable_container .editing_name_var {
+	font-size: 108%;
+}
+.global_container .global_const i {
+	font-size: 120%;
+}
+.global_container .span_value_variable,
+.variable_container .span_value_variable {
+    font-size: 110%;
+}
+.global_container .global_type, .global_container .editing_name_var, .global_container .span_value_variable,
+.variable_container .variable_type,  .variable_container .span_value_variable, .variable_container .editing_name_var,
+.ui.dropdown.parameter_type, .parameter_div_edit {
+	background: black;
+	border-radius: 5px;
+	padding: 4px;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+.global_container .global_type:hover, .global_container .editing_name_var:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover,  .variable_container .span_value_variable:hover, .variable_container .editing_name_var:hover,
+.ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
+	background-color: #545353;
+}
+.yellow.icon.times.remove_global,
+.yellow.icon.times.remove_variable {
+	color: yellow;
+	font-size: 125%;
+}
+.ui.rail .icon.plus.circle {
+	color: #ec9962 !important;
+}
+.ui.rail .icon.plus.circle, 
+.ui.rail .icon.circle.back,
+.ui.add_var_context .icon.plus.circle, 
+.ui.add_var_context .icon.circle.back,
+.global_var .icon.plus.circle, 
+.global_var .icon.circle.back {
+	left: 1.8em !important;
+	margin-top: 1.5em !important;
+}
+
+.ui.rail .icon.plus.circle, 
+.ui.rail .icon.circle.back {
+	left: 1.3em !important;
+}
+
+.ui.icon.button.dropdown.menu_commands {
+    color: white;
+    margin-left: -4px;
+    padding: 8px;
+    margin-top: 0.3em;
+}
+
+.ui.dropdown.variable_type {
+	padding: 5px;
+}
+
+.global_var .global_container .ellipsis,
+.variable_container .ui.icon.ellipsis.vertical.inverted,
+.ui.label.function_name_parameter.pink .ui.icon.ellipsis.vertical.inverted {
+	position: relative;
+    margin-left: -3px;
+    margin-right: 4px;
+    opacity: 0;
+    cursor: move;
+    font-size: 120%;
+}
+
+.global_container:hover > .ellipsis,
+.variable_container:hover > .ui.icon.ellipsis.vertical.inverted {
+	opacity: 1;
+}
+
+.glyphicon.glyphicon-move.move_function i {
+	font-size: 130%;
+}
+
+.span_name_parameter.label_enable_name_parameter {
+	font-size: 94%;
+    font-weight: 700;
+}
+
+.ui.dropdown.parameter_type {
+	font-size: 96%;
+}
+.ui.label.function_name_parameter .ellipsis {
+	font-size: 96% !important;
+	margin-left: .05em !important;
+}
+.ui.label.function_name_parameter:hover > .ellipsis {
+	opacity: 1 !important;
+}
+
+.command_drag {
+	cursor: move;
+}
+.command_container.over_command_drag {
+	border: 3px dotted blue !important;
+	padding: 0.315em !important;
+}
+.commands_list_div.over_command_drag {
+	border: 3px dotted blue !important;
+	padding: 0.2em !important;
+}
+.ui.segment:first-child {
+	margin-top: 1em !important;
+}
+div.ui.checkbox.transition.visible {
+	margin-bottom: 1em;
+}
+.var_menu_select_content_error {
+	background: #ff0000;
+    color: white !important;
+    border: 2px solid #3125ee;
+}
+
+.ui.iftrue, .ui.repeatNtimes, .ui.whiletrue, .ui.dowhiletrue, .ui.switch {
+    background: #787fe721;
+}
+.ui.popup.invalid-identifier {
+	background: #ff3232;
+    color: white;
+    font-weight: bold;
+    border: 1px solid black;
+}
+.ui.popup.invalid-identifier:before {
+	background: #ff3232;
+	border-right: 1px solid black;
+    border-bottom: 1px solid black;
+}
+.ui.popup.invalid-identifier i.ui.icon.inverted.exclamation.triangle.yellow {
+	margin-left: -.5em;
+    margin-right: .4em;
+}
+.ui.repeatNtimes.command_container .ui.block_commands, 
+.ui.whiletrue.command_container .ui.block_commands {
+	margin-top: .8em;
+}
+
+.ui.restart_expression {
+	margin-left: .4em;
+    cursor: pointer;
+    color: brown;
+}
+
+.div_parent_handler {
+	padding-top: 5px;
+    padding-bottom: 6px;
+    background: #7a7acf;
+    border-radius: 4px;
+}
+
+.div_parent_handler i.times {
+	margin-left: .3em;
+	cursor: pointer;
+}
+
+.div_parent_handler i.ellipsis {
+	cursor: move;
+}
+
+.div_parent_handler i.handler {
+	opacity: 0;
+}
+
+.div_parent_handler:hover i.handler {
+	opacity: 1;
+}
+
+.ui.block_commands {
+    min-height: 20px !important;
+    padding-top: 5px !important;
+}
+
+.ghost_div {
+
+    height: 20px;
+    background-color: #ffffff;
+    margin: 5px;
+    border: 2px dotted #000000;
+    box-shadow: 1px 1px;
+    height: 28px;
+}

en/ivprogh/index.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="cache-control" content="no-store">
+    <meta http-equiv="cache-control" content="max-age=0">
+    <meta http-equiv="expires" content="-1">
+    <meta http-equiv="pragma" content="no-cache">
+    <title></title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
+    <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
+    <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
+    <script src="js/jquery-3.3.1.min.js"></script>
+    <script src="js/iassign-integration-functions.js"></script>
+    <script src="build/ivprog.bundle.js"></script>
+    <script src="js/semantic/semantic.min.js"></script>
+    <script src="js/semantic/semantic-buttons.js"></script>
+
+    <script src="js/jquery-ui.js"></script>
+    <script src="js/Sortable.js"></script>
+    
+  </head>
+  <body>
+
+    <div class="ui height_100 add_accordion" id="ui_main_div">
+
+      <div class="title default_visual_title">
+        <i class="dropdown icon"></i>
+      </div>
+
+    <div class="content height_100">
+   
+      <div class="ui raised container segment div_to_body">
+
+        <div class="ui container main_title only_in_frame">
+          <h2>iVProg</h2>
+        </div>
+
+        <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -20px;">
+          <a class="item active visual_coding_button">
+            <i class="window maximize outline icon"></i>
+          </a>
+          <a class="item textual_coding_button">
+            <i class="code icon"></i>
+          </a>
+          <a class="item upload_file_button disabled">
+            <i class="upload icon"></i>
+          </a>
+          <a class="item download_file_button disabled">
+            <i class="download icon"></i>
+          </a>
+          <a class="item undo_button disabled">
+            <i class="undo icon"></i>
+          </a>
+          <a class="item redo_button disabled">
+            <i class="redo icon"></i>
+          </a>
+          <a class="item run_button">
+            <i class="play icon"></i>
+          </a>
+          <a class="item assessment assessment_button">
+            <i class="check icon"></i>
+          </a>
+          <!--<a class="item expand_button">
+            <i class="expand arrows alternate icon"></i>
+          </a>-->
+          <a class="item help_button">
+            <i class="help icon"></i>
+          </a>
+        </div>
+
+        <div class="ui one column container segment ivprog_visual_panel loading">
+
+          <div class="global_var">
+            <i class="icon plus circle purple add_global_button"></i>
+            <i class="icon circle white back"></i>
+
+            <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i></div>
+
+            <div class="list_globals" id="listGlobalsHandle"></div>
+
+          </div>
+
+          <div class="all_functions list-group" id="listWithHandle">
+
+          </div>
+
+
+          <div class="ui teal small labeled icon button add_function_button">
+            <data class="i18n" value="ui:btn_function">Function</data>
+            <i class="add icon"></i>
+          </div>
+          <div class="program_final"></div>
+
+        </div>
+
+
+        <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
+          <textarea class="ivprog_textual_code" readonly></textarea>
+        </div>
+
+        <div id='ivprog-term' class="six column wide">
+          <div class="div_toggle_console"><i class="inverted terminal icon green button_toggle_console"></i></div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+    <script>
+      $(document).ready(() => {
+        ivprogCore.LocalizedStrings.updateTagText();
+        ivprogCore.initVisualUI();
+        prepareEnvironment();
+      });
+    </script>
+
+  </body>
+</html>

en/ivprogh/js/assessment/ivprogAssessment.js

@@ -0,0 +1,124 @@
+import { IVProgParser } from "./../ast/ivprogParser";
+import { SemanticAnalyser } from "./../processor/semantic/semanticAnalyser";
+import { IVProgProcessor } from "./../processor/ivprogProcessor";
+import { InputTest } from "./../util/inputTest";
+import { OutputTest } from "./../util/outputTest";
+import * as LocalizedStringsService from "../services/localizedStringsService";
+import { Decimal } from 'decimal.js';
+import { Config } from "../util/config";
+
+const LocalizedStrings = LocalizedStringsService.getInstance();
+
+export class IVProgAssessment {
+
+  constructor (textCode, testCases, domConsole) {
+    this.textCode = textCode;
+    this.testCases = testCases;
+    this.domConsole = domConsole;
+  }
+
+  runTest () {
+    try {
+      // try and show error messages through domconsole
+      const parser = IVProgParser.createParser(this.textCode);
+      const semantic = new SemanticAnalyser(parser.parseTree());
+      const validTree = semantic.analyseTree();
+      // loop test cases and show messages through domconsole
+      const partialTests = this.testCases.map( (t, name) => {
+        return this.partialEvaluateTestCase(new IVProgProcessor(validTree), t.input, t.output, name);
+      });
+      const testResult = partialTests.reduce((acc, curr) => acc.then(curr), Promise.resolve(0));
+      return testResult.then(total => Promise.resolve(total / this.testCases.length))
+        .catch(err => {
+          this.domConsole.err("Erro durante a execução do programa");// try and show error messages through domconsole
+          this.domConsole.err(err.message);
+          return Promise.resolve(0);
+      });
+    } catch (error) {
+      this.domConsole.err("Erro durante a execução do programa");// try and show error messages through domconsole
+      this.domConsole.err(error.message);
+      return Promise.resolve(0);
+    }
+  }
+
+  evaluateTestCase (prog, inputList, outputList, name, accumulator) {
+    const outerThis = this;
+    const input = new InputTest(inputList);
+    const output = new OutputTest();
+    prog.registerInput(input);
+    prog.registerOutput(output);
+    const startTime = Date.now()
+    return prog.interpretAST().then( _ => {
+      const millis = Date.now() - startTime;
+      if (input.inputList.length !== input.index) {
+        outerThis.showErrorMessage('test_case_few_reads', name+1);
+        outerThis.showMessage('test_case_duration', millis);
+        return Promise.resolve(accumulator + 1 * (input.index/inputList.length));
+      } else if (output.list.length < outputList.length) {
+        outerThis.showErrorMessage('test_case_failed', name + 1, inputList.join(','),
+          outputList.join(','), output.list.join(','));
+        outerThis.showMessage('test_case_duration', millis);
+        return Promise.resolve(accumulator + 1 * (output.list.length/outputList.length));
+      } else if (output.list.length > outputList.length) {
+        outerThis.showErrorMessage('test_case_failed', name + 1, inputList.join(','),
+          outputList.join(','), output.list.join(','));
+        outerThis.showMessage('test_case_duration', millis);
+        return Promise.resolve(accumulator + 1 * (outputList.length/output.list.length));
+      } else {
+        const isOk = outerThis.checkOutput(output.list, outputList);
+        if(!isOk) {
+          outerThis.showErrorMessage('test_case_failed', name + 1, inputList.join(','),
+            outputList.join(','), output.list.join(','));
+          outerThis.showMessage('test_case_duration', millis);
+          return Promise.resolve(accumulator);
+        } else {
+          outerThis.showMessage('test_case_success', name + 1);
+          outerThis.showMessage('test_case_duration', millis);
+          return Promise.resolve(accumulator + 1);
+        }
+      }
+    }).catch( error => {
+      outerThis.showErrorMessage('test_case_failed_exception', name + 1, error.message);
+      return Promise.resolve(accumulator);
+    });
+  }
+
+  partialEvaluateTestCase (prog, inputList, outputList, name) {
+    return this.evaluateTestCase.bind(this, prog, inputList, outputList, name);
+  }
+
+  checkOutput (aList, bList) {
+    for (let i = 0; i < aList.length; i++) {
+      const outValue = aList[i];
+      let castNumberA = parseFloat(outValue);
+      if(!Number.isNaN(castNumberA)) {
+        let castNumberB = parseFloat(bList[i]);
+        if(Number.isNaN(castNumberB)) {
+          return false;
+        }
+        castNumberA = new Decimal(castNumberA);
+        castNumberB = new Decimal(castNumberB);
+        const decimalPlaces = Math.min(castNumberB.dp(), Config.decimalPlaces);
+        Decimal.set({ rounding: Decimal.ROUND_FLOOR});
+        castNumberA = new Decimal(castNumberA.toFixed(decimalPlaces));
+        castNumberB = new Decimal(castNumberB.toFixed(decimalPlaces));
+        const aEqualsB = castNumberA.eq(castNumberB);
+        Decimal.set({ rounding: Decimal.ROUND_HALF_UP});
+        if (!aEqualsB) {
+          return false;
+        }
+      } else if(outValue != bList[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  showErrorMessage (errorID, ...args) {
+    this.domConsole.err(LocalizedStrings.getError(errorID, args));
+  }
+
+  showMessage (msgID, ...args) {
+    this.domConsole.info(LocalizedStrings.getMessage(msgID, args));
+  }
+}

en/ivprogh/js/ast/ASA.txt

@@ -0,0 +1,47 @@
+/*
+  Raiz(ASA)
+    |
+    |
+  DeclaraçõesGlobais + Funções
+
+  DeclaracaoGlobal
+    |
+    |
+  const? TIPO ID (= EAnd)?
+
+  Função
+    |
+    |
+  Declaracao => TIPO ID (= EAnd)?
+  Attribuição => ID = EAnd
+  IF, WHILE, SWITCH, FuncCall, RETURN
+
+  EAnd
+    |
+    |
+  EOR ( 'and' EAnd)?
+
+  EOR   => ENot ('or' EAnd)?
+
+  ENot  => 'not'? ER
+
+  ER    => E ((>=, <=, ==, >, <) E)?
+
+  E     => factor ((+, -) E)?
+
+  factor=> term ((*, /, %) factor)?
+
+  term  => literal || arrayAccess || FuncCall || ID || '('EAnd')'
+
+  arrayAccess
+    |
+    |
+  ID'['E']'('['E']')*
+
+  FuncCall
+    |
+    |
+  ID'('p.a')'
+
+  p.a => E (, p.a)?
+**/

en/ivprogh/js/ast/commands/arrayAssign.js

@@ -0,0 +1,10 @@
+import { Assign } from './assign';
+
+export class ArrayIndexAssign extends Assign {
+
+  constructor (id, lineExpression, columnExpression, expression) {
+    super(id, expression);
+    this.line = lineExpression;
+    this.column = columnExpression;
+  }
+}

en/ivprogh/js/ast/commands/arrayDeclaration.js

@@ -0,0 +1,10 @@
+import { Declaration } from './declaration';
+
+export class ArrayDeclaration extends Declaration {
+
+  constructor (id, type, lines, columns, initial, isConst)   {
+    super(id, type, initial, isConst);
+    this.lines = lines;
+    this.columns = columns;
+  }
+}

en/ivprogh/js/ast/commands/assign.js

@@ -0,0 +1,10 @@
+import { Command } from './command';
+
+export class Assign extends Command {
+  
+  constructor (id, expression) {
+    super();
+    this.id = id;
+    this.expression = expression;
+  }
+}

en/ivprogh/js/ast/commands/break.js

@@ -0,0 +1,8 @@
+import { Command } from './command';
+
+export class Break extends Command {
+
+  constructor () {
+    super();
+  }
+}

en/ivprogh/js/ast/commands/case.js

@@ -0,0 +1,18 @@
+import { Command } from './command';
+
+export class Case extends Command {
+
+  constructor (expression) {
+    super();
+    this.expression = expression;
+    this.commands = [];
+  }
+
+  setCommands (commands) {
+    this.commands = commands;
+  }
+
+  get isDefault () {
+    return this.expression === null;
+  }
+}

en/ivprogh/js/ast/commands/command.js

@@ -0,0 +1,14 @@
+export class Command {
+
+  constructor () {
+    this._sourceInfo = null;
+  }
+
+  set sourceInfo (sourceInfo) {
+    this._sourceInfo = sourceInfo;
+  }
+
+  get sourceInfo () {
+    return this._sourceInfo;
+  }
+}

en/ivprogh/js/ast/commands/commandBlock.js

@@ -0,0 +1,16 @@
+export class CommandBlock {
+	
+	constructor(variables, commands) {
+		this.variables = variables;
+		this.commands = commands;
+		this._sourceInfo = null;
+	}
+
+	set sourceInfo (sourceInfo) {
+		this._sourceInfo = sourceInfo;
+	}
+
+	get sourceInfo () {
+		return this._sourceInfo;
+	}
+}

en/ivprogh/js/ast/commands/declaration.js

@@ -0,0 +1,12 @@
+import { Command } from './command';
+
+export class Declaration extends Command {
+  
+  constructor (id, type, initial, isConst) {
+    super();
+    this.id = id;
+    this.type = type;
+    this.initial = initial;
+    this.isConst = isConst;
+  }
+}

en/ivprogh/js/ast/commands/doWhile.js

@@ -0,0 +1,13 @@
+import { While } from './while';
+
+export class DoWhile extends While {
+
+  constructor(condition, commandBlock) {
+    super(condition, commandBlock);
+  }
+
+  get testFirst () {
+    return false;
+  }
+  
+}

en/ivprogh/js/ast/commands/for.js

@@ -0,0 +1,16 @@
+import { Command } from './command';
+
+export class For extends Command {
+
+  constructor (assignment, condition, increment, commandBlock) {
+    super();
+    this.assignment = assignment;
+    this.condition = condition;
+    this.increment = increment;
+    this.commandBlock = commandBlock;
+  }
+
+  get commands () {
+    return this.commandBlock.commands;
+  }
+}

en/ivprogh/js/ast/commands/formalParameter.js

@@ -0,0 +1,17 @@
+export class FormalParameter {
+
+  constructor (type, id, byRef = false) {
+    this.type = type;
+    this.id = id;
+    this.byRef = byRef;
+    this._sourceInfo = null;
+  }
+
+  set sourceInfo (sourceInfo) {
+		this._sourceInfo = sourceInfo;
+	}
+
+	get sourceInfo () {
+		return this._sourceInfo;
+	}
+}

en/ivprogh/js/ast/commands/function.js

@@ -0,0 +1,32 @@
+import { Types } from './../../typeSystem/types';
+
+export class Function {
+
+  constructor(name, returnType, formalParameters, commandBlock) {
+    this.name = name;
+    this.returnType = returnType;
+    this.formalParameters = formalParameters;
+    this.commandBlock = commandBlock;
+    this._sourceInfo = null;
+  }
+
+  get isMain () {
+    return this.name === null && this.returnType.isCompatible(Types.VOID);
+  }
+
+  get commands () {
+    return this.commandBlock.commands;
+  }
+
+  get variablesDeclarations () {
+    return this.commandBlock.variables;
+  }
+
+  set sourceInfo (sourceInfo) {
+		this._sourceInfo = sourceInfo;
+	}
+
+	get sourceInfo () {
+		return this._sourceInfo;
+	}
+}

en/ivprogh/js/ast/commands/ifThenElse.js

@@ -0,0 +1,11 @@
+import { Command } from './command';
+
+export class IfThenElse extends Command {
+
+  constructor (condition, ifTrue, ifFalse) {
+    super();
+    this.condition = condition;
+    this.ifTrue = ifTrue;
+    this.ifFalse = ifFalse;
+  }
+}

en/ivprogh/js/ast/commands/index.js

@@ -0,0 +1,37 @@
+import { Break } from './break';
+import { Return } from './return';
+import { Assign } from './assign';
+import { ArrayIndexAssign } from './arrayAssign';
+import { Declaration } from './declaration';
+import { ArrayDeclaration } from './arrayDeclaration';
+import { While } from './while';
+import { For } from './for';
+import { Function } from './function';
+import { IfThenElse } from './ifThenElse';
+import { CommandBlock } from './commandBlock';
+import { DoWhile } from './doWhile';
+import { Switch } from './switch';
+import { Case } from './case';
+import { SysCall } from './sysCall';
+import { FormalParameter } from './formalParameter';
+import { FunctionCall } from './../expressions/functionCall'; //Proxy to expression since they do exatcly the same thing
+
+export {
+  Break,
+  Return,
+  Assign,
+  ArrayIndexAssign,
+  Declaration,
+  ArrayDeclaration,
+  While,
+  For,
+  Function,
+  IfThenElse,
+  CommandBlock,
+  DoWhile,
+  Switch,
+  Case,
+  SysCall,
+  FormalParameter,
+  FunctionCall
+};

en/ivprogh/js/ast/commands/return.js

@@ -0,0 +1,10 @@
+import { Command } from './command';
+
+export class Return extends Command {
+
+  constructor(expression) {
+    super();
+    this.expression = expression;
+  }
+  
+}

en/ivprogh/js/ast/commands/switch.js

@@ -0,0 +1,10 @@
+import { Command } from './command';
+
+export class Switch extends Command {
+  
+  constructor (expression, cases) {
+    super();
+    this.expression = expression;
+    this.cases = cases;
+  }
+}

en/ivprogh/js/ast/commands/sysCall.js

@@ -0,0 +1,12 @@
+/**
+ * This class represents all the language defined functions.
+ * The language processor uses the id provided here to properly execute the desired function.
+ * The function is actually implemented inside the language processor.
+ * All the functions can be found at: js/processor/definedFunctions.js
+ */
+export class SysCall {
+
+  constructor (langFunc) {
+    this.langFunc = langFunc;
+  }
+}

en/ivprogh/js/ast/commands/while.js

@@ -0,0 +1,18 @@
+import { Command } from './command';
+
+export class While extends Command {
+
+  constructor (expression, commandBlock) {
+    super();
+    this.expression = expression;
+    this.commandBlock = commandBlock;
+  }
+
+  get commands () {
+    return this.commandBlock.commands;
+  }
+
+  get testFirst () {
+  	return true;
+  }
+}

en/ivprogh/js/ast/error/syntaxError.js

@@ -0,0 +1,8 @@
+export class SyntaxError extends Error {
+
+  constructor (...msg) {
+    super(...msg);
+    if(Error.captureStackTrace)
+      Error.captureStackTrace(this, SyntaxError);
+  }
+}

en/ivprogh/js/ast/error/syntaxErrorFactory.js

@@ -0,0 +1,72 @@
+import * as LocalizedStringsService from './../../services/localizedStringsService';
+import { SyntaxError } from './syntaxError';
+
+const LocalizedStrings = LocalizedStringsService.getInstance();
+
+export const SyntaxErrorFactory = Object.freeze({
+  extra_lines: () => new SyntaxError(LocalizedStrings.getError("extra_lines")),
+  token_missing_one: (expected, token) => {
+    const context = [expected, token.text, token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError("token_missing_one", context));
+  },
+  token_missing_list: (expectedList, token) => {
+    const line = expectedList.join(LocalizedStrings.getOR());
+    return SyntaxErrorFactory.token_missing_one(line, token);
+  },
+  id_missing: (token) => {
+    const context = [token.text, token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError("id_missing", context));
+  },
+  eos_missing: (token) => {
+    const context = [token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError("eos_missing", context));
+  },
+  invalid_array_dimension: (typeName, token) => {
+    const context = [token.line, token.column, typeName];
+    return new SyntaxError(LocalizedStrings.getError("invalid_array_dimension", context));
+  },
+  invalid_array_size: (token) => {
+    const context = [token.line];
+    return new SyntaxError(LocalizedStrings.getError("invalid_array_size", context));
+  },
+  invalid_main_return: (name, typeName, token) => {
+    const context = [name, typeName, token.line];
+    return new SyntaxError(LocalizedStrings.getError("invalid_main_return", context));
+  },
+  invalid_var_declaration: (token) => {
+    const context = [token.line];
+    return new SyntaxError(LocalizedStrings.getError("invalid_var_declaration", context));
+  },
+  invalid_break_command: (cmdName, token) => {
+    const context = [token.line, cmdName];
+    return new SyntaxError(LocalizedStrings.getError("invalid_break_command", context));
+  },
+  invalid_terminal: (token) => {
+    const context = [token.text, token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError('invalid_terminal', context));
+  },
+  invalid_type: (list, token) => {
+    const line = list.join(LocalizedStrings.getOR());
+    const context = [token.text, token.line, token.column, line]
+    return new SyntaxError(LocalizedStrings.getError("invalid_type", context));
+  },
+  const_not_init: (token) => {
+    const context = [token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError("const_not_init", context));
+  },
+  invalid_id_format: (token) => {
+    const context = [token.text, token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError("invalid_id_format", context));
+  },
+  duplicate_function: (token) => {
+    const context = [token.text, token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError("duplicate_function", context));
+  },
+  main_parameters: () => {
+    return new SyntaxError(LocalizedStrings.getError("main_parameters"));
+  },
+  duplicate_variable: (token) => {
+    const context = [token.text, token.line, token.column];
+    return new SyntaxError(LocalizedStrings.getError("duplicate_variable", context));
+  }
+});

en/ivprogh/js/ast/expressions/arrayAccess.js

@@ -0,0 +1,24 @@
+import { Expression } from './expression';
+
+export class ArrayAccess extends Expression {
+	
+	constructor (id, line, column) {
+		super();
+		this.id = id;
+		this.line = line;
+		this.column = column;
+	}
+
+	toString () {
+		const strLine = this.line.toString();
+		let strColumn = null;
+		if(this.column) {
+			strColumn = this.column.toString();
+		}
+		if(strColumn) {
+			return `${this.id}[${strLine}][${strColumn}]`;
+		} else {
+			return `${this.id}[${strLine}]`;
+		}
+	}
+}

en/ivprogh/js/ast/expressions/arrayLiteral.js

@@ -0,0 +1,87 @@
+import { Literal } from './literal';
+
+export class ArrayLiteral extends Literal {
+  
+  constructor(type, value) {
+    super(type);
+    this.value = value;
+  }
+
+  get subtype () {
+    let element = this.value[0];
+    if (element instanceof ArrayLiteral) {
+      return element.value[0].type;
+    } else {
+      return element.type;
+    }
+  }
+
+  get lines () {
+    return this.value.length;
+  }
+
+  get columns () {
+    let element = this.value[0];
+    if (!(element instanceof ArrayLiteral)){
+      return null;
+    } else {
+      return element.value[0].length;
+    }
+  }
+
+  get isVector () {
+    return this.columns === null;
+  }
+
+  get isValid () {
+    return true;//this.validateType() && this.validateSize();
+  }
+
+  validateType () {
+    // let valid = true;
+    // if(this.columns !== null) {
+    //   const len = this.columns;
+    //   const len2 = this.lines;
+    //   for (let i = len - 1; i >= 0; i--) {
+    //     for (let j = len2 - 1; j >= 0; j--) {
+    //       if(this.value[i].value[j].type !== this.subtype) {
+    //         valid = false;
+    //         break;
+    //       }
+    //     }
+    //   }
+    // } else {
+    //   const len = this.lines;
+    //   for (var i = len - 1; i >= 0; i--) {
+    //     if(this.value[i].type !== this.subtype) {
+    //       valid = false;
+    //       break;
+    //     }
+    //   }
+    // }
+    return true;//valid;
+  }
+
+  validateSize () {
+    let valid = true;
+    if(this.columns !== null) {
+      const equalityTest = data.value.map(v => v.length)
+      .reduce((old, next) => {
+        if (old === null) {
+          return next;
+        } else if (old === next) {
+          return old
+        } else {
+          return -1;
+        }
+      }, null);
+      valid = equalityTest !== -1;
+    }
+    return valid;
+  }
+
+  toString () {
+    const strList = this.value.map(arrayLiteral => arrayLiteral.toString());
+    return "{" + strList.join(',') + "}";
+  }
+}

en/ivprogh/js/ast/expressions/boolLiteral.js

@@ -0,0 +1,15 @@
+import { Literal } from './literal';
+import { Types } from './../../typeSystem/types';
+import { convertBoolToString } from "./../../typeSystem/parsers";
+
+export class BoolLiteral extends Literal {
+  
+  constructor(value) {
+    super(Types.BOOLEAN);
+    this.value = value;
+  }
+
+  toString () {
+    return convertBoolToString(this.value);
+  }
+}

en/ivprogh/js/ast/expressions/expression.js

@@ -0,0 +1,14 @@
+export class Expression {
+
+  constructor () {
+    this._sourceInfo = null;
+  }
+
+  set sourceInfo (sourceInfo) {
+		this._sourceInfo = sourceInfo;
+	}
+
+	get sourceInfo () {
+		return this._sourceInfo;
+	}
+}

en/ivprogh/js/ast/expressions/functionCall.js

@@ -0,0 +1,36 @@
+import { Expression } from './expression';
+import { LanguageDefinedFunction } from '../../processor/definedFunctions';
+
+export class FunctionCall extends Expression {
+
+	constructor (id, actualParameters) {
+		super();
+		this.id = id;
+		this.actualParameters = actualParameters;
+	}
+
+	get isMainCall () {
+		return this.id === null;
+	}
+
+	get parametersSize () {
+		return this.actualParameters.length;
+	}
+
+	toString () {
+		let name = null;
+		if(this.isMainCall) {
+			name = LanguageDefinedFunction.getMainFunctionName();
+		} else {
+			name = LanguageDefinedFunction.getLocalName(this.id);
+		}
+		let params = null;
+		if(this.actualParameters.length == 0) {
+			params = "()";
+		} else {
+			const strParams = this.actualParameters.map(v => v.toString());
+			params = "(" + strParams.join(",") + ")";
+		}
+		return name + params;
+	}
+}

en/ivprogh/js/ast/expressions/index.js

@@ -0,0 +1,23 @@
+import { ArrayAccess } from './arrayAccess';
+import { FunctionCall } from './functionCall';
+import { IntLiteral } from './intLiteral';
+import { RealLiteral } from './realLiteral';
+import { BoolLiteral } from './boolLiteral';
+import { StringLiteral } from './stringLiteral';
+import { ArrayLiteral } from './arrayLiteral';
+import { VariableLiteral } from './variableLiteral';
+import { InfixApp } from './infixApp';
+import { UnaryApp } from './unaryApp';
+
+export {
+	ArrayAccess,
+	FunctionCall,
+  IntLiteral,
+  RealLiteral,
+  BoolLiteral,
+  StringLiteral,
+  ArrayLiteral,
+  VariableLiteral,
+  InfixApp,
+  UnaryApp
+};