Concluída a parte dos exemplos

css/style.css

@@ -89,6 +89,7 @@ footer.container {
 .example-large-div {
 	background-color: #0bbf4a;
 	border-radius: .8em;
+	margin-top: 0.5em;
 }
 
 .example-large-div .container .embed-responsive {
@@ -103,6 +104,8 @@ footer.container {
     font-weight: 600;
     margin-bottom: .3em;
     padding-top: .3em;
+    padding-bottom: .2em;
+    cursor: pointer;
 }
 .example-large-div .text-reduced {
 	color: #06065a;
@@ -117,4 +120,51 @@ footer.container {
 }
 .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;
 }

download.html

@@ -79,8 +79,8 @@
           </figure>
         </div>
 
-        <div class="col-md-4">
-          <h4 class="my-4">Baixar o iVProgH</h4>
+        <div class="col-md-4 box-download">
+          <h4 class="my-4 ivprogh-title-download"> <span class="octicon octicon-desktop-download"></span> Baixar o iVProgH</h4>
           
           <li>Totalmente gratuito e código livre</li>
           <li>Inclui avaliador automático</li>
@@ -95,9 +95,9 @@
         </div>
       </div>
 
-      <hr>
+      <hr class="distinct-container">
 
-      <h4 class="my-4" style="margin-top: 5px"> <span class="octicon octicon-history"></span> Versões anteriores do iVProg</h4>
+      <h4 class="my-4 ivprogh-title-download" style="margin-top: 5px"> <span class="octicon octicon-history"></span> Versões anteriores do iVProg</h4>
 
       <div class="row">
         <div class="col-md-12">
@@ -108,25 +108,38 @@
           <p>Abaixo, você encontra as versões anteriores, que podem ser baixadas e utilizadas livremente.</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">
-            <img class="img-fluid" src="img/ivjava.png" alt="">
+            <img class="img-fluid zoom-images" src="img/img_ivprog_java_1.png" alt="Versão I - Java">
             <hr>
             <span class="history-ivprog-version">Versão I - Java</span>
             <span class="history-ivprog-time">2009 - 2012</span>
           </div>
           <div class="col-md-3 item">
-            <img class="img-fluid" src="img/ivjava.png" alt="">
+            <img class="img-fluid zoom-images" src="img/img_ivprog_java_2.1.0.png" alt="Versão II - Java">
             <hr>
             <span class="history-ivprog-version">Versão II - Java</span>
             <span class="history-ivprog-time">2013 - 2015</span>
           </div>
           <div class="col-md-3 item">
-            <img class="img-fluid" src="img/ivprog-html.png" alt="">
+            <img class="img-fluid zoom-images" src="img/img_ivprog_html_1.png" alt="Versão III - HTML">
             <hr>
             <span class="history-ivprog-version">Versão III - HTML</span>
             <span class="history-ivprog-time">2016 - 2018</span>
@@ -151,5 +164,19 @@
     <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', ':not(.zoom-images)', function(e) {
+          e.stopPropagation();
+          console.log('teste');
+       });
+  });
+    </script>
   </body>
 </html>

ex_pt/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": 
+[] }

ex_pt/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"}] } 

ex_pt/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"}] } 

ex_pt/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"}] } 

ex_pt/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"}] } 

ex_pt/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"}] } 

ex_pt/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"}] } 

ex_pt/index.html

@@ -76,6 +76,10 @@
       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>
 
@@ -142,31 +146,343 @@
         </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>
+
+      <!-- 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" id="iLM" 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();' /><!-- 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"><span class="octicon octicon-rocket"></span> Exemplo 1</div>
-          
-          <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" id="iLM" class="embed-responsive-item"
-                        src="../ivprogh/index.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=../ex_pt/exerc/exerc_1_1_ler_imprimir_novo.ivph&iLM_PARAM_SendAnswer=false&lang=en"
-                        allowfullscreen></iframe><br/>
-              </div>
-               <input type='button' name='Submit' value='Enviar resposta' class="btn btn-warning" 
-                       title='clique aqui para vesualizar seu codigo'
-                       onclick='javascript:window.submit_iMA_Answer();' /><!-- chama funcao iMA-->
-            </form>
+          <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: Quadrado de um número</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 recebe 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" id="iLM" 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();' /><!-- 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" id="iLM" 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();' /><!-- 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" id="iLM" 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();' /><!-- 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" id="iLM" 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();' /><!-- 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" id="iLM" 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();' /><!-- 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" id="iLM" 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();' /><!-- 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" id="iLM" 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();' /><!-- 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" id="iLM" 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();' /><!-- chama funcao iMA-->
+              </form>
+            </div>
           </div>
       </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
 
@@ -180,5 +496,10 @@
     <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>

ivprogh/css/ivprog-visual-1.0.css

