Atualizacao manual com parte de versoes anteriores 2019/03/11

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;
+}

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

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

ivprogh/js/iassign-integration-functions.js~

@@ -0,0 +1,500 @@
+// Função para ler parâmetros informados pelo iTarefa via URL
+// Apesar de não ser obrigatório, será muito útil para capturar os parâmetros
+function getParameterByName (name, defaultReturn = null) {
+    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
+    return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : defaultReturn;
+}
+
+// Criando um object com os parâmetros informados pelo iTarefa
+// Observe que para cada parâmetro, é realizada a chamada do método getParameterByName, implementado acima
+var iLMparameters = {
+    iLM_PARAM_ServerToGetAnswerURL: getParameterByName("iLM_PARAM_ServerToGetAnswerURL"),
+    iLM_PARAM_SendAnswer: getParameterByName("iLM_PARAM_SendAnswer"),
+    iLM_PARAM_AssignmentURL: getParameterByName("iLM_PARAM_AssignmentURL"),
+    iLM_PARAM_Assignment: getParameterByName("iLM_PARAM_Assignment"),
+    lang: getParameterByName("lang", "pt")
+};
+
+// Set the lang parameter to the localStorage for easy access
+// and no dependency to the global scope, avoind future 'strict mode' problems
+//localStorage.setItem('ivprog.lang', iLMparameters.lang);
+
+// Função chamada pelo iTarefa quando o professor finaliza a criação da atividade
+// ou quando o aluno finaliza a resolução do exercício
+// O retorno é um JSON com os dados do exercício ou da resolução
+// Esse retorno será armazenado no banco de dados do Moodle, pelo iTarefa
+function getAnswer () {
+    // Se o parâmetro "iLM_PARAM_SendAnswer" for false,
+    // então trata-se de resolução de atividade
+    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
+        // Montar o retorno com a resposta do aluno
+        var contentToSend = previousContent.split("\n::algorithm::")[0];
+        contentToSend += '\n::algorithm::\n';
+        contentToSend += JSON.stringify(window.program_obj, function(key, value) {
+            if (key == 'dom_object') {
+                return;
+            }
+            return value; 
+        });
+
+        contentToSend += '\n::logs::';
+        contentToSend += getTrackingLogs();
+
+        return contentToSend;
+
+    } else {
+        // Montar o retorno com a criação da atividade do professor
+        var ret = ' { ' + prepareTestCases() 
+            + ',\n"settings_data_types": \n' + JSON.stringify($('form[name="settings_data_types"]').serializeArray()) 
+            + ',\n"settings_commands": \n' + JSON.stringify($('form[name="settings_commands"]').serializeArray()) 
+            + ',\n"settings_functions": \n' + JSON.stringify($('form[name="settings_functions"]').serializeArray()) 
+            + ' } ';
+
+        if ($("input[name='include_algo']").is(':checked')) {
+            ret += '\n::algorithm::\n';
+            ret += JSON.stringify(window.program_obj, function(key, value) {
+                
+                if (key == 'dom_object') {
+                    return;
+                }
+                return value; 
+            });
+        }
+
+        return ret;
+
+    }
+}
+
+function prepareTestCases () {
+    var ret = ' \n "testcases" : [ '
+    var test_cases_array = $('form[name="test_cases"]').serializeArray();
+    for (var i = 0; i < test_cases_array.length; i = i + 2) {
+        ret += '\n{ ';
+        ret += '\n "input": [';
+        var inps = test_cases_array[i].value.match(/[^\r\n]+/g);
+        if (inps) {
+            for (var j = 0; j < inps.length; j++) {
+                ret += '"' + inps[j] + '"';
+                if ((j + 1) < inps.length) {
+                    ret += ', ';
+                }
+            }
+        }
+        ret += '], \n "output": [';
+        var outs = test_cases_array[i+1].value.match(/[^\r\n]+/g);
+        if (outs) {
+            for (var j = 0; j < outs.length; j++) {
+                ret += '"' + outs[j] + '"';
+                if ((j + 1) < outs.length) {
+                    ret += ', ';
+                }
+            }
+        }
+        ret += ']';
+        ret += '\n}'
+        if ((i + 2) < test_cases_array.length) {
+            ret += ',';
+        }
+    }
+    ret += '\n] ';
+    return ret;
+}
+
+// Função chamada pelo iTarefa para receber a nota do aluno na atividade
+// O retorno é um valor entre 0.0 e 1.0
+function getEvaluation () {
+    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
+        // A chamada do método abaixo é obrigatória!
+        // Observe que a chamada parte do iLM para o iTarefa
+        //parent.getEvaluationCallback(window.studentGrade);
+
+        runCodeAssessment();
+    }
+}
+
+
+var testCases = null;
+var settingsDataTypes = null;
+var settingsCommands = null;
+var settingsFunctions = null;
+var algorithm_in_ilm = null;
+var previousContent = null;
+
+// Função para que o iMA leia os dados da atividade fornecidos pelo iTarefa
+function getiLMContent () {
+
+    // O parâmetro "iLM_PARAM_Assignment" fornece o URL do endereço que deve ser
+    // requisitado via AJAX para a captura dos dados da atividade
+    $.get(iLMparameters.iLM_PARAM_Assignment, function (data) {
+        // Aluno está trabalhando em alguma atividade:
+        if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
+            previousContent = data;
+            prepareActivityToStudent(data);
+        } else { // Professor está editando uma atividade:
+            previousContent = data;
+            prepareActivityToEdit(data);
+        }
+
+        window.block_render = false;
+        renderAlgorithm();
+    });
+}
+
+function prepareActivityToEdit (ilm_cont) {
+    var content = JSON.parse(ilm_cont.split('\n::algorithm::')[0]);
+    testCases = content.testcases;
+    settingsDataTypes = content.settings_data_types;
+    settingsCommands = content.settings_commands;
+    settingsFunctions = content.settings_functions;
+
+    for (var i = 0; i < testCases.length; i++) {
+        addTestCase(testCases[i]);
+    }
+
+    if (ilm_cont.split('\n::algorithm::')[1]) {
+        algorithm_in_ilm = ilm_cont.split('\n::algorithm::')[1].split('\n::logs::')[0];
+        $("input[name='include_algo']").prop('checked', true);
+        includePreviousAlgorithm();
+        renderAlgorithm();
+    }
+}
+
+function includePreviousAlgorithm () {
+    window.program_obj.functions = JSON.parse(algorithm_in_ilm).functions;
+    window.program_obj.globals = JSON.parse(algorithm_in_ilm).globals;
+
+    window.watchW.watch(window.program_obj.globals, function(){
+      if (window.insertContext) {
+        setTimeout(function(){ renderAlgorithm(); }, 300);
+        window.insertContext = false;
+      } else {
+        renderAlgorithm();
+      }
+    }, 1);
+
+    for (var i = 0; i < window.program_obj.functions.length; i ++) {
+        window.watchW.watch(window.program_obj.functions[i].parameters_list, function(){
+          if (window.insertContext) {
+            setTimeout(function(){ renderAlgorithm(); }, 300);
+            window.insertContext = false;
+          } else {
+            renderAlgorithm();
+          }
+        }, 1);
+
+        window.watchW.watch(window.program_obj.functions[i].variables_list, function(){
+          if (window.insertContext) {
+            setTimeout(function(){ renderAlgorithm(); }, 300);
+            window.insertContext = false;
+          } else {
+            renderAlgorithm();
+          }
+        }, 1);
+
+        if (window.program_obj.functions[i].is_main) {
+            window.program_obj.functions[i].name = LocalizedStrings.getUI("start");
+        }
+    }
+    window.watchW.watch(window.program_obj.functions, function(){
+      if (window.insertContext) {
+        setTimeout(function(){ renderAlgorithm(); }, 300);
+        window.insertContext = false;
+      } else {
+        renderAlgorithm();
+      }
+    }, 1);
+}
+
+function prepareActivityToStudent (ilm_cont) {
+    var content = JSON.parse(ilm_cont.split('\n::algorithm::')[0]);
+    testCases = content.testcases;
+    settingsDataTypes = content.settings_data_types;
+    settingsCommands = content.settings_commands;
+    settingsFunctions = content.settings_functions;
+
+    if (ilm_cont.split('\n::algorithm::')[1]) {
+        algorithm_in_ilm = ilm_cont.split('\n::algorithm::')[1].split('\n::logs::')[0];
+        includePreviousAlgorithm();
+    }
+    $('.assessment_button').removeClass('disabled');
+    renderAlgorithm();
+}
+
+// Função para organizar se para criação, visualização ou resolução de atividade
+function prepareEnvironment () {
+    if ((iLMparameters.iLM_PARAM_AssignmentURL == "true") && (iLMparameters.iLM_PARAM_SendAnswer == "true")) {
+        prepareActivityCreation();
+    }
+}
+
+$(document).ready(function() {
+
+    // Se iLM_PARAM_SendAnswer for false, então trata-se de resolução de atividade,
+    // portanto, a "DIV" de resolução é liberada
+    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
+        //$('.resolucao').css("display","block");
+        getiLMContent();
+
+
+        $( document ).ready(function() {
+            $('.div_to_body').mousemove(function(e) {
+                trackingMatrix.push(adCoords(e, 0));
+            });
+
+            $('.div_to_body').click(function(e) {
+                trackingMatrix.push(adCoords(e, 1));                    
+            });
+
+        });
+
+    } else {
+        // Caso não esteja em modo de resolução de atividade, a visualização no momento
+        // é para a elaboração de atividade:
+        //$('.elaboracao').css("display","block");
+
+        // Se possuir o parâmetro iLMparameters.iLM_PARAM_Assignment, o professor
+        // está editando uma atividade:
+        if (iLMparameters.iLM_PARAM_Assignment) {
+            getiLMContent();
+        }
+    }
+
+    if (!testCases) {
+        $('.assessment_button').addClass('disabled');
+    }
+
+});
+
+// Função para preparar a interface para o professor criar atividade:
+function prepareActivityCreation () {
+
+    $('.add_accordion').addClass('accordion');
+
+    $('.default_visual_title').toggle();
+    $('.default_visual_title').append('<span>'+LocalizedStrings.getUI('text_teacher_algorithm')+'</span>');
+    $('.height_100').removeClass('height_100');
+    $('.main_title').remove();
+    $('.ui.accordion').addClass('styled');
+    
+    $('<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>');
+
+    cases_test_div.insertBefore('.accordion');
+
+    var config_div = $('<div class="ui accordion styled"><div class="title"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_teacher_config')+'</div><div class="content"></div></div>');
+
+    config_div.insertAfter(cases_test_div);
+
+    $('.ui.accordion').accordion();
+
+    $('.ui.checkbox').checkbox();
+
+    prepareTableSettings(config_div.find('.content'));
+
+    prepareTableTestCases(cases_test_div.find('.content'));
+
+    if (inIframe()) {
+        $('.ui.styled.accordion').css('width', '96%');
+    }
+}
+
+function prepareTableTestCases (div_el) {
+
+    var table_el = '<form name="test_cases"><table class="ui blue table"><thead><tr><th width="30px">#</th><th>'+LocalizedStrings.getUI('text_teacher_test_case_input')+'</th><th>'+LocalizedStrings.getUI('text_teacher_test_case_output')+'</th><th width="80px">'+LocalizedStrings.getUI('text_teacher_test_case_actions')+'</th></tr></thead>'
+            + '<tbody class="content_cases"></tbody></table></form>';
+
+    div_el.append(table_el);
+
+    div_el.append('<button class="ui teal labeled icon button button_add_case"><i class="plus icon"></i>'+LocalizedStrings.getUI('text_teacher_test_case_add')+'</button>');
+
+    $('.button_add_case').on('click', function(e) {
+        addTestCase();
+    });
+}
+
+var hist = false;
+
+function addTestCase (test_case = null) {
+    var new_row = null;
+    if (test_case) {
+        var text_row = '';
+
+        text_row += '<tr><td class="counter"></td><td class="expandingArea"><textarea rows="'+test_case.input.length+'" name="input" class="text_area_input">';
+
+        for (var i = 0; i < test_case.input.length; i ++) {
+            text_row += test_case.input[i];
+            if ((i + 1) < test_case.input.length) {
+                text_row += '\n';
+            }
+        }
+        
+        text_row += '</textarea></td><td class="expandingArea"><textarea rows="'+test_case.output.length+'" name="output" class="text_area_output">';
+
+        for (var i = 0; i < test_case.output.length; i ++) {
+            text_row += test_case.output[i];
+            if ((i + 1) < test_case.output.length) {
+                text_row += '\n';
+            }
+        }
+
+        text_row += '</textarea></td><td class="btn_actions"><div class="ui button_remove_case"><i class="red icon times large"></i></div></td></tr>';
+
+        new_row = $(text_row);
+    } else {
+        new_row = $('<tr><td class="counter"></td><td class="expandingArea"><textarea rows="1" name="input" class="text_area_input"></textarea></td><td class="expandingArea"><textarea rows="1" name="output" class="text_area_output"></textarea></td><td class="btn_actions"><div class="ui button_remove_case"><i class="red icon times large"></i></div></td></tr>');
+    }
+    $('.content_cases').append(new_row);
+
+    new_row.find('.button_remove_case').click(function(e) {
+        new_row.remove();
+        updateTestCaseCounter();
+    });
+
+    new_row.find('textarea').on('input', function(e) {
+        var lines = $(this).val().split('\n').length;
+        $(this).attr('rows', lines);
+    });
+    
+    updateTestCaseCounter();
+
+     $('.text_area_output').keydown(function(e) {
+        var code = e.keyCode || e.which;
+        if (code == 9 && $(this).closest("tr").is(":last-child")) {
+            hist = true;
+            addTestCase();
+        }
+     });
+     if (test_case == null) {
+        if (!hist) {
+            $( ".content_cases tr:last" ).find('.text_area_input').focus();
+         } else {
+            hist = false;
+         }
+     }
+}
+
+function updateTestCaseCounter () {
+    var i = 1;
+    $( ".content_cases" ).find('tr').each(function() {
+      $( this ).find('.counter').text(i);
+      i ++;
+    });
+}
+
+function prepareTableSettings (div_el) {
+    div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_teacher_data_types')+'</h4>');
+    div_el.append('<form name="settings_data_types"><div class="ui stackable five column grid">'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="integer_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('integer')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="real_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('real')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="text_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="boolean_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('boolean')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="void_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('void')+'</label></div></div>'
+        +'</div></form>');
+
+
+    div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_teacher_commands')+'</h4>');
+    div_el.append('<form name="settings_commands"><div class="ui stackable three column grid">'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_read" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_read_var')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_write" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_write_var')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_comment" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_comment')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_attribution" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_attribution')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_functioncall" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_functioncall')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_iftrue" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_iftrue')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_repeatNtimes" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_repeatNtimes')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_while" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_whiletrue')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_dowhile" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_dowhiletrue')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_switch" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_switch')+'</label></div></div>'
+        +'</div></form>');
+
+    div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_teacher_functions')+'</h4>');
+    div_el.append('<form name="settings_functions"><div class="ui stackable one column grid">'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="functions_creation" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_teacher_create_functions')+'</label></div></div>'
+        +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="functions_move" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_teacher_create_movement_functions')+'</label></div></div>'
+        +'</div></form>');
+
+    $('.ui.checkbox').checkbox();
+
+
+}
+
+function getTrackingLogs () {
+    var ret = "";
+    for (var i = 0; i < trackingMatrix.length; i++) {
+        ret += "\n" + trackingMatrix[i][0] + "," + trackingMatrix[i][1] + "," + trackingMatrix[i][2];
+        if (trackingMatrix[i][3] === 1) {
+            ret += ',' + trackingMatrix[i][3] + ',"' + trackingMatrix[i][4] + '"';
+        }
+    }
+    return ret;
+}
+
+// Tracking mouse movements
+var trackingMatrix = [];
+
+function adCoords(e, code){
+    var x = e.pageX; 
+    var y = e.pageY;
+    if (code === 1) {
+        return [new Date().getTime(), x, y, code, e.target.classList['value']];
+    } else {
+        return [x, y, code];
+    }
+}
+
+$( document ).ready(function() {
+
+    if (inIframe()) {
+        orderIcons();
+        orderWidth();
+    }
+    renderAlgorithm();
+});
+
+function orderWidth() {
+    $('.ui.raised.container.segment.div_to_body').css('width', '100%');
+    $('.ui.one.column.container.segment.ivprog_visual_panel').css('width', '100%');
+}
+
+function orderIcons() {
+    $('.ui.one.column.doubling.stackable.grid.container').css('display', 'none');
+    $('.only_in_frame').css('display', 'block');
+}
+
+
+function inIframe () {
+    try {
+        return window.self !== window.top;
+    } catch (e) {
+        return true;
+    }
+}
+
+
+function full_screen() {
+    // check if user allows full screen of elements. This can be enabled or disabled in browser config. By default its enabled.
+    //its also used to check if browser supports full screen api.
+    if("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullScreenEnabled" in document || "msFullscreenEnabled" in document) {
+        if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
+            var element = document.getElementById("ui_main_div");
+            //requestFullscreen is used to display an element in full screen mode.
+            if("requestFullscreen" in element) {
+                element.requestFullscreen();
+            } 
+            else if ("webkitRequestFullscreen" in element) {
+                element.webkitRequestFullscreen();
+            } 
+            else if ("mozRequestFullScreen" in element) {
+                element.mozRequestFullScreen();
+            } 
+            else if ("msRequestFullscreen" in element) {
+                element.msRequestFullscreen();
+            }
+        }
+    } else {
+        $('.expand_button').addClass('disabled');
+    }
+}

