index.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!DOCTYPE html>
  2. <html ng-app="ivprog">
  3. <head>
  4. <title>iVProgH5 : Visual Programming (LInE-IME-USP)</title>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
  8. <link href="css/font-awesome.css" rel="stylesheet" media="screen" />
  9. <link href="css/bootstrap-editable.css" rel="stylesheet" media="screen" />
  10. <link href="css/ivprog.css" rel="stylesheet" media="screen" />
  11. </head>
  12. <body>
  13. <div class="header">
  14. <h1><img src="img/logo_ivprog.png" title="iVProg" /></h1>
  15. </div>
  16. <div class="indent1">
  17. <h2>&nbsp;iVProg : Visual Programming (LInE-IME-USP)</h2>
  18. <a href="http://www.usp.br/line" title="Uma das paginas do LInE">LInE</a>.
  19. <a href="https://github.com/LInE-IME-USP" title="LInE no GitHub">Software educacional livre</a>.
  20. <a href="http://www.usp.br/line/wp" title="Prototipo ambiente LInE">Interatividade na Internet para aprendizagem</a>.
  21. <script type='text/javascript'>
  22. //<![CDATA[
  23. var strAnswer = '';
  24. var evaluationResult = '';
  25. var comment = '';
  26. function resp () {
  27. // 'getEvaluation()' calls 'js/services.js : endTest function(index)' that calls 'getEvaluationCallback(apro/100);'
  28. window.frames.iLM.getEvaluation(); // in './mod/iassign/ilm/ivprog-html/js/services.js'; './mod/iassign/ilm/ivprog-html/main.html'
  29. // var comment = document.formEnvio.submission_comment.value;
  30. // iVProgH5 will call function 'getEvaluationCallback(...)': /var/www/html/ivprogh5/js/services.js
  31. }
  32. function getEvaluationCallback (evaluation) { // ./mod/iassign/ilm/ivprog-html/js/services.js : call this to define the variable 'evaluationResult'
  33. evaluationResult = evaluation;
  34. strAnswer = window.frames.iLM.getAnswer();
  35. comment = document.formEnvio.submission_comment.value;
  36. if ((strAnswer==null || strAnswer=='' || strAnswer==-1) && (comment==null || comment=='')) { // undefined
  37. alert('Atividade enviada sem conteúdo.');
  38. return false; // error...
  39. } else {
  40. //alert('getEvaluationCallback: enviando evaluationResult=' + evaluation + ', strAnswer=' + strAnswer);
  41. alert('getEvaluationCallback: ' + document.formEnvio. iLM_PARAM_ArchiveContent.value);
  42. document.formEnvio. iLM_PARAM_ArchiveContent.value = strAnswer;
  43. document.formEnvio.iLM_PARAM_ActivityEvaluation.value = evaluationResult;
  44. document.formEnvio.submit();
  45. return true; // success
  46. }
  47. }
  48. //]]>
  49. </script>
  50. <div class="ladoalado">
  51. <div id="ladoesquerdo">
  52. <div class="bloco">
  53. O <i>iVProgH</i> é mais um sistema educacional livre do <i>LInE</i>, implementado em <i>HTML5</i>
  54. (usa fortemente <i>JavaScript</i>), este destinado ao ensino e aprendizagem de algoritmos e programação.
  55. O <i>iVProgH</i> é uma nova implementação do
  56. <i><a href="http://www.matematica.br/ivprog2" title="veja a segunda versao do iVProg Java">iVProg</a></i> que é implementado em <i>Java</i>.
  57. Ambos <i>iVProg</i> dispõem de um esquema para avaliação automática de exercícios, experimente!
  58. <br/>
  59. Esses sistemas foram desenhados a partir de um <i>modelo visual</i> para programação, podendo ser utilizado desde o
  60. segundo ciclo do Ensino Fundamental.
  61. <br/>
  62. </div>
  63. </div>
  64. <div id="ladodireito">
  65. <div class="bloco">
  66. Para adicionar <i>vari&aacute;veis</i> "clique" no bot&atilde;o <i>+ Vari&aacute;veis</i>.
  67. Para inserir um comando, "clique" no bot&atilde;o <i>+ Comando</i> escolhendo-o.
  68. Para interpretar seu c&oacute;digo, "clique" no bot&atilde;o <img src="img/botao_rodar.png">
  69. (abaixo, ao lado do bot&atilde;o "Limpar console").<br/>
  70. Ver alguns outros exemplos de codigo no <i>iVProgH</i>:
  71. <a href="main.html?lang=en&iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=./exerc/exemplo_n_primeiros_fibonacci.ivph"
  72. title="Listar os n primeiros termos da sequencia de Fibonacci">programa para imprimir n primeiros numeros de Fibonaccii</a> ;
  73. <!--
  74. <a href="main.html?lang=en&iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=./exerc/exerc_ivprogh5_print_constants_1_2.ivph"
  75. title="clique para ver um exercicio com avaliacao automatica">exercicio imprimir constantes 1 e 2</a> ;
  76. -->
  77. <a href="main.html?lang=en&iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=./exerc/exerc_ivprogh5_somar2inteiros_digitados.ivph"
  78. title="clique para ver um exercicio com avaliacao automatica">exercicio 2: ler 2 valores e imprimir sua soma</a> ;
  79. <a href="main.html?lang=en&iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=./exerc/solucao_ivp_aluno1_exerc2.ivph"
  80. title="clique para ver solucao do exercico de ler valor e imprimi-lo">Ver solucao do exercício 2</a>.
  81. <!-- sol_ler2int_imprimir_soma_v2.png -->
  82. <br/>
  83. <!-- ou abaixo para entrar dentro do index,
  84. Para examinar um c&oacute;digo simples
  85. <a href="main.html?iLM_PARAM_AssignmentURL=true&iLM_PARAM_Assignment=./exerc/exemplo_imprima.ivph#/create/" title="Listar os n primeiros termos da sequencia de Fibonacci">clique aqui</a>.
  86. -->
  87. </div>
  88. </div>
  89. </div><!-- class="ladoalado" -->
  90. <div class="bloco">
  91. <a href="manual/" title="Resumo sobre o funcionamento do iVProgH">Sobre funcionamento do iVProgH</a>
  92. </div>
  93. <div class="bloco">
  94. <strong> Exercício 1: </strong>
  95. <i>Fazer um algoritmo que solicite que o usuário digite 2 valores (inteiros),
  96. depois compute a soma dos valores digitados e por último imprima esta soma.
  97. <br/>
  98. Algumas explicações adicionais:
  99. <ul>
  100. <li>Na versão do <i>iVProgH</i> apresentada abaixo, aparece na parte inferior o gabarito utilizado para
  101. realizar a avaliação automática. É possível suprimir isso eliminando o rótulo <tt>&iLM_PARAM_SendAnswer=true</tt>
  102. <!-- MA_PARAM_notSEND iLM_PARAM_SendAnswer -->
  103. dos parâmetros (examine o código <i>HTML</i> desta página para entender isso).
  104. </li>
  105. <li>Após finalizar seu algoritmo "clicar" no botao "Enviar resposta".</li>
  106. </ul>
  107. <br/>
  108. </div>
  109. <!--
  110. Atencao e' preciso que existe PHP para mostrar a acao para gravar (via programa PHP 'gravar.php'.
  111. %3A :
  112. %2F /
  113. %3D =
  114. %26 &
  115. -->
  116. <center>
  117. <div class="bloco">
  118. <iframe frameborder="0" name="iLM"
  119. src="main.html?lang=pt_br&iLM_PARAM_Assignment=./exerc/exerc_ivprogh5_somar2inteiros_digitados.ivph&iLM_PARAM_SendAnswer=true"
  120. style="width: 800px; height: 600px;" id="iLM">
  121. </iframe>
  122. <!-- /home/leo/projetos/iMA/ima/sobre_protocolo/sobre-protocolo-ima.txt
  123. Explicacoes sobre os parametros para configurar a carga do iVProgH
  124. - lang: "lang=pt_br" => carrega em Portugues; "lang=en" => carrega em Ingles
  125. - iLM_PARAM_Assignment: nome do arquivo a ser carregado, pode ser um exemplo (com codigo pronto) ou um gabarito (com dados de entradas x saidas)
  126. - iLM_PARAM_SendAnswer: se "false" => que NAO mostra o gabarito - para mostrar, eliminar "&iLM_PARAM_SendAnswer=false" ou deixar &iLM_PARAM_SendAnswer=true"
  127. -->
  128. <form name='formEnvio' id='formEnvio' method='post' action='gravar.php' enctype='multipart/form-data'>
  129. <!-- document.formEnvio.MA_POST_Archive.value document.formEnvio.MA_POST_Value.value -->
  130. <!-- document.formEnvio.iLM_PARAM_ArchiveContent.value document.formEnvio.iLM_PARAM_ActivityEvaluation.value-->
  131. <input type='hidden' name='iLM_PARAM_ArchiveContent' />
  132. <input type='hidden' name='iLM_PARAM_ActivityEvaluation' />
  133. <p><textarea rows='2' cols='60' name='submission_comment'></textarea></p>
  134. <input type=button value='Enviar resposta' onclick = 'javascript:window.resp();' title='clique aqui para enviar sua resposta' />
  135. </form>
  136. </div><!-- class="bloco" -->
  137. </center>
  138. <!--
  139. SAW
  140. iframe frameborder="0" name="iLM"
  141. src="ilm/ivprog-html/main.html?1=1&iLM_PARAM_AssignmentURL=true&
  142. iLM_PARAM_Assignment=https%3A%2F%2Fsaw.atp.usp.br%2Fmod%2Fiassign%2Film_security.php%3Fid%3D108329%26token%3D89eac22c2e7d00304e0a069168950af6%26view%3D1&
  143. iLM_PARAM_SendAnswer=false&
  144. iLM_PARAM_ServerToGetAnswerURL=https%3A%2F%2Fsaw.atp.usp.br%2Fmod%2Fiassign%2Fview.php%3Faction%3Dget_answer%26iassign_submission_current%3D20664%26id%3D16658%26iassign_current%3D5051%26userid_iassign%3D3&
  145. lang=pt"
  146. /var/www/html/ivprogh5/js/app-i18n.js
  147. 'msg_testcases' : 'Casos de teste (para autoria de exercícios)',
  148. /var/www/html/ivprogh5/partials/create.html
  149. 'msg_testcases' : <div id="caseTests" ng-show="notSend"> = iLM_PARAM_SendAnswer=false&
  150. -->
  151. <div class="foot"><center>
  152. <a href="http://www.ime.usp.br/line">LInE</a> |
  153. <a href="http://www.matematica.br">iM&aacute;tica</a> |
  154. <a href="http://www.usp.br/line/mooc">MOOC</a>
  155. </center></div>
  156. </div><!-- class="indent1" -->
  157. </body>
  158. </html>