@@ -787,4 +787,7 @@ div.function_name_div_updated:active,
 }
 .ui.segment:first-child {
 	margin-top: 1em !important;
+}
+div.ui.checkbox.transition.visible {
+	margin-bottom: 1em;
 }

ivprogh/i18n/en/ui.json

@@ -76,6 +76,9 @@
   "text_menu_functions_text":"Text",
   "text_menu_functions_arrangement":"Arrangement",
   "text_menu_functions_conversion":"Conversion",
+  "text_none_variable":"There is no declared variable",
+  "text_none_variable_instruction":"Create a new variable to use it",
+  "text_ivprog_description":"Interactive Visual Programming on the Internet",
   "tooltip_visual": "Visual programming",
   "tooltip_textual": "Textual programming",
   "tooltip_upload": "Upload code file",
@@ -121,5 +124,6 @@
   "$castReal": "to_real",
   "$castInt": "to_integer",
   "$castBool": "to_logic",
-  "$castString": "to_string"
+  "$castString": "to_string",
+  "text_ivprog_version":"Version 2018_12_19 Build 13_18"
 }

ivprogh/i18n/es/ui.json

@@ -76,6 +76,9 @@
   "text_menu_functions_text":"Text",
   "text_menu_functions_arrangement":"Arrangement",
   "text_menu_functions_conversion":"Conversion",
+  "text_none_variable":"There is no declared variable",
+  "text_none_variable_instruction":"Create a new variable to use it",
+  "text_ivprog_description":"Interactive Visual Programming on the Internet",
   "tooltip_visual": "Visual programming",
   "tooltip_textual": "Textual programming",
   "tooltip_upload": "Upload code file",
@@ -126,5 +129,6 @@
   "$castReal": "to_real",
   "$castInt": "to_integer",
   "$castBool": "to_logic",
-  "$castString": "to_string"
+  "$castString": "to_string",
+  "text_ivprog_version":"Version 2018_12_19 Build 13_18"
 }

ivprogh/i18n/pt/ui.json

@@ -82,6 +82,9 @@
   "text_menu_functions_text":"Texto",
   "text_menu_functions_arrangement":"Arranjo",
   "text_menu_functions_conversion":"Conversão",
+  "text_none_variable":"Nenhuma variável declarada",
+  "text_none_variable_instruction":"Antes de utilizar uma variável, é necessário criá-la",
+  "text_ivprog_description":"Programação Visual interativa na Internet",
   "tooltip_visual": "Programação visual",
   "tooltip_textual": "Programação textual",
   "tooltip_upload": "Upload de código fonte",
@@ -128,5 +131,6 @@
   "$castReal": "como_real",
   "$castInt": "como_inteiro",
   "$castBool": "como_logico",
-  "$castString": "como_cadeia"
+  "$castString": "como_cadeia",
+  "text_ivprog_version":"Versão 2018_12_19 Build 13_18"
 }

ivprogh/index.html

@@ -26,81 +26,85 @@
 
     <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 raised container segment div_to_body">
 
-      <div class="ui container main_title only_in_frame">
-      <h2>iVProg</h2>
-    </div>
+        <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 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="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="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="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i></div>
 
-          <div class="list_globals" id="listGlobalsHandle"></div>
+            <div class="list_globals" id="listGlobalsHandle"></div>
 
-        </div>
+          </div>
 
-        <div class="all_functions list-group" id="listWithHandle">
+          <div class="all_functions list-group" id="listWithHandle">
 
-        </div>
+          </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 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>
 
 
-      <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
-        <textarea class="ivprog_textual_code" readonly></textarea>
-      </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 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>
 

ivprogh/js/iassign-integration-functions.js

@@ -226,7 +226,9 @@ function prepareActivityCreation () {
     $('.main_title').remove();
     $('.ui.accordion').addClass('styled');
     
-    $('<div class="ui checkbox"><input type="checkbox" name="include_algo" class="include_algo" tabindex="0" class="hidden"><label>'+LocalizedStrings.getUI('text_teacher_algorithm_include')+'</label></div>').insertBefore('.content_margin');
+    $('<div class="content_margin"></div>').insertBefore($('.add_accordion').find('.content').find('.div_to_body'));
+
+    $('<div class="ui checkbox"><input type="checkbox" name="include_algo" class="include_algo" tabindex="0" class="hidden"><label>'+LocalizedStrings.getUI('text_teacher_algorithm_include')+'</label></div>').insertAfter('.content_margin');
     
     var cases_test_div = $('<div class="ui accordion styled"><div class="active title"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_teacher_test_case')+'</div><div class="active content"></div></div>');
 
@@ -370,7 +372,7 @@ $( document ).ready(function() {
 });
 
 function orderWidth() {
-    $('.ui.raised.container.segment.div_to_body').css('width', '98%');
+    $('.ui.raised.container.segment.div_to_body').css('width', '100%');
     $('.ui.one.column.container.segment.ivprog_visual_panel').css('width', '100%');
 }
 