legacy/index.html

@@ -0,0 +1,166 @@
+<!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="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">
+            <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>
+        <!-- bandeiras para lingua -->
+        <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>Projeto iVProg</h1>
+          <p class="text-reduced">
+          O projeto <b>iVProg</b> (<i>Programação Visual interativa na Internet</i>) foi iniciado em 2009, com
+          o desenvolvimento de uma primeira versão em <i>Java</i>, funcionando como aplicativo e como "applet", que foi resultado da dissertação
+	  de mestrado de
+          <i><a href="https://bdpi.usp.br/item/002192819" title="dissertacao Reginaldo defendida em 09/11/2010">Reginaldo Rideaki Kamiya</a><i>.
+          <!--
+          09/11/2010 : iVProg : um sistema visual para ensino/aprendizagem de programação via Web
+          -->
+          A segunda versão, completamente nova, foi desenvolvida a partir do arcabouço para <i title="Modulos de Aprendizagem interativa">iMA</i>
+          resultado da
+          <i><a href="https://bdpi.usp.br/item/002302564" title="dissertacao Danilo Leite Dalmon">dissertação de mestrado de Danilo Leite Dalmon</a>.
+          <!--
+          06.07.2012 : Uma Linha de Produto de Software para Módulos de Aprendizagem Interativa
+          -->
+	  Essa segunda versão também foi desenvolvida em <i>Java</i>, tendo sido o produto final da 
+          <i><a href="https://www.ime.usp.br/~cpg/teses/Dissertacao-RomenigdaSilvaRibeiro.pdf" title="PDF da dissertacao de Romenig da Silva Ribeiro">dissertação de mestrado de Romenig da Silva Ribeiro</a>.
+          <!--
+          12/05/2015 : Construção e uso de ambiente visual para o ensino de programação introdutória
+          -->
+          </p>
+
+          <p class="text-reduced">
+          Desde o projeto <a href="http://www.matematica.br/igeom" title="pagina do iGeom">iGeom</a>, de geometria interativa, a ideia de um <i>iMA</i>
+          é que sejam sistemas que possam funcionar diretamente via <i>Web</i>, em particular integrados a um gerenciador de cursos.
+          Por esse motivo, disponibilizamos um integrador de <i>iMA</i> para ambientes <i>Moodle</i>, que é o pacote
+	  <a href="http://www.matematica.br/ia" title="pagina do iTarefa">iTarefa</a></i>.</p>
+          O <i>iVProg</i> segue esse modelo, podendo ser integrado ao <i>Moodle</i> a partir do <i>iTarefa</i>.
+          </p>
+
+          <p class="text-reduced">
+          Desde que os navegadores mais usados (como o <i>Firefox</i>) deixaram de disponibilizar o integrador de "applets", passamos
+          a pensar em novos <i>iMA</i> desenvolvidos em <i>HTML5</i> (<i>HTML+JavaScript+CSS</i>).
+          O sistema <i>iVProgH</i> foi o primeiro nessa linha, desenvolvido em <i>HTML5</i>, que por isso recebeu o sufixo <i>H</i>.
+          </p>
+
+          <!--
+          <a class="btn btn-primary" href="../sobre_ivprog.html" role="button" title="Conheça resumidamente o que é e para que serve o iVProgH.">
+          Saiba mais &raquo;</a>
+          -->
+        </div>
+      </div>
+      <!--
+      <div class="container ivprog-container">
+        <div class="embed-responsive embed-responsive-16by9">
+          <iframe class="embed-responsive-item" src="ivprogh/index.html" allowfullscreen></iframe>
+        </div>
+      </div>
+      -->
+
+      <div class="container">
+        <div class="row thumbs-ivprog">
+
+          <div class="col-md-3 item"><a href="version1/" title="versao 1: java">
+            <span class="octicon octicon-light-bulb"></span>
+            <h4>Versão 1 do iVProg em Java</h4>
+            <hr>
+            <p>iVProg baseado na versão 2.0 do Alice</p></a>
+          </div>
+
+          <div class="col-md-3 item"><a href="version2/" title="versao 2: java">
+            <span class="octicon octicon-clock"></span>
+            <h4>Versão 2 do iVProg em Java</h4>
+            <hr>
+            <p>iVProg baseado no arcabouço para construção de iMA em Java</p></a>
+          </div>
+
+          <br/>
+
+          <div class="col-md-3 item"><a href="version3/" title="versao 3: html">
+            <span class="octicon octicon-clock"></span>
+            <h4>Versão 3 do iVProg em HTML</h4>
+            <hr>
+            <p>Primeira versão do iVProgH em HTML+JavaScript+CSS</p></a>
+          </div>
+
+          <div class="col-md-3 item"><a href="../" title="versao 4: html">
+            <span class="octicon octicon-clock"></span>
+            <h4>Versão 4 do iVProg em HTML</h4>
+            <hr>
+            <p>Segunda versão do iVProgH em HTML+JavaScript+CSS</p></a>
+          </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">
+  </body>
+</html>

