index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <title></title>
  6. <link href="css/roboto.css" type="text/css" rel="stylesheet">
  7. <link rel="stylesheet" href="css/semantic.min.css"/>
  8. <link rel="stylesheet" type="text/css" href="css/codemirror.css">
  9. <link rel="stylesheet" type="text/css" href="css/show-hint.css">
  10. <link rel="stylesheet" type="text/css" href="css/ttcn.css">
  11. <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
  12. <link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
  13. <link rel="stylesheet" type="text/css" href="css/ivprog-editor.css">
  14. <script src="js/jquery.min.js"></script>
  15. <script src="js/jquery-ui.min.js"></script>
  16. <script src="js/semantic.min.js"></script>
  17. <script src="js/Sortable.js"></script>
  18. <script src="js/iassign-integration-functions.js"></script>
  19. <!-- Accessible UI CSS -->
  20. <link rel="stylesheet" href="css/accessible/style.css"/>
  21. <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap.css"/>
  22. <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-grid.css"/>
  23. <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-reboot.css"/>
  24. <link rel="stylesheet" href="css/accessible/fontawesome/css/all.css"/>
  25. <link rel="stylesheet" href="css/accessible/design.css"/>
  26. <link rel="stylesheet" href="css/accessible/forms_var_comand.css"/>
  27. </head>
  28. <body>
  29. <!-- Change UI -->
  30. <div class="row">
  31. <div class="col-12 p-3 text-center">
  32. <div class="btn-group">
  33. <button type="button" class="btn btn-info" id="enableVisualUI">Interface interativa</button>
  34. <button type="button" class="btn btn-info" id="enableAccessibleUI">Interface acessível</button>
  35. </div>
  36. </div>
  37. </div>
  38. <!-- Change UI -->
  39. <!-- Visual UI -->
  40. <div id="visualInterface">
  41. <div class="ui height_100 add_accordion" id="ui_main_div">
  42. <div class="title default_visual_title">
  43. <i class="dropdown icon"></i>
  44. </div>
  45. <div class="content height_100">
  46. <div class="ui raised container segment div_to_body">
  47. <div class="ui container main_title only_in_frame">
  48. <h2>iVProg</h2>
  49. </div>
  50. <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -20px;">
  51. <a class="item active visual_coding_button">
  52. <i class="window maximize outline icon"></i>
  53. </a>
  54. <a class="item textual_coding_button">
  55. <i class="code icon"></i>
  56. </a>
  57. <a class="item upload_file_button disabled">
  58. <i class="upload icon"></i>
  59. </a>
  60. <a class="item download_file_button disabled">
  61. <i class="download icon"></i>
  62. </a>
  63. <a class="item undo_button disabled">
  64. <i class="undo icon"></i>
  65. </a>
  66. <a class="item redo_button disabled">
  67. <i class="redo icon"></i>
  68. </a>
  69. <a id="run_button" class="item run_button">
  70. <i class="play icon"></i>
  71. </a>
  72. <a id="stop_button" class="item stop_button" style="display: none">
  73. <i class="stop icon"></i>
  74. </a>
  75. <a class="item assessment assessment_button">
  76. <i class="check icon"></i>
  77. </a>
  78. <!--<a class="item expand_button">
  79. <i class="expand arrows alternate icon"></i>
  80. </a>-->
  81. <a class="item help_button">
  82. <i class="help icon"></i>
  83. </a>
  84. </div>
  85. <div class="ui one column container segment ivprog_visual_panel loading">
  86. <div class="global_var">
  87. <div class="ui icon button add-globalVar-button add_global_button purple">
  88. <i class="icons">
  89. <i class="icon superscript"
  90. style="margin-top: -2px;margin-bottom: 2px;margin-left: 1px;margin-right: 1px; font-size: 18px;"></i>
  91. <i class="corner add icon inverted"
  92. style="font-size: 10px;padding-top: 5px;padding-left: 7px;"></i>
  93. </i>
  94. </div>
  95. <div class="list_globals" id="listGlobalsHandle"></div>
  96. </div>
  97. <div class="all_functions list-group" id="listWithHandle">
  98. </div>
  99. <div class="ui teal small labeled icon button add_function_button">
  100. <data class="i18n" value="ui:btn_function">Function</data>
  101. <i class="add icon"></i>
  102. </div>
  103. <div class="program_final"></div>
  104. </div>
  105. <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
  106. <textarea id="ivprog-text-editor" class=".ivprog_textual_code"></textarea>
  107. </div>
  108. <div id='ivprog-term-div' class="six column wide">
  109. </div>
  110. </div>
  111. </div>
  112. <div class="dimmer_content_message">
  113. <h3>Aconteceu um erro ao processar a atividade. <br> Recarregue a página para tentar novamente.</h3>
  114. <button class="positive ui button" onclick="window.parent.location.reload()">Recarregar</button>
  115. </div>
  116. <script src="js/iassign-integration-functions.js"></script>
  117. </div>
  118. </div>
  119. <!-- Visual UI -->
  120. <!-- Accessible UI -->
  121. <div class="container" id="accessibleInterface" style="display: none;">
  122. <!-- Header -->
  123. <nav class="navbar navbar-expand-lg navbar-dark">
  124. <a class="navbar-brand" tabindex="0">iVProg Acessível</a>
  125. <div class="collapse navbar-collapse" id="navbarNav">
  126. <ul class="navbar-nav">
  127. <li class="nav-item">
  128. <a class="nav-link" href="#inicio" title="Alt + i" accesskey="i">Ir função inicio</a>
  129. </li>
  130. <li class="nav-item">
  131. <a class="nav-link" href="#terminal" title="Alt + t" accesskey="t">Ir para o terminal</a>
  132. </li>
  133. <li class="nav-item">
  134. <a class="nav-link" id="goToCommands" href="javascript:void(0)" title="Alt + c" accesskey="t">Ir para a lista de comandos</a>
  135. </li>
  136. </ul>
  137. </div>
  138. </nav>
  139. <!-- Header -->
  140. <!-- Main container -->
  141. <div id="main" class="row" role="main">
  142. <div class="col-12">
  143. <fieldset>
  144. <legend class="p-1">
  145. <h1 tabindex="0" id="inicio">Função início</h1>
  146. </legend>
  147. <ol id="htmlOlCommandsVariablesVariables"></ol>
  148. <ol id="htmlOlCommandsVariablesOperations"></ol>
  149. <div class="row">
  150. <div class="col-12 p-4" style="text-align: right;">
  151. <div id="botoes" class="btn-group">
  152. <div class="dropdown btn btn-primary" id="bt_add_comand">
  153. <a class="btn btn-primary dropdown-toggle" role="button" tabindex="0"
  154. id="commands" data-toggle="dropdown" aria-haspopup="true"
  155. aria-expanded="false">
  156. Comandos
  157. </a>
  158. <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  159. <a class="dropdown-item" href="#" id="createVariableButton">
  160. Nova Variável
  161. </a>
  162. <a class="dropdown-item" href="#" id="assignVariableButton">
  163. Atribuição e Operações
  164. </a>
  165. <a class="dropdown-item" href="#" id="printButton">
  166. Escreva
  167. </a>
  168. </div>
  169. </div>
  170. <button class="btn btn-success" id="runCodeButton" type="button">
  171. Executar
  172. <i id="runCodePlayIcon" class="play icon" style="display: inline;"></i>
  173. <i id="runCodeStopIcon" class="stop icon" style="display: none;"></i>
  174. </button>
  175. <button class="btn btn-danger" id="cleanCommands" type="button">
  176. Excluir comandos
  177. <i id="cleanCommandsIcon" class="fa fa-trash-alt"></i>
  178. </button>
  179. </div>
  180. </div>
  181. </div>
  182. </fieldset>
  183. </div>
  184. </div>
  185. <!-- Main container -->
  186. <br/>
  187. <!-- Terminal -->
  188. <div class="row">
  189. <div class="col-12">
  190. <div id="terminal" class="acessible-terminal" style="width: 97%; margin-left: 2%"></div>
  191. </div>
  192. </div>
  193. <!-- Terminal -->
  194. <!-- Debug only -->
  195. <div class="row" style="display: none">
  196. <div class="col-12">
  197. <h5>Código gerado para debug - Código gerado</h5>
  198. <div style="width: 97%; margin-left: 2%; background-color: wheat; color: black;">
  199. <code id="generatedCode">
  200. </code>
  201. </div>
  202. </div>
  203. </div>
  204. <!-- Debug only -->
  205. </div>
  206. <!-- Accessible UI -->
  207. <!-- Accessible UI JS -->
  208. </body>
  209. <script>
  210. var mouseX;
  211. var mouseY;
  212. $(document).ready(() => {
  213. var $buttons = $('.ivprog_format .button'),
  214. handler = {
  215. activate: function () {
  216. $(this)
  217. .addClass('active')
  218. .siblings()
  219. .removeClass('active');
  220. }
  221. };
  222. $buttons.on('click', handler.activate);
  223. $('.ivprog_format_info').popup(
  224. {
  225. popup: $('.custom.popup'),
  226. on: 'click'
  227. });
  228. $(".data_types_dropdown").dropdown();
  229. $('.ui.dropdown').dropdown();
  230. $('.ivprog_visual_panel').removeClass("loading");
  231. $(document).mousemove(function (e) {
  232. var parentOffset = $('.ivprog_visual_panel').offset();
  233. ;
  234. mouseX = e.pageX - parentOffset.left + 300;
  235. mouseY = e.pageY - parentOffset.top + 100;
  236. /*$('.created_element').css('top', mouseY);
  237. $('.created_element').css('left', mouseX);*/
  238. });
  239. ivprogCore.LocalizedStrings.updateTagText();
  240. ivprogCore.CodeEditor.initTextEditor("ivprog-text-editor");
  241. iassingIntegration();
  242. if (iLMparameters.iLM_PARAM_TeacherAutoEval == null) {
  243. ivprogCore.initVisualUI();
  244. }
  245. ivprogCore.initAccessibleUI();
  246. });
  247. </script>
  248. <!-- Accessible JS -->
  249. <script src="js/accessible/bootstrap/bootstrap.bundle.js"></script>
  250. <script src="js/accessible/bootstrap/bootstrap.js"></script>
  251. <script>
  252. const visualInterface = document.getElementById('visualInterface');
  253. const accessibleInterface = document.getElementById('accessibleInterface');
  254. document.getElementById('enableVisualUI').addEventListener('click', (event) => {
  255. visualInterface.style.display = 'block';
  256. accessibleInterface.style.display = 'none';
  257. });
  258. document.getElementById('enableAccessibleUI').addEventListener('click', (event) => {
  259. visualInterface.style.display = 'none';
  260. accessibleInterface.style.display = 'block';
  261. });
  262. </script>
  263. </html>