ivprogh/js/processor/semantic/semanticAnalyser.js

@@ -251,7 +251,7 @@ export class SemanticAnalyser {
             } else {
               throw ProcessorErrorFactory.vector_line_outbounds_full(id, literal.value.length, lines.values.toNumber(), literal.sourceInfo)
             }
-          } else if (line.value.isNeg()) {
+          } else if (lines.value.isNeg()) {
             throw ProcessorErrorFactory.array_dimension_not_positive_full(literal.sourceInfo);
           }
           
@@ -487,6 +487,7 @@ export class SemanticAnalyser {
     for (let i = 0; i < actualParametersList.length; i++) {
       const param = actualParametersList[i];
       const formalParam = fun.formalParameters[i];
+      const id = formalParam.id;
       if(formalParam.byRef) {
         if (!(param instanceof VariableLiteral || param instanceof ArrayAccess)) {
           throw ProcessorErrorFactory.invalid_parameter_type_full(id, param.toString(), param.sourceInfo);

ivprogh/js/visualUI/algorithm.js

@@ -16,6 +16,8 @@ import { LanguageService } from '../services/languageService';
 var block_render = false;
 
 export function renderAlgorithm () {
+	console.log('rendering algorithm...');
+
 	if (block_render) {
 		return;
 	}

ivprogh/js/visualUI/commands/variable_value_menu.js

@@ -93,7 +93,9 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
     if (ref_object.content || ref_object.function_called) {
     	if (ref_object.content) {
     		// Verificar se a variável ainda existe:
-    		if (isVarInProgram(ref_object.content, function_obj)) {
+    		var variable_fun = isVarInProgram(ref_object.content, function_obj);
+    		if (variable_fun) {
+    			ref_object.content = variable_fun;
     			renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
 	    	} else {
 	    		if (ref_object.content && ref_object.content.type) {
@@ -105,7 +107,9 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 	    	}
     	} else if (ref_object.function_called) {
     		// Verificar se a função ainda existe:
-    		if (isFunctionInProgram(ref_object.function_called)) {
+    		var ret_function = isFunctionInProgram(ref_object.function_called);
+    		if (ret_function) {
+    			ref_object.function_called = ret_function;
     			renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
     		} else {
     			ref_object.content = null;
@@ -141,14 +145,28 @@ function appendSelectText (ref_object, menu_var_or_value) {
 }
 
 function isFunctionInProgram (function_called_obj) {
-	if (window.program_obj.functions) {
-		for (var i = 0; i < window.program_obj.functions.length; i++) {
-			if (window.program_obj.functions[i] == function_called_obj) {
-				return true;
+	if (function_called_obj.name) {
+		if (window.program_obj.functions) {
+			for (var i = 0; i < window.program_obj.functions.length; i++) {
+				if (window.program_obj.functions[i] == function_called_obj) {
+					return window.program_obj.functions[i];
+				}
+			}
+			for (var i = 0; i < window.program_obj.functions.length; i++) {
+				if (window.program_obj.functions[i].name == function_called_obj.name) {
+					return window.program_obj.functions[i];
+				}
+			}
+		}
+	} else if (function_called_obj.identifier) {
+		for (var i = 0; i < window.system_functions.length; i++) {
+			if (window.system_functions[i].identifier == function_called_obj.identifier) {
+				return window.system_functions[i];
 			}
 		}
 	}
-	return false;
+	
+	return null;
 }
 
 function isVarInProgram (var_obj, function_obj) {
@@ -156,7 +174,7 @@ function isVarInProgram (var_obj, function_obj) {
 	if (function_obj.variables_list) {
 		for (var i = 0; i < function_obj.variables_list.length; i++) {
 			if (function_obj.variables_list[i] == var_obj) {
-				return true;
+				return function_obj.variables_list[i];
 			}
 		}
 	}
@@ -164,7 +182,7 @@ function isVarInProgram (var_obj, function_obj) {
 	if (function_obj.parameters_list) {
 		for (var i = 0; i < function_obj.parameters_list.length; i++) {
 			if (function_obj.parameters_list[i] == var_obj) {
-				return true;
+				return function_obj.parameters_list[i];
 			}
 		}
 	}
@@ -172,11 +190,37 @@ function isVarInProgram (var_obj, function_obj) {
 	if (window.program_obj.globals) {
 		for (var i = 0; i < window.program_obj.globals.length; i++) {
 			if (window.program_obj.globals[i] == var_obj) {
-				return true;
+				return window.program_obj.globals[i];
 			}
 		}
 	}
-	return false;
+
+	// If not found, verify if the reference was lost
+	if (var_obj) {
+		if (function_obj.variables_list) {
+			for (var i = 0; i < function_obj.variables_list.length; i++) {
+				if (function_obj.variables_list[i].name == var_obj.name) {
+					return function_obj.variables_list[i];
+				}
+			}
+		}
+		if (function_obj.parameters_list) {
+			for (var i = 0; i < function_obj.parameters_list.length; i++) {
+				if (function_obj.parameters_list[i].name == var_obj.name) {
+					return function_obj.parameters_list[i];
+				}
+			}
+		}
+		if (window.program_obj.globals) {
+			for (var i = 0; i < window.program_obj.globals.length; i++) {
+				if (window.program_obj.globals[i].name == var_obj.name) {
+					return window.program_obj.globals[i];
+				}
+			}
+		}
+	}
+
+	return null;
 }
 
 export function refreshMenu (menu_var_or_value_dom) {
@@ -213,8 +257,10 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 	
 	if (variable_obj.content || variable_obj.function_called) {
     	// Verificar se a variável ainda existe:
-    	if (isVarInProgram(variable_obj.content, function_obj)) {
-    		
+    	var var_fun = isVarInProgram(variable_obj.content, function_obj);
+
+    	if (var_fun) {
+	    	variable_obj.content = var_fun;
     	} else {
     		if (variable_obj.content && variable_obj.content.type) {
     			variable_obj.content = null;
@@ -661,6 +707,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 
 	var sub_menu = menu_var_or_value.find('.menu_only_vars');
 	sub_menu.text('');
+	var is_there = false;
 
 	if (window.program_obj.globals) {
 
@@ -669,6 +716,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 				var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + window.program_obj.globals[i].name + ' </div>');
 				temp.data('variable_reference', window.program_obj.globals[i]);
 				sub_menu.append(temp);
+				is_there = true;
 			}
 		} else {
 			for (var i = 0; i < window.program_obj.globals.length; i++) {
@@ -676,6 +724,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 					var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + window.program_obj.globals[i].name + ' </div>');
 					temp.data('variable_reference', window.program_obj.globals[i]);
 					sub_menu.append(temp);
+					is_there = true;
 				}
 			}
 		}
@@ -686,6 +735,7 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.parameters_list[i].name + ' </div>');
 			temp.data('variable_reference', function_obj.parameters_list[i]);
 			sub_menu.append(temp);
+			is_there = true;
 		}
 	}
 
@@ -694,8 +744,13 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expres
 			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.variables_list[i].name + ' </div>');
 			temp.data('variable_reference', function_obj.variables_list[i]);
 			sub_menu.append(temp);
+			is_there = true;
 		}
 	}
+	if (!is_there) {
+		sub_menu.append($('<div class="header">'+LocalizedStrings.getUI('text_none_variable')+'</div>'));
+		sub_menu.append($('<div class="item disabled">'+LocalizedStrings.getUI('text_none_variable_instruction')+'</div>'));
+	}
 
 }
 

ivprogh/js/visualUI/functions.js

@@ -23,6 +23,7 @@ var counter_new_parameters = 0;
 let studentTemp = null;
 let domConsole = null;
 window.studentGrade = null;
+window.LocalizedStrings = LocalizedStrings;
 const program = new Models.Program();
 
 window.system_functions = [];
@@ -105,8 +106,18 @@ window.generator = CodeManagement.generate;
 window.runCodeAssessment = runCodeAssessment;
 window.renderAlgorithm = AlgorithmManagement.renderAlgorithm;
 window.insertContext = false;
+window.watchW = WatchJS;
 
-WatchJS.watch(program.globals, function(){
+WatchJS.watch(window.program_obj.globals, function(){
+  if (window.insertContext) {
+    setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
+    window.insertContext = false;
+  } else {
+    AlgorithmManagement.renderAlgorithm();
+  }
+}, 1);
+
+WatchJS.watch(window.program_obj.functions, function(){
   if (window.insertContext) {
     setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
     window.insertContext = false;
@@ -122,6 +133,8 @@ function addFunctionHandler () {
 
 	counter_new_functions ++;
 
+  window.insertContext = true;
+
   var newe = renderFunction(new_function);
 
   newe.css('display', 'none');
@@ -419,6 +432,10 @@ export function initVisualUI () {
   $('.div_toggle_console').on('click', () => {
     toggleConsole();
   });
+  $('.expand_button').on('click', () => {
+    full_screen();
+  });
+  $('.main_title h2').prop('title', LocalizedStrings.getUI('text_ivprog_description'));
 }
 
 var is_iassign = false;
@@ -487,7 +504,7 @@ $( document ).ready(function() {
     }
   });
   $('.help_button').popup({
-    content : LocalizedStrings.getUI("tooltip_help"),
+    content : LocalizedStrings.getUI("tooltip_help") + ' - ' + LocalizedStrings.getUI("text_ivprog_version"),
     delay: {
       show: time_show,
       hide: 0