|
|
@@ -18,273 +18,277 @@
|
|
|
<script src="js/iassign-integration-functions.js"></script>
|
|
|
|
|
|
<!-- Accessible UI CSS -->
|
|
|
- <link rel="stylesheet" href="css/accessible/style.css"/>
|
|
|
- <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap.css"/>
|
|
|
- <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-grid.css"/>
|
|
|
- <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-reboot.css"/>
|
|
|
- <link rel="stylesheet" href="css/accessible/design.css"/>
|
|
|
- <link rel="stylesheet" href="css/accessible/forms_var_comand.css"/>
|
|
|
+ <link rel="stylesheet" href="css/accessible/style.css" />
|
|
|
+ <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap.css" />
|
|
|
+ <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-grid.css" />
|
|
|
+ <link rel="stylesheet" href="css/accessible/bootstrap/bootstrap-reboot.css" />
|
|
|
+ <link rel="stylesheet" href="css/accessible/design.css" />
|
|
|
+ <link rel="stylesheet" href="css/accessible/forms_var_comand.css" />
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
-<!-- Change UI -->
|
|
|
-<div class="row">
|
|
|
- <div class="col-12 text-center">
|
|
|
- <div class="btn-group">
|
|
|
- <button type="button" id="enableVisualUI">Interface interativa</button>
|
|
|
- <button type="button" id="enableAccessibleUI">Interface acessível</button>
|
|
|
+ <!-- Change UI -->
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12 text-center">
|
|
|
+ <div class="btn-group">
|
|
|
+ <button type="button" id="enableVisualUI">Interface interativa</button>
|
|
|
+ <button type="button" id="enableAccessibleUI">Interface acessível</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-</div>
|
|
|
-<!-- Change UI -->
|
|
|
+ <!-- Change UI -->
|
|
|
|
|
|
-<!-- Visual UI -->
|
|
|
-<div id="visualInterface">
|
|
|
- <div class="ui height_100 add_accordion" id="ui_main_div">
|
|
|
+ <!-- Visual UI -->
|
|
|
+ <div id="visualInterface">
|
|
|
+ <div class="ui height_100 add_accordion" id="ui_main_div">
|
|
|
|
|
|
- <div class="title default_visual_title">
|
|
|
- <i class="dropdown icon"></i>
|
|
|
- </div>
|
|
|
+ <div class="title default_visual_title">
|
|
|
+ <i class="dropdown icon"></i>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="content height_100">
|
|
|
+ <div class="content height_100">
|
|
|
|
|
|
- <div class="ui raised container segment div_to_body">
|
|
|
+ <div class="ui raised container segment div_to_body">
|
|
|
|
|
|
- <div class="ui container main_title only_in_frame">
|
|
|
- <h2>iVProg</h2>
|
|
|
- </div>
|
|
|
+ <div class="ui container main_title only_in_frame">
|
|
|
+ <h2>iVProg</h2>
|
|
|
+ </div>
|
|
|
|
|
|
- <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>
|
|
|
- </a>
|
|
|
- <a class="item textual_coding_button">
|
|
|
- <i class="code icon"></i>
|
|
|
- </a>
|
|
|
- <a class="item upload_file_button disabled">
|
|
|
- <i class="upload icon"></i>
|
|
|
- </a>
|
|
|
- <a class="item download_file_button disabled">
|
|
|
- <i class="download icon"></i>
|
|
|
- </a>
|
|
|
- <a class="item undo_button disabled">
|
|
|
- <i class="undo icon"></i>
|
|
|
- </a>
|
|
|
- <a class="item redo_button disabled">
|
|
|
- <i class="redo icon"></i>
|
|
|
- </a>
|
|
|
- <a id="run_button" class="item run_button">
|
|
|
- <i class="play icon"></i>
|
|
|
- </a>
|
|
|
- <a id="stop_button" class="item stop_button" style="display: none">
|
|
|
- <i class="stop icon"></i>
|
|
|
- </a>
|
|
|
- <a class="item assessment assessment_button">
|
|
|
- <i class="check icon"></i>
|
|
|
- </a>
|
|
|
- <!--<a class="item expand_button">
|
|
|
+ <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>
|
|
|
+ </a>
|
|
|
+ <a class="item textual_coding_button">
|
|
|
+ <i class="code icon"></i>
|
|
|
+ </a>
|
|
|
+ <a class="item upload_file_button disabled">
|
|
|
+ <i class="upload icon"></i>
|
|
|
+ </a>
|
|
|
+ <a class="item download_file_button disabled">
|
|
|
+ <i class="download icon"></i>
|
|
|
+ </a>
|
|
|
+ <a class="item undo_button disabled">
|
|
|
+ <i class="undo icon"></i>
|
|
|
+ </a>
|
|
|
+ <a class="item redo_button disabled">
|
|
|
+ <i class="redo icon"></i>
|
|
|
+ </a>
|
|
|
+ <a id="run_button" class="item run_button">
|
|
|
+ <i class="play icon"></i>
|
|
|
+ </a>
|
|
|
+ <a id="stop_button" class="item stop_button" style="display: none">
|
|
|
+ <i class="stop icon"></i>
|
|
|
+ </a>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
+ <a class="item help_button">
|
|
|
+ <i class="help icon"></i>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="ui one column container segment ivprog_visual_panel loading">
|
|
|
+ <div class="ui one column container segment ivprog_visual_panel loading">
|
|
|
|
|
|
- <div class="global_var">
|
|
|
+ <div class="global_var">
|
|
|
|
|
|
|
|
|
- <div class="ui icon button add-globalVar-button add_global_button purple">
|
|
|
+ <div class="ui icon button add-globalVar-button add_global_button purple">
|
|
|
|
|
|
- <i class="icons">
|
|
|
- <i class="icon superscript"
|
|
|
- style="margin-top: -2px;margin-bottom: 2px;margin-left: 1px;margin-right: 1px; font-size: 18px;"></i>
|
|
|
- <i class="corner add icon inverted"
|
|
|
- style="font-size: 10px;padding-top: 5px;padding-left: 7px;"></i>
|
|
|
- </i>
|
|
|
+ <i class="icons">
|
|
|
+ <i class="icon superscript"
|
|
|
+ style="margin-top: -2px;margin-bottom: 2px;margin-left: 1px;margin-right: 1px; font-size: 18px;"></i>
|
|
|
+ <i class="corner add icon inverted"
|
|
|
+ style="font-size: 10px;padding-top: 5px;padding-left: 7px;"></i>
|
|
|
+ </i>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="list_globals" id="listGlobalsHandle"></div>
|
|
|
+ <div class="list_globals" id="listGlobalsHandle"></div>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="all_functions list-group" id="listWithHandle">
|
|
|
+ <div class="all_functions list-group" id="listWithHandle">
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- <div class="ui teal small labeled icon button add_function_button">
|
|
|
- <data class="i18n" value="ui:btn_function">Function</data>
|
|
|
- <i class="add icon"></i>
|
|
|
- </div>
|
|
|
- <div class="program_final"></div>
|
|
|
+ <div class="ui teal small labeled icon button add_function_button">
|
|
|
+ <data class="i18n" value="ui:btn_function">Function</data>
|
|
|
+ <i class="add icon"></i>
|
|
|
+ </div>
|
|
|
+ <div class="program_final"></div>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
|
|
|
- <textarea id="ivprog-text-editor" class=".ivprog_textual_code"></textarea>
|
|
|
- </div>
|
|
|
- <div id='ivprog-term-div' class="six column wide">
|
|
|
+ <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
|
|
|
+ <textarea id="ivprog-text-editor" class=".ivprog_textual_code"></textarea>
|
|
|
+ </div>
|
|
|
+ <div id='ivprog-term-div' class="six column wide">
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="dimmer_content_message">
|
|
|
+ <h3>Aconteceu um erro ao processar a atividade. <br> Recarregue a página para tentar novamente.</h3>
|
|
|
+ <button class="positive ui button" onclick="window.parent.location.reload()">Recarregar</button>
|
|
|
+ </div>
|
|
|
+ <script src="js/iassign-integration-functions.js"></script>
|
|
|
</div>
|
|
|
- <div class="dimmer_content_message">
|
|
|
- <h3>Aconteceu um erro ao processar a atividade. <br> Recarregue a página para tentar novamente.</h3>
|
|
|
- <button class="positive ui button" onclick="window.parent.location.reload()">Recarregar</button>
|
|
|
- </div>
|
|
|
- <script src="js/iassign-integration-functions.js"></script>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-<!-- Visual UI -->
|
|
|
-
|
|
|
-<!-- Accessible UI -->
|
|
|
-<div class="container" id="accessibleInterface" style="display: none;">
|
|
|
- <!-- Header -->
|
|
|
- <div class="row" role="header">
|
|
|
- <!-- Title -->
|
|
|
- <div class="col-3">
|
|
|
- <header>
|
|
|
- <h1 tabindex="0">iVProg Acessível</h1>
|
|
|
- </header>
|
|
|
- </div>
|
|
|
- <!-- Title -->
|
|
|
-
|
|
|
- <!-- Screen reader shortcuts -->
|
|
|
- <div class="col-9">
|
|
|
- <nav id="nav_ir_para_conteudo" class="nav" role="navigation">
|
|
|
- <a class="nav-link" href="#inicio" title="Alt + i" accesskey="i">Ir função inicio</a>
|
|
|
- <a class="nav-link" href="#terminal" title="Alt + t" accesskey="t">Ir para o terminal</a>
|
|
|
- </nav>
|
|
|
- </div>
|
|
|
- <!-- Screen reader shortcuts -->
|
|
|
</div>
|
|
|
- <!-- Header -->
|
|
|
-
|
|
|
- <!-- Main container -->
|
|
|
- <div id="main" class="row" role="main">
|
|
|
- <div class="col-12">
|
|
|
- <fieldset>
|
|
|
- <legend>
|
|
|
- <h1 tabindex="0" id="inicio">Função início</h1>
|
|
|
- </legend>
|
|
|
-
|
|
|
- <ol id="htmlOlCommandsVariablesVariables"></ol>
|
|
|
- <ol id="htmlOlCommandsVariablesOperations"></ol>
|
|
|
- <div id="botoes">
|
|
|
- <div class="dropdown btn btn-primary" id="bt_add_comand">
|
|
|
- <a class="btn btn-primary dropdown-toggle" role="button" tabindex="0" id="dropdownMenuLink"
|
|
|
- data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
- Comandos
|
|
|
- </a>
|
|
|
- <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
|
- <a class="dropdown-item" href="#" id="createVariableButton">
|
|
|
- Nova Variável
|
|
|
- </a>
|
|
|
- <a class="dropdown-item" href="#" id="assignVariableButton">
|
|
|
- Atribuição e Operações
|
|
|
- </a>
|
|
|
+ <!-- Visual UI -->
|
|
|
+
|
|
|
+ <!-- Accessible UI -->
|
|
|
+ <div class="container" id="accessibleInterface" style="display: none;">
|
|
|
+ <!-- Header -->
|
|
|
+ <nav class="navbar navbar-expand-lg navbar-dark">
|
|
|
+ <a class="navbar-brand" tabindex="0">iVProg Acessível</a>
|
|
|
+ <div class="collapse navbar-collapse" id="navbarNav">
|
|
|
+ <ul class="navbar-nav">
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="#inicio" title="Alt + i" accesskey="i">Ir função inicio</a>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="#terminal" title="Alt + t" accesskey="t">Ir para o terminal</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <!-- Header -->
|
|
|
+
|
|
|
+ <!-- Main container -->
|
|
|
+ <div id="main" class="row" role="main">
|
|
|
+ <div class="col-12">
|
|
|
+ <fieldset>
|
|
|
+ <legend class="p-1">
|
|
|
+ <h1 tabindex="0" id="inicio">Função início</h1>
|
|
|
+ </legend>
|
|
|
+
|
|
|
+ <ol id="htmlOlCommandsVariablesVariables"></ol>
|
|
|
+ <ol id="htmlOlCommandsVariablesOperations"></ol>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12 p-4" style="text-align: right;">
|
|
|
+ <div id="botoes" class="btn-group">
|
|
|
+ <div class="dropdown btn btn-primary" id="bt_add_comand">
|
|
|
+ <a class="btn btn-primary dropdown-toggle" role="button" tabindex="0"
|
|
|
+ id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
|
|
+ aria-expanded="false">
|
|
|
+ Comandos
|
|
|
+ </a>
|
|
|
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
|
+ <a class="dropdown-item" href="#" id="createVariableButton">
|
|
|
+ Nova Variável
|
|
|
+ </a>
|
|
|
+ <a class="dropdown-item" href="#" id="assignVariableButton">
|
|
|
+ Atribuição e Operações
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="btn btn-success" id="runCodeButton">
|
|
|
+ Executar
|
|
|
+ <i id="runCodePlayIcon" class="play icon" style="display: inline;"></i>
|
|
|
+ <i id="runCodeStopIcon" class="stop icon" style="display: none;"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <button class="btn btn-success" id="runCodeButton">
|
|
|
- Executar
|
|
|
- <i id="runCodePlayIcon" class="play icon" style="display: inline;"></i>
|
|
|
- <i id="runCodeStopIcon" class="stop icon" style="display: none;"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </fieldset>
|
|
|
+ </fieldset>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- Main container -->
|
|
|
+ <!-- Main container -->
|
|
|
|
|
|
- <!-- Terminal -->
|
|
|
- <div class="row">
|
|
|
- <div class="col-12">
|
|
|
- <div id="terminal" style="width: 97%; margin-left: 2%"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Terminal -->
|
|
|
+ <br/>
|
|
|
|
|
|
- <!-- Debug only -->
|
|
|
- <div class="row">
|
|
|
- <div class="col-12">
|
|
|
- <h5>Código gerado para debug - Código gerado</h5>
|
|
|
- <div style="width: 97%; margin-left: 2%; background-color: wheat; color: black;">
|
|
|
- <code id="generatedCode">
|
|
|
+ <!-- Terminal -->
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <div id="terminal" class="acessible-terminal" style="width: 97%; margin-left: 2%"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Terminal -->
|
|
|
+
|
|
|
+ <!-- Debug only -->
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <h5>Código gerado para debug - Código gerado</h5>
|
|
|
+ <div style="width: 97%; margin-left: 2%; background-color: wheat; color: black;">
|
|
|
+ <code id="generatedCode">
|
|
|
</code>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- Debug only -->
|
|
|
</div>
|
|
|
- <!-- Debug only -->
|
|
|
-</div>
|
|
|
-<!-- Accessible UI -->
|
|
|
+ <!-- Accessible UI -->
|
|
|
|
|
|
-<!-- Accessible UI JS -->
|
|
|
+ <!-- Accessible UI JS -->
|
|
|
</body>
|
|
|
<script>
|
|
|
- var mouseX;
|
|
|
- var mouseY;
|
|
|
- $(document).ready(() => {
|
|
|
- var $buttons = $('.ivprog_format .button'),
|
|
|
- handler = {
|
|
|
- activate: function () {
|
|
|
- $(this)
|
|
|
- .addClass('active')
|
|
|
- .siblings()
|
|
|
- .removeClass('active');
|
|
|
+ var mouseX;
|
|
|
+ var mouseY;
|
|
|
+ $(document).ready(() => {
|
|
|
+ var $buttons = $('.ivprog_format .button'),
|
|
|
+ handler = {
|
|
|
+ activate: function () {
|
|
|
+ $(this)
|
|
|
+ .addClass('active')
|
|
|
+ .siblings()
|
|
|
+ .removeClass('active');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $buttons.on('click', handler.activate);
|
|
|
+ $('.ivprog_format_info').popup(
|
|
|
+ {
|
|
|
+ popup: $('.custom.popup'),
|
|
|
+ on: 'click'
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".data_types_dropdown").dropdown();
|
|
|
+
|
|
|
+ $('.ui.dropdown').dropdown();
|
|
|
+
|
|
|
+ $('.ivprog_visual_panel').removeClass("loading");
|
|
|
+
|
|
|
+ $(document).mousemove(function (e) {
|
|
|
+ var parentOffset = $('.ivprog_visual_panel').offset();
|
|
|
+ ;
|
|
|
+ mouseX = e.pageX - parentOffset.left + 300;
|
|
|
+ mouseY = e.pageY - parentOffset.top + 100;
|
|
|
+ /*$('.created_element').css('top', mouseY);
|
|
|
+ $('.created_element').css('left', mouseX);*/
|
|
|
+ });
|
|
|
+ ivprogCore.LocalizedStrings.updateTagText();
|
|
|
+ ivprogCore.CodeEditor.initTextEditor("ivprog-text-editor");
|
|
|
+ iassingIntegration();
|
|
|
+ if (iLMparameters.iLM_PARAM_TeacherAutoEval == null) {
|
|
|
+ ivprogCore.initVisualUI();
|
|
|
}
|
|
|
- };
|
|
|
-
|
|
|
- $buttons.on('click', handler.activate);
|
|
|
- $('.ivprog_format_info').popup(
|
|
|
- {
|
|
|
- popup: $('.custom.popup'),
|
|
|
- on: 'click'
|
|
|
- });
|
|
|
-
|
|
|
- $(".data_types_dropdown").dropdown();
|
|
|
|
|
|
- $('.ui.dropdown').dropdown();
|
|
|
-
|
|
|
- $('.ivprog_visual_panel').removeClass("loading");
|
|
|
-
|
|
|
- $(document).mousemove(function (e) {
|
|
|
- var parentOffset = $('.ivprog_visual_panel').offset();
|
|
|
- ;
|
|
|
- mouseX = e.pageX - parentOffset.left + 300;
|
|
|
- mouseY = e.pageY - parentOffset.top + 100;
|
|
|
- /*$('.created_element').css('top', mouseY);
|
|
|
- $('.created_element').css('left', mouseX);*/
|
|
|
+ ivprogCore.initAccessibleUI();
|
|
|
});
|
|
|
- ivprogCore.LocalizedStrings.updateTagText();
|
|
|
- ivprogCore.CodeEditor.initTextEditor("ivprog-text-editor");
|
|
|
- iassingIntegration();
|
|
|
- if (iLMparameters.iLM_PARAM_TeacherAutoEval == null) {
|
|
|
- ivprogCore.initVisualUI();
|
|
|
- }
|
|
|
-
|
|
|
- ivprogCore.initAccessibleUI();
|
|
|
- });
|
|
|
</script>
|
|
|
|
|
|
<!-- Accessible JS -->
|
|
|
<script src="js/accessible/bootstrap/bootstrap.bundle.js"></script>
|
|
|
<script src="js/accessible/bootstrap/bootstrap.js"></script>
|
|
|
<script>
|
|
|
- const visualInterface = document.getElementById('visualInterface');
|
|
|
- const accessibleInterface = document.getElementById('accessibleInterface');
|
|
|
-
|
|
|
- document.getElementById('enableVisualUI').addEventListener('click', (event) => {
|
|
|
- visualInterface.style.display = 'block';
|
|
|
- accessibleInterface.style.display = 'none';
|
|
|
- });
|
|
|
-
|
|
|
- document.getElementById('enableAccessibleUI').addEventListener('click', (event) => {
|
|
|
- visualInterface.style.display = 'none';
|
|
|
- accessibleInterface.style.display = 'block';
|
|
|
- });
|
|
|
+ const visualInterface = document.getElementById('visualInterface');
|
|
|
+ const accessibleInterface = document.getElementById('accessibleInterface');
|
|
|
+
|
|
|
+ document.getElementById('enableVisualUI').addEventListener('click', (event) => {
|
|
|
+ visualInterface.style.display = 'block';
|
|
|
+ accessibleInterface.style.display = 'none';
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('enableAccessibleUI').addEventListener('click', (event) => {
|
|
|
+ visualInterface.style.display = 'none';
|
|
|
+ accessibleInterface.style.display = 'block';
|
|
|
+ });
|
|
|
</script>
|
|
|
-</html>
|
|
|
+
|
|
|
+</html>
|
