Criado um modelo para ser utilizado para cada exemplo, na página ex_pt/index.html

bugs/report.html

@@ -63,12 +63,10 @@
     <main role="main">
       <div class="jumbotron ivprogh-desc">
         <div class="container">
-          <h1>iVProgH</h1>
-          
+          <h1>Contato</h1>
         </div>
       </div>
       <div class="container ivprog-container" style="padding: 3em; margin-top: 3em;">
-      	<h4>Contato</h4>
       	<p style="color: gray">Obrigado pelo interesse em entrar em contato com a equipe do iVProgH! <br />
       		Por favor, preencha os campos abaixo.</p>
       	<form action="get.php" method="post" class="needs-validation" novalidate>

css/style.css

@@ -41,6 +41,7 @@ h1 {
 }
 .row.thumbs-ivprog-download .item {
 	background-color: #5a6570;
+	border: 2px groove;
 }
 .col-md-3.item:hover {
     background-color: #03396c;
@@ -63,9 +64,13 @@ h1 {
 	display: block;
 	font-size: 98%;
 }
-.my-3 .octicon-history {
+.my-4 .octicon-history {
 	font-size: 1em;
 }
+.row.thumbs-ivprog-download {
+    padding-bottom: 3em;
+}
+
 .history-ivprog-version {
 	display: block;
 	font-size: 1em;
@@ -77,4 +82,39 @@ h1 {
     background-color: gray;
     padding: .4em;
     border-radius: .4em;
+}
+footer.container {
+	margin-bottom: 1em;
+}
+.example-large-div {
+	background-color: #0bbf4a;
+	border-radius: .8em;
+}
+
+.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;
+}
+.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;
 }

download.html

@@ -61,15 +61,15 @@
     </nav>
 
     <main role="main">
-      
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>Download</h1>
+        </div>
+      </div>
       <div class="container ivprog-container" style="width:900px">
            <!-- Page Content -->
       <div class="container" style="margin-top:50px;" >
 
-      <!-- Portfolio Item Heading -->
-      <h3 class="my-4">Download</h3>
-
-      <!-- Portfolio Item Row -->
       <div class="row">
 
         <div class="col-md-8">
@@ -97,7 +97,7 @@
 
       <hr>
 
-      <h3 class="my-3" style="margin-top: 5px"> <span class="octicon octicon-history"></span> Versões anteriores do iVProg</h3>
+      <h4 class="my-4" style="margin-top: 5px"> <span class="octicon octicon-history"></span> Versões anteriores do iVProg</h4>
 
       <div class="row">
         <div class="col-md-12">
@@ -131,6 +131,7 @@
             <span class="history-ivprog-version">Versão III - HTML</span>
             <span class="history-ivprog-time">2016 - 2018</span>
           </div>
+          <div class="col-md-1"></div>
         </div>
        </div>
       </div>
@@ -146,8 +147,8 @@
       <a href="http://www.matematica.br">iM&aacute;tica</a>
     </footer>
 
-    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.bundle.min.js"></script>
+    <script 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>

ex_pt/index.html

@@ -138,41 +138,37 @@
     <main role="main">
       <div class="jumbotron ivprogh-desc">
         <div class="container">
-          <h1>iVProgH</h1>
+          <h1>Exemplos</h1>
+        </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"><span class="octicon octicon-rocket"></span> Exemplo 1</div>
+          
           <p class="text-reduced">
-          <!--
-          O <b>iVProg</b> (<i>Programação Visual interativa na Internet</i>) é um dos sistemas educacionais de código livre do
-          <a href="http://line.ime.usp.br" title="pagina LInE no IME-USP">LInE</a>, sendo destinado ao ensino e à aprendizagem
-          de <b>algoritmos</b> e <b>programação</b>.
-          -->
-          Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
+            Exemplo de exercício com <i>avaliação automática</i> no <i>iVProg</i>.
           </p>
           
           <p class="text-reduced">
-          <b>Fazer um programa que solicite do usuário um valor inteiro, depois imprima o valor por ele digitado.
+            <b>Faça um programa que solicite do usuário um valor inteiro, depois imprima o valor por ele digitado.</b>
           </p>
 
-          <a class="btn btn-primary" href="manual_pt/index.html" role="button" title="manual iVProgH">Saiba mais &raquo;</a>
-        </div>
-      </div>
-      <div class="container ivprog-container">
-       <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=./exerc/exerc_1_1_ler_imprimir_novo.ivphiLM_PARAM_SendAnswer=false&lang=en"
-                    allowfullscreen></iframe><br/>
+          <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>
-          <div class="embed-responsive embed-responsive"> <!-- 4by3 -->
-            <center>
-            <input type='button' name='Submit' value='Enviar resposta' 
-                   title='clique aqui para vesualizar seu codigo'
-                   onclick='javascript:window.submit_iMA_Answer();' /><!-- chama funcao iMA-->
-            </center>
-          </div>
-        </form>
-      </div>
+      </div> <!-- Este é o final da DIV que deve ser copiada para cada exemplo -->
 
     </main>
     <footer class="container text-center">
@@ -181,7 +177,8 @@
       <a href="http://www.matematica.br">iM&aacute;tica</a>
     </footer>
 
-    <script src="js/jquery-min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
+    <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>

index.html

@@ -143,8 +143,8 @@
       <a href="http://www.matematica.br">iM&aacute;tica</a>
     </footer>
 
-    <script src="js/jquery-min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
+    <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">

ivprog-html.html

@@ -85,7 +85,7 @@
       <a href="http://www.matematica.br">iM&aacute;tica</a>
     </footer>
 
-    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.bundle.min.js"></script>
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/bootstrap.bundle.min.js"></script>
   </body>
 </html>

ivprogh/css/ivprog-visual-1.0.css

@@ -29,6 +29,7 @@ body {
 
 .main_title h2 {
 	margin: 0;
+	color: white;
 }
 .main_title span {
 	font-size: 80%;
@@ -783,4 +784,7 @@ div.function_name_div_updated:active,
 .commands_list_div.over_command_drag {
 	border: 3px dotted blue !important;
 	padding: 0.2em !important;
+}
+.ui.segment:first-child {
+	margin-top: 1em !important;
 }

ivprogh/index.html

@@ -24,22 +24,16 @@
   </head>
   <body>
 
-    <div class="ui height_100 add_accordion">
-
-      <div class="title default_visual_title">
-        <i class="dropdown icon"></i>
-        
-      </div>
+    <div class="ui height_100 add_accordion" id="ui_main_div">
 
     <div class="content height_100">
    
-    <div class="ui container main_title only_in_frame">
+    <div class="ui raised container segment div_to_body">
+
+      <div class="ui container main_title only_in_frame">
       <h2>iVProg</h2>
-      <span class="subtext" style="display: inline;">interactive coding</span>
     </div>
 
-    <div class="ui raised container segment div_to_body">
-
       <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>
@@ -65,6 +59,9 @@
         <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>

ivprogh/js/iassign-integration-functions.js

@@ -134,6 +134,43 @@ function prepareActivityToStudent (ilm_cont) {
         algorithm_in_ilm = ilm_cont.split('\n::algorithm::')[1].split('\n::logs::')[0];
         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);
+        }
+        window.watchW.watch(window.program_obj.functions, function(){
+          if (window.insertContext) {
+            setTimeout(function(){ renderAlgorithm(); }, 300);
+            window.insertContext = false;
+          } else {
+            renderAlgorithm();
+          }
+        }, 1);
     }
     $('.assessment_button').removeClass('disabled');
     renderAlgorithm();
@@ -327,10 +364,16 @@ $( document ).ready(function() {
 
     if (inIframe()) {
         orderIcons();
+        orderWidth();
     }
 
 });
 
+function orderWidth() {
+    $('.ui.raised.container.segment.div_to_body').css('width', '98%');
+    $('.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');
@@ -344,4 +387,30 @@ function inIframe () {
     } 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');
+    }
 }

publicacoes.html

@@ -87,7 +87,7 @@
       <a href="http://www.matematica.br">iM&aacute;tica</a>
     </footer>
 
-    <script src="js/jquery-min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/bootstrap.bundle.min.js"></script>
   </body>
 </html>

sobre_ivprog.html

@@ -123,7 +123,7 @@
       <a href="http://www.matematica.br">iM&aacute;tica</a>
     </footer>
 
-    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.bundle.min.js"></script>
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/bootstrap.bundle.min.js"></script>
   </body>
 </html>