<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/roboto.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/semantic.min.css"/>
<link rel="stylesheet" type="text/css" href="css/codemirror.css">
<link rel="stylesheet" type="text/css" href="css/show-hint.css">
<link rel="stylesheet" type="text/css" href="css/ttcn.css">
<link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
<link rel="stylesheet" type="text/css" href="css/ivprog-term.css">
<link rel="stylesheet" type="text/css" href="css/ivprog-editor.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/semantic.min.js"></script>
<script src="js/Sortable.js"></script>
<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/fontawesome/css/all.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 p-3 text-center">
<div class="btn-group">
<button type="button" class="btn btn-info" id="enableVisualUI">Interface interativa</button>
<button type="button" class="btn btn-info" id="enableAccessibleUI">Interface acessível</button>
</div>
</div>
</div>
<!-- Change UI -->
<!-- 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="content height_100">
<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 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>
<div class="ui one column container segment ivprog_visual_panel loading">
<div class="global_var">
<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>
</div>
<div class="list_globals" id="listGlobalsHandle"></div>
</div>
<div class="all_functions list-group" id="listWithHandle">
</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 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>
<!-- 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>
<li class="nav-item">
<a class="nav-link" id="goToCommands" href="javascript:void(0)" title="Alt + c" accesskey="c">Ir para a lista de comandos</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="commands" 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>
<a class="dropdown-item" href="#" id="printButton">
Escreva
</a>
</div>
</div>
<button class="btn btn-success" id="runCodeButton" type="button">
Executar
<i id="runCodePlayIcon" class="play icon" style="display: inline;"></i>
<i id="runCodeStopIcon" class="stop icon" style="display: none;"></i>
</button>
<button class="btn btn-danger" id="cleanCommands" type="button">
Excluir comandos
<i id="cleanCommandsIcon" class="fa fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<!-- Main container -->
<br/>
<!-- 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" style="display: none">
<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>
<!-- Accessible UI -->
<!-- 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');
}
};
$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();
}
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';
});
</script>
</html>