index.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  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. <!--
  51. <div class="ladoalado">
  52. <div id="ladoesquerdo">
  53. </div>
  54. <div id="ladodireito">
  55. </div>
  56. </div><!-- class="ladoalado" -->
  57. <div class="bloco">
  58. O <i>iVProgH</i> é mais um sistema educacional livre do <i>LInE</i>, implementado em <i>HTML5</i>
  59. (usa fortemente <i>JavaScript</i>), este destinado ao ensino e aprendizagem de algoritmos e programação.
  60. O <i>iVProgH</i> é uma nova implementação do
  61. <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>.
  62. Ambos <i>iVProg</i> dispõem de um esquema para avaliação automática de exercícios, experimente!
  63. <br/>
  64. Esses sistemas foram desenhados a partir de um <i>modelo visual</i> para programação, podendo ser utilizado desde o
  65. segundo ciclo do Ensino Fundamental.
  66. <br/>
  67. </div>
  68. <div class="bloco">
  69. <div class="secao">1. Sobre a interface principal</div>
  70. <div class="ladoalado">
  71. <div id="ladoesquerdo">
  72. <p>
  73. A imagem 1 apresenta a interface inicial do <i>iVProgH</i> (quando configurado para não apresentar o gabarito do exercício).
  74. <br/>
  75. Abaixo são explicadas os cinco botões da interface principal e a área cinza inferior seguindo a ordem em que aparecem, de cima para baixo.
  76. </p>
  77. <ol>
  78. <li>
  79. <img src="imagens/botao_avaliar.png" title="botao para avaliar o codigo quando tratar-se de exercicio"/> &nbsp; &nbsp;
  80. Este botão deve ser utilizado para avaliar o código resposta a um exercícios;
  81. </li>
  82. <li>
  83. <img src="imagens/botao_variaveis.png" title="botao para criar variaveis"/> &nbsp; &nbsp;
  84. Este botão serve para criar novas variáveis (que nascem com nomes <tt>newVarN</tt>, se de um "clique" duplo sobre seu nome pode-se alterá-lo);
  85. </li>
  86. </ol>
  87. </p>
  88. </div>
  89. <div id="ladodireito">
  90. <center>
  91. <img src="imagens/manual_interface_1.png" title="interface inicial"/>
  92. <br/>
  93. <i>Fig. 1</i>: Interface principal do <i>iVProgH</i>.
  94. </center>
  95. </div>
  96. <ol start="3">
  97. <li>
  98. <img src="imagens/botao_comandos.png" title="botao para inserir no codigo comandos"/> &nbsp; &nbsp;
  99. Este botão serve para inserir no código novos comandos (vide abaixo "Sobre opções de comandos"));
  100. </li>
  101. <li>
  102. <img src="imagens/botao_rodar.png" title="botao para rodar o codigo atual"/> &nbsp; &nbsp;
  103. Este botão serve para "rodar" o código construído;
  104. </li>
  105. <li>
  106. <img src="imagens/botao_limpar_console.png" title="botao para limpar a area de saida de dados"/> &nbsp; &nbsp;
  107. Este botão serve para "limpar" o console de mensagens, ou seja, remove todas as mensagens previamente "impressas";
  108. </li>
  109. <li>
  110. <img src="imagens/area_saidas.png" title="area para saida de dados"/> &nbsp; &nbsp;
  111. Esta é a área em que as mensagens aparecerão (as saídas de dados).
  112. </li>
  113. </ol>
  114. </div>
  115. </div>
  116. <div class="bloco">
  117. <div class="secao">1. Sobre variáveis</div>
  118. <p>
  119. Em qualquer ambiente para codificar algoritmos, as variáveis são utilizadas para armazenar valores a serem utilizados no código.
  120. Um exemplo simples de sua utilidade é a obtenção do quadrado de um número a ser digitado pelo usuário.
  121. Ou seja, ao escrever o código o programador <b>não</b> sabe qual valor será digitado, assim tem que redigir seu código supondo
  122. um "local" especial para armazenar o valor a ser digitado, que é representado por uma variável.
  123. </p>
  124. <div class="subsecao">1.1 Sobre a criação de variáveis</div>
  125. <p>
  126. No <i>iVProgH</i>, para criar uma nova variável deve-se utilizar o botão <img src="imagens/botao_variaveis.png" title="botao para criar variaveis"/>.
  127. </p>
  128. <p>
  129. Inicialmente não existem variáveis disponíveis (como indicado na figura 1). Ao "clicar" a primeira vez no botão para criar
  130. variável, aparecerá uma nova variável (atualmente com nome inicial <tt>newVar0</tt>).
  131. Mas pod-se "clicar" sobre o nome da variável para alterar seu <i>nome</i>.
  132. </p>
  133. <p>
  134. Na imagem abaixo estão 3 passos para a criação e edição dos nomes de 2 variáveis, cronologicamente da esquerda para a direita..
  135. Na esquerda resultado após criar as 2 variáveis, seguida da imagem indicando o início da alteração do nome da primeira variável e,
  136. mais à direita, o resultado após trocar os nomes das variáveis, respectivamente, para <tt>a</tt> e <tt>b</tt>.
  137. <br/>
  138. <center>
  139. <img src="imagens/var_img1.png" title="processo de criacao e alteraco de nomes em 3 passos: 1. criar var."/>
  140. <img src="imagens/var_img2.png" title="processo de criacao e alteraco de nomes em 3 passos: 2. alterar nome 1"/>
  141. <img src="imagens/var_img3.png" title="processo de criacao e alteraco de nomes em 3 passos: 3. nomes alterados"/>
  142. <br/>
  143. <i>Fig. 2</i>: Processo de criação e alteração de nomes de variáveis.
  144. </center>
  145. </p>
  146. <div class="subsecao">1.2 Sobre os tipos de variáveis</div>
  147. <p>
  148. Outra característica importante de variáveis é o espaço que cada uma ocupa e o formato de sua representação.
  149. Isso quer dizer que cada <i>tipo de variável</i> utiliza uma quantidade padrão de memória (isso costuma ser expresso
  150. em <i>bytes</i> - agrupamento de 8 <i>bits</i>).
  151. Esta questão não será aprofundada aqui, pois o foco deste manual é apresentar os rudimentos da programação e o
  152. funcionamento básico do <i>iVProgH</i>.
  153. </p>
  154. <p>
  155. Mas existe uma questão muito importante que precisa ser enfatizada: qualquer computador digital dispõe de uma quantidade finita
  156. de memória e por isso <b>não</b> consegue representar qualquer número.
  157. Se quiser entender a razão dessa impossibilidade, tente entender a frase seguinte, senão pule-a.
  158. <blockquote>
  159. Os números inteiros são infinitos, não existindo nem um maior inteiro e nem um menor inteiro,
  160. ou dito de outra forma, dado qualquer número inteiro
  161. sempre existe um outro maior que ele e também um outro menor que ele!
  162. <br/>
  163. Assim, suponha que cada dígito (que são: <i>0</i>, <i>1</i> até <i>9</i>) precise de <i>4</i> <i>bits</i> para ser representado
  164. e que o computador considerado tenha disponível um total de <i>N</i> <i>bits</i>. Então este computador poderia representar
  165. um número com até <i>N/4</i> dígitos.
  166. <br/>
  167. Por exemplo, um computador básico atual vem com no mínimo <i>2 giga-bytes</i> de espaço em memória (<i>RAM - Random Access Memory</i>),
  168. o que equivale a aproximadamente 2 bilhões de <i>bytes</i>, resultando em <i>2 x 8</i> bilhões de <i>bits</i>.
  169. Assim, o maior número inteiro positivo que caberia neste computador seria um número com
  170. <i>2 x 8 / 4 = 16</i> bilhões de dígitos.
  171. <br/>
  172. Note que um inteiro com <i>16</i> bilhões de dígitos é tremendamente maior que o inteiro 16 bilhões, pois esse último tem apenas <i>11</i> dígitos.
  173. <br/>
  174. Então, se representarmos esse número com <i>16</i> bilhões de dígitos por <i>X</i>, basta multiplicá-lo por 10 que resultaria em um
  175. número com <i>16</i> bilhões e <i>1</i> dígitos, o que <b>não</b> caberia na memória do computador considerado,
  176. o que resultaria em erro (que usualmente é denominado por <i>overflow</i>).
  177. </blockquote>
  178. </p>
  179. <p>
  180. Se estiver interessado em saber um pouquinho mais sobre esta questão de espaço-representação,
  181. <a href="https://www.ime.usp.br/~leo/mac2166/2017-1/introducao_var.html" title="sobre variaveis e expressoes aritmeticas">siga este apontador</a> e
  182. <a href="https://www.ime.usp.br/~leo/mac2166/2017-1/introducao_char_float.html" title="sobre caracteres e numeros simulando os reais">este apontador</a>.
  183. </p>
  184. <p>
  185. Do ponto de vista prático, no <i>iVProgH</i> estão disponíveis as variáveis
  186. inteiras, reais, textos e lógicas.
  187. Ao criar uma variável, como indicado na figura 2, esta "nasce" do tipo <i>inteira</i>.
  188. Para alterar seu tipo, pode-se "clicar" no ícone da <i>chave inglesa</i>, ao lado do nome da variável (e.g. <tt>newVar0</tt>) e
  189. escolhendo o tipo.
  190. </p>
  191. <p>
  192. Abaixo uma imagem ilustrando como alterar o tipo da variável de nome <i>x</i> de <i>inteiro</i> para <i>real</i>, em 3 passos.
  193. <center>
  194. <img style="vertical-align: top;" src="imagens/var_tipo_1.png" title="processo de alteraco de tipo: 1. tipo inicial (inteiro)."/>
  195. <img style="vertical-align: top;" src="imagens/var_tipo_2.png" title="processo de alteraco de tipo: 2. escolhendo novo tipo (real)."/>
  196. <img style="vertical-align: top;" src="imagens/var_tipo_3.png" title="processo de alteraco de tipo: 3. tipo final (real)."/>
  197. <br/>
  198. <i>Fig. 3</i>: Processo de alteração de tipo inteiro para real na variável <i>x</i>.
  199. </center>
  200. </p>
  201. <p>
  202. Note que na esquerda aparece <tt>x=1</tt>, enquanto na direita vê-se <tt>x=1.0000</tt>.
  203. Isso significa que a variável <tt>x</tt> será iniciada com a unidade e que o aparecimento de "ponto decimal"
  204. diferencia o tipo <i>inteiro</i> do tipo <i>real</i>, no primeiro aparece <tt>1</tt> e no último <tt>1.0000</tt>.
  205. O valor inicial da variável pode ser alterado de modo análogo à alteração de seu nome, basta "clicar" sobre o número e editá-lo.
  206. </p>
  207. </div>
  208. <div class="bloco">
  209. <div class="secao">2. Sobre comandos</div>
  210. <p>
  211. Os <i>comandos</i> são as difentes instruções disponíveis na linguagem. Na atual versão do <i>iVProgH</i> existem seis (6) diferentes
  212. comandos, explicados abaixo.
  213. <br/>
  214. Em cada um dos 6 comando, apresentaremos uma versão sintética do comando, em uma linguagem que será apelidada de
  215. <b>Portugol</b>. Também será apresentado um exemplo em linguagem <b>C</b>.
  216. </p>
  217. <p>
  218. <ol>
  219. <li>
  220. <tt class="corDef">Atribuição</tt> &nbsp; &nbsp; Para atribuir valor a alguma variável. Obtém-se a imagem abaixo.
  221. <br/>
  222. <i class="corEx">Representação em "Portugol"</i>: <tt>x = x * x + x + 1;</tt>. Variável <tt>x</tt> receberá o valor resultante da expressão à direita (<tt>x * x + x + 1;</tt>).
  223. <br/>
  224. <i class="corEx">Representação em C</i>: <tt>x = x * x + x + 1;</tt>.
  225. <br/>
  226. <center>
  227. <img style="vertical-align: top;" src="imagens/com_attrib_1.png" title="comando de Atribuicao"/>
  228. <br/>
  229. <i>Fig. 4</i>: Comando de atribuição, situação inicial.
  230. </center>
  231. Nesse momento deve-se selecionar a variável (destacado em fundo amarelo) e depois
  232. construir a expressão aritmética que definirá a variável. Por exemplo, pode-se fazer <tt>i = i+1</tt>, significando a variável
  233. <b>receberá</b> o valor atual nela acrescido de uma unidade.<br/>
  234. Em programação a atribuição <tt>x = x*x + x + 2</tt> deve ser entendida como:
  235. cálcula-se primeiro o valor da expressão à direita, cujo resultado final é atribuido à variável à esquerda.</li>
  236. <li>
  237. <tt class="corDef">Se verdadeiro então</tt> &nbsp; &nbsp; Para executar comando de acordo com uma condição (<i>expressão lógica</i>).
  238. <br/>
  239. <i class="corEx">Representação em "Portugol"</i>: <tt>se (a &lt; b) faça CMD1; senão CMD2</tt>.
  240. Se <tt>a</tt> for estritamente menor que <tt>b</tt>, execute comando <tt>CMD1</tt>, senão execute comando <tt>CMD2</tt>.
  241. <br/>
  242. <i class="corEx">Representação em C</i>: <tt>if (a &lt; b) CMD1; else CMD2;</tt>. Sendo <tt>CMD1</tt> e <tt>CMD2</tt> qualquer comando válido de <tt>C</tt>.
  243. <br/>
  244. <center>
  245. <img style="vertical-align: top;" src="imagens/com_se_entao_1.png" title="comando Se-Entao"/>
  246. <br/>
  247. <i>Fig. 5</i>: Comando de <i>seleção</i>.
  248. </center>
  249. Nesse momento deve-se selecionar a variável
  250. (a versão corrente tem um erro: ao clicar no <tt>Selecione...</tt> deve-se pegar a opção <tt>Valor</tt> e não <tt>Variável</tt>)
  251. e seguir construindo a expressão lógica.
  252. <br/>
  253. <b>Atenção</b>, a decisão (execução do comando) ocorre durante sua execução, com os valores desse contexto.
  254. Durante a execução, a condição é avaliada, se resoltar verdadeiro o comando subordinado ao <tt>se</tt> será executado,
  255. senão será executado o comando sob o <tt>senão</tt>. Pode-se deixar qualquer um deles vazio.
  256. <br/>
  257. <br/>
  258. <i>Exemplo</i>: para a expressão <tt>a &lt; b</tt>
  259. </li>
  260. <li>
  261. <tt class="corDef">Repita N vezes</tt> &nbsp; &nbsp; Repetir todos os comandos sobordinados (sob esse) <tt>N</tt> vezes.
  262. <br/>
  263. <i class="corEx">Representação em "Portugol"</i>: <tt>repetir N vezes { CMD1; ...; CMK; }</tt>.
  264. <br/>
  265. <i class="corEx">Representação em C</i>: <tt>for (i=0; i &lt; N; i++) { CMD1; ...; CMK; }</tt>.
  266. <br/>
  267. <center>
  268. <img style="vertical-align: top;" src="imagens/com_for_1.png" title="comando de repeticao for"/>
  269. <br/>
  270. <img style="vertical-align: top;" src="imagens/com_for_2.png" title="comando de repeticao for"/>
  271. <br/>
  272. <i>Fig. 6</i>: comando para repetir um número fixo de vezes (dado por uma variável ou expressão).
  273. </center>
  274. Na parte de superior da figura 6 está a imagem obtida imediatamente após pegar comando <tt>Repita N vezes</tt>,
  275. na parte inferior após "clicar" no símbolo
  276. <img style="vertical-align: top;" src="imagens/com_for_3.png" title="trocar numero de repeticoes"/>.
  277. </li>
  278. <li>
  279. <tt class="corDef">Enquanto verdadeiro</tt> &nbsp; &nbsp; Outro comando de repetição, repetindo enquanto a condição for verdadeira.
  280. <br/>
  281. <i class="corEx">Representação em "Portugol"</i>: <tt>enquanto (CONDICAO) { CMD1; ...; CMK; }</tt>.
  282. <br/>
  283. <i class="corEx">Representação em C</i>: <tt>while (CONDICAO) { CMD1; ...; CMK; }</tt>.
  284. <br/>
  285. <center>
  286. <img style="vertical-align: top;" src="imagens/com_enquanto_1.png" title="comando de repeticao com condicao de entrada"/>
  287. <br/>
  288. <i>Fig. 7</i>: comando para repetir enquanto a condição resultar verdadeiro.
  289. </center>
  290. Nesse comando, o bloco subordinando será repetido até que a condição de entrada deixe de ser verdadeira.
  291. </li>
  292. <li>
  293. <tt class="corDef">Leitura de dados</tt> &nbsp; &nbsp; Comando para permitir que o usuário <i>entre</i> um <i>número/texto/Verdadeiro/Falso</i> para o programa.
  294. <br/>
  295. <i class="corEx">Representação em "Portugol"</i>: <tt>leia(x);</tt>. Ler um valor e armazenar em <tt>x</tt>.
  296. <br/>
  297. <i class="corEx">Representação em C</i>: <tt>scanf("%d", &x);</tt>.
  298. <br/>
  299. <center>
  300. <img style="vertical-align: top;" src="imagens/com_entrada_1.png" title="comando para entrada de dados (situacao inicial)"/>
  301. <br/>
  302. <img style="vertical-align: top;" src="imagens/com_entrada_2.png" title="comando para entrada de dado, a ser armazenado em x"/>
  303. <br/>
  304. <i>Fig. 8</i>: Comando para <i>entrada</i> de dados. Abaixo após definir a variável na qual o valor digitado será armazenado (<tt>x</tt>).
  305. </center>
  306. Nesse momento deve-se selecionar a variável (destacado em fundo amarelo) e depois
  307. </li>
  308. <li>
  309. <tt class="corDef">Escrita de dados</tt> &nbsp; &nbsp; Comando para permitir que o usuário receba uma <i>saída</i> do programa.
  310. <br/>
  311. <i class="corEx">Representação em "Portugol"</i>: <tt>escreva(x);</tt>. Escreva no dispositivo de saída padrão o valor armazenado em <tt>x</tt>.
  312. <br/>
  313. <i class="corEx">Representação em C</i>: <tt>printf("%d\n", x);</tt>.
  314. <br/>
  315. <center>
  316. <img style="vertical-align: top;" src="imagens/com_saida_1.png" title="comando para saida de dados (situacao inicial)"/>
  317. <br/>
  318. <img style="vertical-align: top;" src="imagens/com_saida_2.png" title="comando para saida de dados da variavel x"/>
  319. <br/>
  320. <i>Fig. 9</i>: Comando para <i>saída</i> de dados. Na imagem inferior após definir qual variável terá seu valor impresso.
  321. </center>
  322. Nesse momento deve-se selecionar a variável (destacado em fundo amarelo) e depois
  323. </li>
  324. </ol>
  325. </p>
  326. </div>
  327. <div class="bloco">
  328. <div class="secao">3. Solução para o Exercício 1: somar 2 números digitados</div>
  329. <strong> Exercício 1: </strong>
  330. <i>Fazer um algoritmo que solicite que o usuário digite 2 valores (inteiros), depois compute a soma dos valores digitados e por último imprima esta soma.
  331. <br/>
  332. <strong>Solução para o Exercício 1: </strong> passos para obter o algoritmo/programa da figura 10.<br/>
  333. <ul>
  334. <li>
  335. Criar 3 variáveis e renomeá-las para nomes mais significativos.
  336. Eventualmente poderia-se dispensar a variável <tt>soma</tt> e acumular a soma em <tt>a</tt> ou em <tt>b</tt>, mas o código não ficaria tão claro;
  337. </li>
  338. <li>
  339. Criar o comando <tt>leia(a);</tt> e <tt>leia(b);</tt>, para capturar e armazenar os 2 valores a serem digitados pelo usuário
  340. (seria impossível usar apenas uma, perderia-se o primeiro valor que fosse digitado);
  341. </li>
  342. <li>
  343. Criar o comando de atribuição correspondente ao comando Porgugol <tt>soma = a+b;</tt>;
  344. </li>
  345. <li>
  346. Criar o comando para imprimir a resposto, correspondente ao comando Portugol <tt>escreva(soma);</tt>;
  347. </ul>
  348. <br/>
  349. <center>
  350. <img style="vertical-align: top;" src="imagens/sol_exerc1.png" title="programa solucao do exercicio 1"/>
  351. <br/>
  352. <i>Fig. 10</i>: Imagem do programa para receber 2 valores digitados e imprimir sua soma.
  353. </center>
  354. <br/>
  355. </div>
  356. <!--
  357. Atencao e' preciso que existe PHP para mostrar a acao para gravar (via programa PHP 'gravar.php'.
  358. %3A :
  359. %2F /
  360. %3D =
  361. %26 &
  362. -->
  363. <center>
  364. <div class="bloco">
  365. <div class="secao">4. <i>iVProgH</i> com o exercício 1 (da soma de 2 inteiros) para experimentar novamente.</div>
  366. <iframe frameborder="0" name="iLM"
  367. src="../main.html?lang=pt_br&iLM_PARAM_Assignment=../exerc/exerc_ivprogh5_somar2inteiros_digitados.ivp&iLM_PARAM_SendAnswer=false"
  368. style="width: 800px; height: 600px;" id="iLM">
  369. </iframe>
  370. <!-- /home/leo/projetos/iMA/ima/sobre_protocolo/sobre-protocolo-ima.txt
  371. Explicacoes sobre os parametros para configurar a carga do iVProgH
  372. - lang: "lang=pt_br" => carrega em Portugues; "lang=en" => carrega em Ingles
  373. - 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)
  374. - iLM_PARAM_SendAnswer: se "false" => que NAO mostra o gabarito - para mostrar, eliminar "&iLM_PARAM_SendAnswer=false" ou deixar &iLM_PARAM_SendAnswer=true"
  375. -->
  376. <form name='formEnvio' id='formEnvio' method='post' action='gravar.php' enctype='multipart/form-data'>
  377. <!-- document.formEnvio.MA_POST_Archive.value document.formEnvio.MA_POST_Value.value -->
  378. <!-- document.formEnvio.iLM_PARAM_ArchiveContent.value document.formEnvio.iLM_PARAM_ActivityEvaluation.value-->
  379. <input type='hidden' name='iLM_PARAM_ArchiveContent' />
  380. <input type='hidden' name='iLM_PARAM_ActivityEvaluation' />
  381. <p><textarea rows='2' cols='60' name='submission_comment'></textarea></p>
  382. <input type=button value='Enviar resposta' onclick = 'javascript:window.resp();' title='clique aqui para enviar sua resposta' />
  383. </form>
  384. </div><!-- class="bloco" -->
  385. </center>
  386. <!--
  387. /var/www/html/ivprogh5/img/manual_interface_1.png
  388. /var/www/html/ivprogh5/js/app-i18n.js
  389. 'msg_testcases' : 'Casos de teste (para autoria de exercícios)',
  390. /var/www/html/ivprogh5/partials/create.html
  391. 'msg_testcases' : <div id="caseTests" ng-show="notSend"> = iLM_PARAM_SendAnswer=false&
  392. -->
  393. <div class="foot"><center>
  394. <a href="http://www.ime.usp.br/line">LInE</a> |
  395. <a href="http://www.matematica.br">iM&aacute;tica</a> |
  396. <a href="http://www.usp.br/line/mooc">MOOC</a>
  397. </center></div>
  398. </div><!-- class="indent1" -->
  399. </body>
  400. </html>