legacy/index.html~

@@ -0,0 +1,163 @@
+<!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="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">
+            <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>
+        <!-- bandeiras para lingua -->
+        <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>Projeto iVProg</h1>
+          <p class="text-reduced">
+          O projeto <b>iVProg</b> (<i>Programação Visual interativa na Internet</i>) foi iniciado em 2009, com
+          o desenvolvimento de uma primeira versão em <i>Java</i>, funcionando como aplicativo e como "applet", que foi resultado da dissertação
+	  de mestrado de
+          <i><a href="https://bdpi.usp.br/item/002192819" title="dissertacao Reginaldo defendida em 09/11/2010">Reginaldo Rideaki Kamiya</a><i>.
+          <!--
+          09/11/2010 : iVProg : um sistema visual para ensino/aprendizagem de programação via Web
+          -->
+          A segunda versão, completamente nova, foi desenvolvida a partir do arcabouço para <i title="Modulos de Aprendizagem interativa">iMA</i>
+          resultado da
+          <i><a href="https://bdpi.usp.br/item/002302564" title="dissertacao Danilo Leite Dalmon">dissertação de mestrado de Danilo Leite Dalmon</a>.
+          <!--
+          06.07.2012 : Uma Linha de Produto de Software para Módulos de Aprendizagem Interativa
+          -->
+	  Essa segunda versão também foi desenvolvida em <i>Java</i>, tendo sido o produto final da 
+          <i><a href="https://www.ime.usp.br/~cpg/teses/Dissertacao-RomenigdaSilvaRibeiro.pdf" title="PDF da dissertacao de Romenig da Silva Ribeiro">dissertação de mestrado de Romenig da Silva Ribeiro</a>.
+          <!--
+          12/05/2015 : Construção e uso de ambiente visual para o ensino de programação introdutória
+          -->
+          </p>
+
+          <p class="text-reduced">
+          Desde o projeto <a href="http://www.matematica.br/igeom" title="pagina do iGeom">iGeom</a>, de geometria interativa, a ideia de um <i>iMA</i>
+          é que sejam sistemas que possam funcionar diretamente via <i>Web</i>, em particular integrados a um gerenciador de cursos.
+          Por esse motivo, disponibilizamos um integrador de <i>iMA</i> para ambientes <i>Moodle</i>, que é o pacote
+	  <a href="http://www.matematica.br/ia" title="pagina do iTarefa">iTarefa</a></i>.</p>
+          O <i>iVProg</i> segue esse modelo, podendo ser integrado ao <i>Moodle</i> a partir do <i>iTarefa</i>.
+          </p>
+
+          <p class="text-reduced">
+          Desde que os navegadores mais usados (como o <i>Firefox</i>) deixaram de disponibilizar o integrador de "applets", passamos
+          a pensar em novos <i>iMA</i> desenvolvidos em <i>HTML5</i> (<i>HTML+JavaScript+CSS</i>).
+          O sistema <i>iVProgH</i> foi o primeiro nessa linha, desenvolvido em <i>HTML5</i>, que por isso recebeu o sufixo <i>H</i>.
+          </p>
+
+          <!--
+          <a class="btn btn-primary" href="../sobre_ivprog.html" role="button" title="Conheça resumidamente o que é e para que serve o iVProgH.">
+          Saiba mais &raquo;</a>
+          -->
+        </div>
+      </div>
+      <!--
+      <div class="container ivprog-container">
+        <div class="embed-responsive embed-responsive-16by9">
+          <iframe class="embed-responsive-item" src="ivprogh/index.html" allowfullscreen></iframe>
+        </div>
+      </div>
+      -->
+
+      <div class="container">
+          <div class="col-md-3 item"><a href="version1/" title="versao 1: java">
+            <span class="octicon octicon-light-bulb"></span>
+            <h4>Versão 1 do iVProg em Java</h4>
+            <hr>
+            <p>iVProg baseado na versão 2.0 do Alice</p></a>
+          </div>
+
+          <div class="col-md-3 item"><a href="version2/" title="versao 2: java">
+            <span class="octicon octicon-clock"></span>
+            <h4>Versão 2 do iVProg em Java</h4>
+            <hr>
+            <p>iVProg baseado no arcabouço para construção de iMA em Java</p></a>
+          </div>
+
+          <br/>
+
+          <div class="col-md-3 item"><a href="version3/" title="versao 3: html">
+            <span class="octicon octicon-clock"></span>
+            <h4>Versão 3 do iVProg em HTML</h4>
+            <hr>
+            <p>Primeira versão do iVProgH em HTML+JavaScript+CSS</p></a>
+          </div>
+
+          <div class="col-md-3 item"><a href="../" title="versao 4: html">
+            <span class="octicon octicon-clock"></span>
+            <h4>Versão 4 do iVProg em HTML</h4>
+            <hr>
+            <p>Segunda versão do iVProgH em HTML+JavaScript+CSS</p></a>
+          </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">
+  </body>
+</html>