feat: initial accessible code

.gitignore

@@ -23,6 +23,7 @@ Thumbs.db
 
 # IDEs and editors
 /.idea
+.idea
 .project
 .classpath
 .c9/

css/accessible/bootstrap/bootstrap-reboot.css

@@ -0,0 +1,327 @@
+/*!
+ * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+select {
+  word-wrap: normal;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */

css/accessible/design.css

@@ -0,0 +1,75 @@
+.container {
+    background-color: #191970;
+    width: 1020px;
+    padding: 15px;
+}
+
+header {
+    margin: 5px;
+    font-weight: bold;
+}
+
+header h1 {
+    color: #A7C0DC;
+    font-size: 20px;
+}
+
+#nav_ir_para_conteudo {
+    margin-left: 200px;
+    padding-top: 15px;
+}
+
+#nav_ir_para_conteudo a {
+    color: white;
+    font-size: 15px;
+}
+
+#main {
+    width: 100%;
+    margin: 5px;
+}
+
+fieldset {
+    width: 100%;
+    background-color: white;
+    position: relative;
+    display: block;
+    margin-top: 15px;
+}
+
+legend {
+    width: 200px;
+    border: 3px solid silver;
+    border-radius: 10px;
+    background-color: #191970;
+    margin-left: 50px;
+}
+
+legend h1 {
+    font-size: 20px;
+    font-family: "Segoe UI", "Arial", "Times New Roman";
+    color: white;
+    padding-left: 10px;
+}
+
+#botoes {
+    display: inline;
+    position: relative;
+    top: 0px;
+    left: 700px;
+}
+
+footer {
+    width: 97%;
+    color: #A7C0DC;
+    background-color: black;
+    font-size: 20px;
+    margin-left: 20px;
+    font-weight: bold;
+    padding: 10px;
+}
+
+footer h1 {
+    color: #A7C0DC;
+    font-size: 20px;
+}

css/accessible/forms_var_comand.css

@@ -0,0 +1,81 @@
+#form_var {
+    padding: 15px;
+    width: 450px;
+    height: 50px;
+    background-color: #4B0082;
+    color: silver;
+    margin-top: 2px;
+}
+
+#form_var input {
+    width: 100px;
+    color: black;
+}
+
+#form_var button {
+    width: 50px;
+    height: 20px;
+    font-size: 12px;
+    padding: unset;
+}
+
+#form_atribuir {
+    padding: 15px;
+    height: 50px;
+    background-color: #055a17;
+    color: silver;
+    margin-top: 2px;
+}
+
+#form_atribuir input {
+    width: 100px;
+    color: black;
+}
+
+#form_atribuir button {
+    width: 50px;
+    height: 20px;
+    font-size: 12px;
+    padding: unset;
+}
+
+#form_operacaoes {
+    padding: 15px;
+    width: 600px;
+    height: 50px;
+    background-color: #d35807;
+    color: silver;
+    margin-top: 2px;
+}
+
+#form_operacaoes input {
+    width: 100px;
+    color: black;
+}
+
+#form_operacaoes button {
+    width: 50px;
+    height: 20px;
+    font-size: 12px;
+    padding: unset;
+}
+
+#form_escreva {
+    padding: 15px;
+    width: 600px;
+    height: 50px;
+    background-color: yellowgreen;
+    margin-top: 2px;
+}
+
+#form_escreva input {
+    width: 100px;
+    color: black;
+}
+
+#form_escreva button {
+    width: 50px;
+    height: 20px;
+    font-size: 12px;
+    padding: unset;
+}

css/accessible/style.css

@@ -0,0 +1,34 @@
+body {
+    padding: 50px;
+    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+    color: #00B7FF;
+}
+
+.variable-available-sub-menu {
+    background-color: #80bdff;
+}
+
+.variable-available-main {
+    background-color: #80bdff;
+    border: 1px solid #646464;
+}
+
+.variable-attribution-main {
+    background-color: cornflowerblue;
+    border: 1px solid #646464;
+}
+
+.variable-attribution-sub-menu {
+    background-color: cornflowerblue;
+}
+
+.operation-sub-menu {
+    background-color: #5e1b7c;
+}
+
+.operation-main {
+    background-color: #624e7c;
+}

iVProg.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

js/accessibleUI/code-view.js

@@ -0,0 +1,27 @@
+const $code = $("#code");
+const $workspace = $("#workspace");
+const $main = $("#main");
+const $functions = $("#functions");
+const trashSound = new Audio("media/sounds/trash.mp3");
+
+const mainCodeTypes = {
+    variable: "VARIABLE",
+    operation: "OPERATION",
+    attribution: "ATTRIBUTION",
+    operator: "OPERATOR"
+};
+
+// Sub menu elements
+
+let universalId = {
+    current: 0,
+    next: function () {
+        this.current = this.current + 1;
+        return this.current;
+    }
+};
+
+function getCurrentMainLineNumber() {
+    // TO DO: Find a way to know in wath line the main code is
+    return $(".code-line").length + 1;
+}

js/accessibleUI/compiler.js

@@ -0,0 +1,167 @@
+// Imports
+import {terminal} from "./main";
+import {variables} from "./modules/variables/variables";
+import {operations} from "./modules/operations/operations";
+import * as TextEditor from "../visualUI/text_editor";
+import * as CodeManagement from "../visualUI/code_generator";
+import {SemanticAnalyser} from "../processor/semantic/semanticAnalyser";
+import {IVProgProcessor} from "../processor/ivprogProcessor";
+import {Modes} from "../processor/modes";
+import {LocalizedStrings} from "../services/localizedStringsService";
+import {DOMConsole} from "../io/domConsole";
+// Imports
+
+// iVProg variables
+let proc = null;
+let isRunning = false;
+let domConsole = new DOMConsole("terminal");
+
+//
+const runCodePlayIcon = document.getElementById('runCodePlayIcon');
+const runCodeStopIcon = document.getElementById('runCodeStopIcon');
+
+//Debug
+const generatedCode = document.getElementById('generatedCode');
+
+function generateCode() {
+
+  console.log(variables);
+  console.log(operations);
+
+  let code = `programa {\n`;
+
+  for (let i = 0; i < variables.length; i++) {
+    code += `    ${variables[i].type.name} ${variables[i].name} <- ${variables[i].type.barrier}${variables[i].value}${variables[i].type.barrier}\n`;
+  }
+
+  code += `    funcao vazio inicio () {\n`;
+
+  for (let i = 0; i < operations.length; i++) {
+    code += `        ${operations[i].assignedVariable.name} <- `;
+
+    for (let j = 0; j < operations[i].operators.length; j++) {
+      switch (operations[i].operators[j].type.value) {
+        case 'VARIABLE':
+          code += operations[i].operators[j].variable.name;
+          break;
+        case 'VALUE':
+          code += operations[i].operators[j].value;
+          break;
+        case 'OPERATOR':
+          code += operations[i].operators[j].operator.name;
+          break;
+      }
+    }
+
+    code += `\n`;
+  }
+
+  for (let i = 0; i < variables.length; i++) {
+    code += `        escreva ("${variables[i].name}: " + ${variables[i].name} + "\\n")\n`;
+  }
+
+  code += `    }\n`;
+
+  code += `}`;
+
+  generatedCode.innerText = code;
+
+  return code;
+}
+
+export function runCode() {
+  if (isRunning) {
+    return;
+  }
+  let strCode = generateCode();
+
+  if (strCode == null) {
+    return;
+  }
+
+  // toggleConsole(true);
+
+  // if(domConsole == null)
+  //   domConsole = new DOMConsole("#ivprog-term");
+  //$("#ivprog-term").slideDown(500);
+  try {
+    const data = SemanticAnalyser.analyseFromSource(strCode);
+    proc = new IVProgProcessor(data);
+    proc.registerInput(domConsole);
+    proc.registerOutput(domConsole);
+    $("#ivprog-term").addClass('ivprog-term-active');
+    isRunning = true;
+    proc.interpretAST().then(_ => {
+      scheduleCall(() => {
+        if (domConsole.pending_writes.length == 0) {
+          if (proc.mode === Modes.ABORT) {
+            domConsole.info(LocalizedStrings.getMessage("aborted_execution"));
+          } else {
+            domConsole.info(LocalizedStrings.getMessage("success_execution"));
+          }
+          $("#ivprog-term").removeClass('ivprog-term-active');
+          isRunning = false;
+          proc = null;
+          showRunButton();
+          return true;
+        }
+        return false;
+      }, 100);
+    }).catch(err => {
+      scheduleCall(() => {
+        if (domConsole.pending_writes.length == 0) {
+          if (err instanceof Error) {
+            domConsole.err(err.message);
+          } else {
+            domConsole.err(err);
+          }
+          // $("#ivprog-term").removeClass('ivprog-term-active');
+          isRunning = false;
+          proc = null;
+          showRunButton();
+          return true;
+        }
+        return false;
+      }, 100);
+    })
+  } catch (error) {
+    scheduleCall(() => {
+      if (domConsole.pending_writes.length == 0) {
+        isRunning = false;
+        proc = null;
+        showRunButton();
+        domConsole.err(error.message);
+        console.log(error);
+        return true;
+      }
+      return false;
+    }, 100);
+  }
+}
+
+// ***********************************************************************
+
+function scheduleCall(callback, time) {
+  const scheduled_call = () => {
+    const id = setInterval(() => {
+      if (callback()) {
+        clearInterval(id);
+      }
+    }, time)
+  }
+  scheduled_call();
+}
+
+// ***********************************************************************
+
+function showRunButton() {
+  runCodePlayIcon.style.display = 'inline';
+  runCodeStopIcon.style.display = 'none';
+}
+
+function showStopButton() {
+  runCodePlayIcon.style.display = 'none';
+  runCodeStopIcon.style.display = 'inline';
+}
+
+// ***********************************************************************

js/accessibleUI/data-types.js

@@ -0,0 +1,22 @@
+const dataTypes = {
+    String: 'String',
+    byte: 'Byte',
+    short: 'Short',
+    int: 'Int',
+    long: 'Long',
+    float: 'Float',
+    double: 'Double',
+    boolean: 'Boolean',
+    char: 'Char'
+};
+
+function getVariableTypeBarrier(dataType) {
+    switch (dataType) {
+        case 'String':
+            return "\"";
+        case 'char':
+            return "\'";
+        default:
+            return "";
+    }
+}

js/accessibleUI/main.js

@@ -0,0 +1,53 @@
+// Imports
+import {createVariable} from './modules/variables/variables';
+import {createOperation} from './modules/operations/operations';
+import {runCode} from "./compiler";
+// Imports
+
+// Html references
+export const htmlOlCommandsVariables = document.getElementById('htmlOlCommandsVariablesVariables');
+export const htmlOlCommandsOperations = document.getElementById('htmlOlCommandsVariablesOperations');
+export const terminal = document.getElementById('terminal');
+
+// ***********************************************************************
+// Init Accessible UI
+// ***********************************************************************
+
+// Accessible UI buttons references
+const createVariableButton = document.getElementById('createVariableButton');
+const assignVariableButton = document.getElementById('assignVariableButton');
+const runCodeButton = document.getElementById('runCodeButton');
+
+export function initAccessibleUI() {
+
+  // Initializing dropdown menus
+  $(".dropdown-submenu a.test").on("click", function (e) {
+    $(this).next("ul").toggle();
+    e.stopPropagation();
+    e.preventDefault();
+  });
+
+  // Adding listeners
+  createVariableButton.addEventListener('click', ev => {
+    createVariable();
+  });
+
+  assignVariableButton.addEventListener('click', ev => {
+    createOperation();
+  });
+
+  runCodeButton.addEventListener('click', ev => {
+    runCode();
+  });
+}
+
+// ***********************************************************************
+
+// Reference: https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
+export function generateUUID() {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+  );
+}
+
+// ***********************************************************************

js/accessibleUI/modules/functions.js

@@ -0,0 +1,7 @@
+let creatingFunction = false;
+
+function addFunctionToScreen({
+                                 name = "functionName",
+                             }) {
+
+}

js/accessibleUI/modules/main-code-type.js

@@ -0,0 +1,5 @@
+
+
+function dsa() {
+
+}

js/accessibleUI/modules/operations/operations-schemes.js

@@ -0,0 +1,245 @@
+// Imports
+import {variables} from "../variables/variables";
+import {eltP} from "codemirror/src/util/dom";
+import {operations} from "./operations";
+// Imports
+
+// *********************************************************************************
+// Scheme for the operations list
+// *********************************************************************************
+
+export const operationScheme = {
+  hash: 'UUID for the operation',
+  assignedVariable: 'Reference to the assigned variable',
+  operators: []
+}
+
+// *********************************************************************************
+// Scheme for the operators
+// *********************************************************************************
+
+export const operatorScheme = {
+  hash: 'UUID for the operator',
+  type: 'Operator type',
+  value: 'Operator value',
+  variable: 'Reference to the variable',
+  operator: 'Reference to operator'
+}
+
+// *********************************************************************************
+// Operator types
+// *********************************************************************************
+
+export const operatorTypes = [
+  {
+    name: 'Variável',
+    value: 'VARIABLE'
+  },
+  {
+    name: 'Valor',
+    value: 'VALUE'
+  },
+  {
+    name: 'Operator',
+    value: 'OPERATOR'
+  }
+]
+
+// *********************************************************************************
+// Operation types
+// *********************************************************************************
+
+export const operationTypes = [
+  {
+    name: ';',
+    value: 'SEMICOLON'
+  },
+  {
+    name: '+',
+    value: 'PLUS'
+  },
+  {
+    name: '-',
+    value: 'MINUS'
+  },
+  {
+    name: '*',
+    value: 'MULTIPLICATION'
+  },
+  {
+    name: '/',
+    value: 'DIVISION'
+  },
+  {
+    name: '(',
+    value: 'OPEN_PARENTHESES'
+  },
+  {
+    name: ')',
+    value: 'CLOSE_PARENTHESES'
+  },
+]
+
+// *********************************************************************************
+// Operator kinds
+// *********************************************************************************
+
+export const operatorKinds = [
+  {
+    name: 'Variável',
+    value: 'VARIABLE'
+  },
+  {
+    name: 'Valor',
+    value: 'VALUE'
+  }
+]
+
+// *********************************************************************************
+// Operation type html schemes
+// *********************************************************************************
+
+export function htmlOperationTypeScheme() {
+  let operationTypesSelect = ``;
+
+  for (let i = 0; i < operationTypes.length; i++) {
+    operationTypesSelect += `<option value="${operationTypes[i].value}">${operationTypes[i].name}</option>`;
+  }
+
+  return `<select  id="operation<operationKindId>Select" title="selecione o tipo da operação" >
+    <option > selecione</option>
+    ${operationTypesSelect}
+</select>`;
+}
+
+// *********************************************************************************
+// Assign variable operation kind html schemes
+// *********************************************************************************
+
+export function htmlOperationKindScheme(operation) {
+  let operatorKindsSelect = ``;
+
+  for (let i = 0; i < operatorKinds.length; i++) {
+    operatorKindsSelect += `<option value="${operatorKinds[i].value}">${operatorKinds[i].name}</option>`;
+  }
+
+  return `<select  id="operation${operation.hash}KindSelect" title="selecione o tipo de atrabuição" operation-id="${operation.hash}">
+    <option > selecione</option>
+    ${operatorKindsSelect}
+</select>`;
+}
+
+// *********************************************************************************
+// Assign variable html schemes
+// *********************************************************************************
+
+export function htmlAssignVariableScheme() {
+
+  let variablesSelect = htmlVariablesSelectScheme();
+
+  return `<li id="operation<operationId>Li">
+    <div class="row">
+        <form id="operation<operationId>Form">
+            <select title="selecione a variável" id="operation<operationId>AssignVariableSelect" name="variableSelect" operation-id="<operationId>"> 
+                ${variablesSelect}
+            </select> 
+            <label id="recebe">recebe </label> 
+            <operators id="operation<operationId>OperatorsDiv"></operators>
+            <button id="operation<operationId>Delete" type="button" class="btn btn-danger" >Excluir</button>
+        </form>
+    </div>
+</li>`;
+}
+
+// *********************************************************************************
+// Variable select html schemes
+// *********************************************************************************
+
+export function htmlVariablesSelectScheme() {
+  let variablesSelect = variables.length === 0 ? `<option>N/A</option>` : ``;
+
+  for (let i = 0; i < variables.length; i++) {
+    variablesSelect += `<option value="${variables[i].hash}">${variables[i].name}</option>`
+  }
+
+  return variablesSelect;
+}
+
+// *********************************************************************************
+
+// *********************************************************************************
+// Operator variable select
+// *********************************************************************************
+
+export function htmlOperatorVariablesSelectScheme(operation, operator) {
+  let variablesSelect = variables.length === 0 ? `<option>N/A</option>` : ``;
+
+  for (let i = 0; i < variables.length; i++) {
+    variablesSelect += `<option value="${variables[i].hash}">${variables[i].name}</option>`
+  }
+
+  return `<select id="operation${operation.hash}Operator${operator.hash}VariableSelect" name="variableSelect" title="selecione a variável" operation-id="${operation.hash}" operator-id="${operator.hash}">
+    ${variablesSelect}
+</select>`;
+}
+
+// *********************************************************************************
+// Operator value input
+// *********************************************************************************
+
+export function htmlOperatorValueInputScheme(operation, operator) {
+  return `<input type="number" id="operation${operation.hash}Operator${operator.hash}ValueInput" name="" title="valor" operation-id="${operation.hash}" operator-id="${operator.hash}">`;
+}
+
+// *********************************************************************************
+// Operation type select
+// *********************************************************************************
+
+export function htmlOperationTypeSelect(operation, operator) {
+  let operationTypesSelect = ``;
+
+  for (let i = 0; i < operationTypes.length; i++) {
+    operationTypesSelect += `<option value="${operationTypes[i].value}">${operationTypes[i].name}</option>`;
+  }
+
+  return `<select  id="operation${operation.hash}Operator${operator.hash}OperationTypeSelect" title="selecione o tipo da operação" operation-id="${operation.hash}" operator-id="${operator.hash}">
+    ${operationTypesSelect}
+</select>`;
+}
+
+// *********************************************************************************
+// Util
+// *********************************************************************************
+
+export function getOperatorTypeByValue(value) {
+  for (let i = 0; i < operatorTypes.length; i++) {
+    if (operatorTypes[i].value === value)
+      return operatorTypes[i];
+  }
+
+  return null;
+}
+
+// *********************************************************************************
+
+export function getOperationTypeByValue(value) {
+  for (let i = 0; i < operationTypes.length; i++) {
+    if (operationTypes[i].value === value)
+      return operationTypes[i];
+  }
+
+  return null;
+}
+
+// *********************************************************************************
+
+export function getOperatorByHash(operation, operatorHash) {
+  for (let i = 0; i < operation.operators.length; i++) {
+    if (operation.operators[i].hash === operatorHash)
+      return operation.operators[i];
+  }
+
+  return null;
+}
+
+// *********************************************************************************

js/accessibleUI/modules/operations/operations.js

@@ -0,0 +1,184 @@
+// Imports
+import {generateUUID, htmlOlCommandsOperations} from './../../main';
+import {
+  getOperationTypeByValue, getOperatorByHash,
+  getOperatorTypeByValue,
+  htmlAssignVariableScheme,
+  htmlOperationKindScheme, htmlOperationTypeSelect, htmlOperatorValueInputScheme,
+  htmlOperatorVariablesSelectScheme,
+  operationScheme, operatorScheme, operatorTypes
+} from "./operations-schemes";
+import {getVariableByHash, variables} from "../variables/variables";
+// Imports
+
+export const operations = [];
+
+// Creating operation
+export function createOperation() {
+  let operation = Object.assign({}, operationScheme);
+
+  operation.hash = generateUUID().replaceAll('-', '');
+  // TODO: Fix
+  operation.assignedVariable = variables[0];
+  operation.operators = [];
+
+  operations.push(operation);
+
+  let htmlOperation = htmlAssignVariableScheme();
+
+  htmlOperation = htmlOperation.replaceAll('<operationId>', operation.hash);
+
+  htmlOlCommandsOperations.insertAdjacentHTML('beforeend', htmlOperation);
+
+  document.getElementById(`operation${operation.hash}AssignVariableSelect`).addEventListener('change', ev => {
+    updateOperationAssignValue(ev.target.getAttribute('operation-id'), ev.target.value);
+  });
+
+  addOperatorKind(operation.hash);
+}
+
+// Add operator kind to the operation
+export function addOperatorKind(hash) {
+  let operation = getOperationByHash(hash);
+
+  console.log(operation);
+
+  let htmlOperationKind = htmlOperationKindScheme(operation);
+
+  document.getElementById(`operation${operation.hash}OperatorsDiv`).insertAdjacentHTML('beforeend', htmlOperationKind);
+
+  document.getElementById(`operation${operation.hash}KindSelect`).addEventListener('change', ev => {
+    selectedOperationKind(ev.target.getAttribute('operation-id'));
+  });
+}
+
+// Function to be trigger when the operator kind is selected
+export function selectedOperationKind(operationHash) {
+  let operation = getOperationByHash(operationHash);
+
+  console.log(operation);
+
+  let kindSelect = document.getElementById(`operation${operation.hash}KindSelect`);
+
+  // TODO: think into an way to make this dynamic
+  if (kindSelect.value === 'VARIABLE') {
+    insertVariableAfterOperationKind(kindSelect, operation);
+  } else if (kindSelect.value === 'VALUE') {
+    insertValueAfterOperationKind(kindSelect, operation);
+  }
+}
+
+// Insert variable after operator kind select
+export function insertVariableAfterOperationKind(kindSelect, operation) {
+  let operator = Object.assign({}, operatorScheme);
+
+  operator.hash = generateUUID().replaceAll('-', '');
+  // TODO: Fix ?
+  operator.variable = variables[0];
+  operator.type = getOperatorTypeByValue('VARIABLE');
+
+  let operatorVariableSelect = htmlOperatorVariablesSelectScheme(operation, operator);
+
+  operation.operators.push(operator);
+
+  kindSelect.insertAdjacentHTML('afterend', operatorVariableSelect);
+  kindSelect.remove();
+
+  insertOperationTypeAtEndOfOperation(operation, operator);
+
+  document.getElementById(`operation${operation.hash}Operator${operator.hash}VariableSelect`).addEventListener('change', ev => {
+    updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
+  });
+}
+
+// Insert value after operator kind select
+export function insertValueAfterOperationKind(kindSelect, operation) {
+  let operator = Object.assign({}, operatorScheme);
+
+  operator.hash = generateUUID().replaceAll('-', '');
+  operator.type = getOperatorTypeByValue('VALUE');
+
+  let operatorValueInput = htmlOperatorValueInputScheme(operation, operator);
+
+  operation.operators.push(operator);
+
+  kindSelect.insertAdjacentHTML('afterend', operatorValueInput);
+  kindSelect.remove();
+
+  insertOperationTypeAtEndOfOperation(operation, operator);
+
+  document.getElementById(`operation${operation.hash}Operator${operator.hash}ValueInput`).addEventListener('change', ev => {
+    updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
+  });
+}
+
+// Add final operation typt end of the operation
+export function insertOperationTypeAtEndOfOperation(operation, afterOperator) {
+  let operator = Object.assign({}, operatorScheme);
+
+  operator.hash = generateUUID().replaceAll('-', '');
+  operator.type = getOperatorTypeByValue('OPERATOR');
+  operator.operator = getOperationTypeByValue('SEMICOLON');
+
+  let operationTypeInput = htmlOperationTypeSelect(operation, operator);
+
+  operationTypeInput.replaceAll('<operatorId>', operator.hash);
+  operation.operators.push(operator);
+
+  if (afterOperator.type.value === 'VARIABLE') {
+    document.querySelector(`select[operator-id='${afterOperator.hash}']`).insertAdjacentHTML('afterend', operationTypeInput);
+  } else if (afterOperator.type.value === 'VALUE') {
+    document.querySelector(`input[operator-id='${afterOperator.hash}']`).insertAdjacentHTML('afterend', operationTypeInput);
+  }
+
+
+  document.getElementById(`operation${operation.hash}Operator${operator.hash}OperationTypeSelect`).addEventListener('change', ev => {
+    updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
+  });
+}
+
+// ***********************************************************************
+// Listeners
+// ***********************************************************************
+
+export function updateOperationAssignValue(operationHash, newVariable) {
+  let operation = getOperationByHash(operationHash);
+  let variable = getVariableByHash(newVariable);
+
+  operation.assignedVariable = variable;
+}
+
+export function updateOperationOperator(operationHash, operatorHash, newValue) {
+  let operation = getOperationByHash(operationHash);
+  let operator = getOperatorByHash(operation, operatorHash);
+
+  switch (operator.type.value) {
+    case 'VARIABLE':
+      let variable = getVariableByHash(newValue);
+      operator.variable = variable;
+      break;
+    case 'VALUE':
+      operator.value = newValue;
+      break;
+    case 'OPERATOR':
+      operator.operator = getOperationTypeByValue(newValue);
+      if (operator.operator.name !== ';')
+        addOperatorKind(operation.hash);
+      break;
+  }
+}
+
+// ***********************************************************************
+// Util
+// ***********************************************************************
+
+export function getOperationByHash(hash) {
+  for (let i = 0; i < operations.length; i++) {
+    if (operations[i].hash === hash)
+      return operations[i];
+  }
+
+  return null;
+}
+
+// ***********************************************************************

js/accessibleUI/modules/variables/variables-schemes.js

@@ -0,0 +1,96 @@
+// *********************************************************************************
+// Scheme for the variables list
+// *********************************************************************************
+
+export const variableScheme = {
+  hash: 'UUID for the variable',
+  name: 'Variable name',
+  type: 'Varaible type',
+  value: 'Variable value'
+};
+
+// *********************************************************************************
+// Variable types
+// *********************************************************************************
+
+export const variableTypes = [
+  {
+    name: 'inteiro',
+    value: 'INTEGER',
+    defaultValue: 0,
+    htmlType: 'number',
+    barrier: ''
+  },
+  {
+    name: 'real',
+    value: 'DOUBLE',
+    defaultValue: 0.0,
+    htmlType: 'number',
+    barrier: ''
+  },
+  {
+    name: 'cadeia',
+    value: 'STRING',
+    defaultValue: '',
+    htmlType: 'text',
+    barrier: '"'
+  },
+  {
+    name: 'lógico',
+    value: 'BOOLEAN',
+    vales: [
+      {
+        name: 'verdadeiro',
+        value: true
+      },
+      {
+        name: 'falso',
+        value: false
+      }
+    ],
+    defaultValue: true,
+    htmlType: 'select',
+    barrier: ''
+  }
+];
+
+export function getVariableTypeByValue(value) {
+  for (let i = 0; i < variableTypes.length; i++) {
+    if (variableTypes[i].value === value)
+      return variableTypes[i];
+  }
+
+  return null;
+}
+
+// *********************************************************************************
+// Html Schemes
+// *********************************************************************************
+
+let htmlVariableSchemeBuilt = '';
+
+export function htmlVariableScheme() {
+
+  if (htmlVariableSchemeBuilt !== '')
+    return htmlVariableSchemeBuilt;
+
+  let variableTypesHtml = '';
+
+  for (let i = 0; i < variableTypes.length; i++) {
+    variableTypesHtml += `<option value="${variableTypes[i].value}">${variableTypes[i].name}</option>\n`;
+  }
+
+  return `<li id="variable<variableId>Li">
+        <form id="variable<variableId>Form">
+            <select name="tipo" title="tipo da variável" id="variable<variableId>Type" variable-id="<variableId>">
+                ${variableTypesHtml}
+            </select>
+            <input type="text" title="nome da variável" id="variable<variableId>Name" value="<variableName>" variable-id="<variableId>">
+            <label for="variable<variableId>Value" tabindex="0" tile="recebe">recebe</label>
+            <input type="${variableTypes[0].htmlType}" id ="variable<variableId>Value" title="valor da variável" value="0" variable-id="<variableId>">
+            <button id="variable<variableId>Delete" type="button" class="btn btn-danger">Excluir</button>
+        </form> 
+    </li>`;
+}
+
+// *********************************************************************************

js/accessibleUI/modules/variables/variables.js

@@ -0,0 +1,102 @@
+// Imports
+import {htmlOlCommandsVariables, generateUUID} from './../../main';
+import {getVariableTypeByValue, htmlVariableScheme, variableScheme, variableTypes} from "./variables-schemes";
+// Imports
+
+export const variables = [];
+let variablesIndex = 0;
+
+// Creating variable
+export function createVariable() {
+  const variable = Object.assign({}, variableScheme);
+
+  variable.hash = generateUUID().replaceAll('-', '');
+  variable.name = 'var' + variablesIndex;
+  variable.type = variableTypes[0];
+  variable.value = variable.type.defaultValue;
+
+  variables.push(variable);
+
+  variablesIndex++;
+
+  let htmlVariable = htmlVariableScheme();
+
+  htmlVariable = htmlVariable.replaceAll('<variableId>', variable.hash);
+  htmlVariable = htmlVariable.replaceAll('<variableName>', variable.name);
+
+  htmlOlCommandsVariables.insertAdjacentHTML('beforeend', htmlVariable);
+
+  document.getElementById(`variable${variable.hash}Type`).addEventListener('change', ev => {
+    let variableHash = ev.target.getAttribute('variable-id');
+
+    updateVariable(variableHash);
+  });
+
+  document.getElementById(`variable${variable.hash}Name`).addEventListener('change', ev => {
+    let variableHash = ev.target.getAttribute('variable-id');
+
+    updateVariable(variableHash);
+  });
+
+  document.getElementById(`variable${variable.hash}Value`).addEventListener('change', ev => {
+    let variableHash = ev.target.getAttribute('variable-id');
+
+    updateVariable(variableHash);
+  });
+}
+
+// *********************************************************************************
+// Updating variable
+// *********************************************************************************
+
+let variableName;
+let variableType;
+let variableValue;
+
+function updateVariable(hash) {
+  let variable = getVariableByHash(hash);
+
+  variableName = document.getElementById(`variable${hash}Name`).value;
+  if (variable.name !== variableName) {
+    variable.name = variableName;
+  }
+
+  variableType = getVariableTypeByValue(document.getElementById(`variable${hash}Type`).value);
+  if (variable.type !== variableType) {
+    variable.type = variableType;
+
+    document.getElementById(`variable${hash}Value`).type = variable.type.htmlType;
+    document.getElementById(`variable${hash}Value`).value = variable.type.defaultValue;
+  }
+
+  variableValue = document.getElementById(`variable${hash}Value`).value;
+  if (variable.value !== variableValue) {
+    variable.value = variableValue;
+  }
+}
+
+// *********************************************************************************
+
+// Deleting variable
+export function deleteVariable(hash) {
+  let variable = getVariableByHash(hash);
+
+  document.getElementById(`variable${hash}Li`).remove();
+
+  variables.splice(variables.indexOf(variable), 1);
+}
+
+// *********************************************************************************
+// Util
+// *********************************************************************************
+
+export function getVariableByHash(hash) {
+  for (let i = 0; i < variables.length; i++) {
+    if (variables[i].hash === hash)
+      return variables[i];
+  }
+
+  return null;
+}
+
+// *********************************************************************************

js/accessibleUI/script_marcos.js

@@ -0,0 +1,281 @@
+var variavel = "<li id='li_var'> <form id='form_var'>" +
+    "<select name='tipo' title='tipo da variável' id='var_tipo'> " +
+    "<option value='inteiro'>inteiro</option> " +
+    "<option value='texto'>texto</option> " +
+    "</select> " +
+    "<input type='text' title='nome da variável' value='var1' > " +
+    " <label for='valor_var' tabindex='0' tile='recebe'>recebe</label> " + "<input type='number' id ='valor_var' title='valor da variável' value='0'> " +
+    "<button id='bt_excluir_var' type='button' class='btn btn-danger' >Excluir</button>" +
+    "</form> </li>";
+
+
+var tipo_atr = "  <select  id='tipo_atr' title='selecione o tipo de atrabuição' >" +
+    "<option > selecione</option>" +
+    "<option value='valor'> Valor</option>" +
+    "<option value='var'>Variável</option>" +
+    "</select>   ";
+
+var tipo_atr2 = "  <select  id='tipo_atr2' title='selecione o tipo de atrabuição' >" +
+    "<option > selecione</option>" +
+    "<option value='valor'> Valor</option>" +
+    "<option value='var'>Variável</option>" +
+    "</select>   ";
+
+var atribuir = "<li id='li_comando'> <form id='form_atribuir'>" +
+    "<select title='selecione a variável' id='var_atr'> " +
+    "<option value='var1'>var1</option> " +
+    "</select> " +
+    "<label id='recebe'>recebe </label> " +
+    tipo_atr +
+    "<button id='bt_excluir_comand' type='button' class='btn btn-danger' >Excluir</button>" +
+    "</form></li>";
+
+var variaveis = " <select  id='menu_variaveis' title='selecione a variável' >" +
+    "<option >...</option>" +
+    "<option value='valor'> Var1</option>" +
+    "<option value='var'>var2</option>" +
+    "</select>   ";
+
+var variaveis2 = " <select  id='menu_variaveis2' title='selecione a variável' >" +
+    "<option >...</option>" +
+    "<option value='valor'> Var1</option>" +
+    "<option value='var'>var2</option>" +
+    "</select>   ";
+
+
+var operadores = " <select title='selecione o operador' id='menu_operadores'> " +
+    "<option value='soma' title='fim'>;</option> " +
+    "<option value='soma' title='soma'>+</option> " +
+    "<option value='multiplicacao' title='multiplicacao'> * </option> " +
+    "<option value='divisao' title='divisão'> / </option> " +
+    "<option value='divisao' title='subtração'> -  </option> " +
+    "<option value='divisao' title='Parêntese de abertura'> ( </option> " +
+    "<option value='divisao' title='Parêntese de fechamento'> ) </option> " +
+    "</select> ";
+
+var operadores2 = " <select title='selecione o operador' id='menu_operadores2'> " +
+    "<option value='soma' title='operador fim'>;</option> " +
+    "<option value='soma' title='operador soma'>+</option> " +
+    "<option value='multiplicacao' title='operador multiplicacao'> * </option> " +
+    "<option value='divisao' title='divisão'> / </option> " +
+    "<option value='divisao' title='subtração'> -  </option> " +
+    "<option value='divisao' title='Parêntese de abertura'> ( </option> " +
+    "<option value='divisao' title='Parêntese de fechamento'> ) </option> " +
+    "</select> ";
+
+
+var operacoes = "<li id='li_opr'> <form id='form_operacaoes'>" +
+    " <select  id='opr_variaveis' title='selecione a variável' >" +
+    "<option >...</option>" +
+    "<option value='valor'> Var1</option>" +
+    "<option value='var'>var2</option>" +
+    "</select>   " +
+    " <label id='label_igual'tabindex='0'> = </label> " +
+    "<button id='bt_excluir_opr' type='button' class='btn btn-danger' >Excluir</button>" +
+    "</form></li>";
+
+escreva = "<li id='li_escreva'> <form id='form_escreva'>" +
+    "<label id='label_escreva'> Escreva</label>" +
+    " <select  id='menu_escreva' title='Escreva' >" +
+    "<option >...</option>" +
+    "<option value='valor'>Valor</option>" +
+    "<option value='var'>Variável</option>" +
+    "<option value='texto'>Texto</option>" +
+    "</select> " +
+    "<button id='bt_excluir_escreva' type='button' class='btn btn-danger' >Excluir</button>" +
+    "</form></li>";
+"</form></li>";
+
+$(document).ready(function() {
+
+    $("#bt_cria_var").click(function() {
+
+        $("#comandos").append(variavel)
+        $("#var_tipo").focus();
+
+        $("#bt_excluir_var").click(function() {
+            $("#li_var").remove();
+        });
+    });
+});
+
+$(document).ready(function() {
+
+    $("#atribuir").click(function() {
+
+        $("#comandos").append(atribuir)
+        $("#var_atr").focus();
+
+        $('#tipo_atr').change(function() {
+            if ($(this).val() === 'valor') {
+                $('#menu_variaveis').remove();
+                $('#menu_operadores').remove();
+                $("#tipo_atr").after(" <input type='text' id='campo_de_atribuicao' title='defina a atribuição'>");
+                $("#campo_de_atribuicao").focus();
+                $("#campo_de_atribuicao").after(operadores);
+            }
+            if ($(this).val() === 'var') {
+                $('#campo_de_atribuicao').remove();
+                $('#menu_operadores').remove();
+                $("#tipo_atr").after(variaveis);
+                $("#menu_variaveis").focus();
+                $('#operadores').remove();
+                $("#menu_variaveis").after(operadores);
+
+            }
+
+            $('#menu_operadores').change(function() {
+                $("#menu_operadores").after(tipo_atr2);
+                $("#tipo_atr2").focus();
+
+                $('#tipo_atr2').change(function() {
+
+                    if ($(this).val() === 'valor') {
+                        $('#menu_variaveis2').remove();
+                        $('#menu_operadores2').remove();
+                        $("#tipo_atr2").after(" <input type='text' id='campo_de_atribuicao2' title='defina a atribuição'>");
+                        $("#campo_de_atribuicao2").focus();
+                        $("#campo_de_atribuicao2").after(operadores);
+                    }
+                    if ($(this).val() === 'var') {
+                        $('#campo_de_atribuicao2').remove();
+                        $('#menu_operadores2').remove();
+                        $("#tipo_atr2").after(variaveis);
+                        $("#menu_variaveis2").focus();
+                        $('#operadores2').remove();
+                        $("#menu_variaveis2").after(operadores);
+
+                    }
+
+
+                });
+            });
+        });
+
+        $("#bt_excluir_comand").click(function() {
+            $("#li_comando").remove();
+
+        });
+    });
+});
+
+
+$(document).ready(function() {
+
+    $("#escreva").click(function() {
+
+        $("#comandos").append(escreva);
+        $("#menu_escreva").focus();
+
+        $('#menu_escreva').change(function() {
+
+            if ($(this).val() === 'valor') {
+                $('#valor_num').remove();
+                $('#menu_variaveis').remove();
+                $('#valor_text').remove();
+                $("#menu_escreva").after(" <input type='number' id='valor_num' title='defina o valor'>");
+                $("#valor_num").focus();
+            }
+            if ($(this).val() === 'var') {
+                $('#valor_num').remove();
+                $('#menu_variaveis').remove();
+                $('#valor_text').remove();
+                $("#menu_escreva").after(variaveis);
+                $("#menu_variaveis").focus();
+            }
+            if ($(this).val() === 'texto') {
+                $('#valor_num').remove();
+                $('#menu_variaveis').remove();
+                $('#valor_text').remove();
+                $("#menu_escreva").after(" <input type='text' id='valor_text' title='defina o texto'>");
+                $("#menu_variaveis").focus();
+            }
+
+        });
+
+        $("#bt_excluir_escreva").click(function() {
+            $("#li_escreva").remove();
+        });
+    });
+});
+
+$(document).ready(function() {
+
+    $("#bt_executar").click(function() {
+        $("#terminal").append("<p id='resultado' tabindex='0'> resultado aqui</p>");
+        $("#resultado").focus();
+
+    });
+});
+
+
+/* $(function() {
+
+    $("#opr").click(function() {
+
+        $("#comandos").append(operacoes);
+        $("#opr_variaveis").focus();
+
+        $('#opr_variaveis').change(function() {
+
+            $("#label_igual").after(opr_select_var_val);
+
+            $('#opr_select_var_val').change(function() {
+
+                if ($(this).val() === 'valor') {
+                    $('#menu_variaveis').remove();
+                    $("#opr_select_var_val").after(" <input type='text' id='campo_de_valor' title='defina o valor'>")
+                        .after(operadores);
+                    $("#campo_de_valor").focus();
+                }
+                if ($(this).val() === 'var') {
+                    $('#campo_de_valor').remove();
+                    $("#opr_select_var_val").after(variaveis).after(operadores);;
+                    $("#menu_variaveis").focus();
+
+                }
+
+            });
+
+
+        });
+
+    });
+}); */
+
+/*      if ($(this).val() === 'valor') {
+         $('#menu_variaveis').remove();
+         $("#valor_opr1").after(" <input type='text' id='campo_de_atribuicao' title='defina a atribuição'>");
+         $("#campo_de_atribuicao").focus();
+     }
+     if ($(this).val() === 'var') {
+         $('#campo_de_atribuicao').remove();
+         $("#valor_opr1").after(variaveis);
+         $("#menu_variaveis").focus();
+
+     } */
+
+/* });
+
+$('#valor_opr2').change(function() {
+    if ($(this).val() === 'valor') {
+        $('#menu_variaveis').remove();
+        $("#valor_opr2").after(" <input type='text' id='campo_de_atribuicao' title='defina a atribuição'>");
+        $("#campo_de_atribuicao").focus();
+    }
+    if ($(this).val() === 'var') {
+        $('#campo_de_atribuicao').remove();
+        $("#valor_opr2").after(variaveis);
+        $("#menu_variaveis").focus();
+
+    }
+
+});
+
+$("#bt_excluir_opr").click(function() {
+    $("#li_opr").remove();
+
+});
+
+
+}); */

js/accessibleUI/shortcuts/shortcuts-events.js

@@ -0,0 +1,3 @@
+$(document).bind('keydown', 'alt+r', () => {
+    $("#code").append("Compiling code...");
+});

js/accessibleUI/util/jquery.hotkeys.js

@@ -0,0 +1,204 @@
+/*jslint browser: true*/
+/*jslint jquery: true*/
+
+/*
+ * jQuery Hotkeys Plugin
+ * Copyright 2010, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Based upon the plugin by Tzury Bar Yochay:
+ * https://github.com/tzuryby/jquery.hotkeys
+ *
+ * Original idea by:
+ * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
+ */
+
+/*
+ * One small change is: now keys are passed by object { keys: '...' }
+ * Might be useful, when you want to pass some other data to your handler
+ */
+
+(function(jQuery) {
+
+  jQuery.hotkeys = {
+    version: "0.2.0",
+
+    specialKeys: {
+      8: "backspace",
+      9: "tab",
+      10: "return",
+      13: "return",
+      16: "shift",
+      17: "ctrl",
+      18: "alt",
+      19: "pause",
+      20: "capslock",
+      27: "esc",
+      32: "space",
+      33: "pageup",
+      34: "pagedown",
+      35: "end",
+      36: "home",
+      37: "left",
+      38: "up",
+      39: "right",
+      40: "down",
+      45: "insert",
+      46: "del",
+      59: ";",
+      61: "=",
+      96: "0",
+      97: "1",
+      98: "2",
+      99: "3",
+      100: "4",
+      101: "5",
+      102: "6",
+      103: "7",
+      104: "8",
+      105: "9",
+      106: "*",
+      107: "+",
+      109: "-",
+      110: ".",
+      111: "/",
+      112: "f1",
+      113: "f2",
+      114: "f3",
+      115: "f4",
+      116: "f5",
+      117: "f6",
+      118: "f7",
+      119: "f8",
+      120: "f9",
+      121: "f10",
+      122: "f11",
+      123: "f12",
+      144: "numlock",
+      145: "scroll",
+      173: "-",
+      186: ";",
+      187: "=",
+      188: ",",
+      189: "-",
+      190: ".",
+      191: "/",
+      192: "`",
+      219: "[",
+      220: "\\",
+      221: "]",
+      222: "'"
+    },
+
+    shiftNums: {
+      "`": "~",
+      "1": "!",
+      "2": "@",
+      "3": "#",
+      "4": "$",
+      "5": "%",
+      "6": "^",
+      "7": "&",
+      "8": "*",
+      "9": "(",
+      "0": ")",
+      "-": "_",
+      "=": "+",
+      ";": ": ",
+      "'": "\"",
+      ",": "<",
+      ".": ">",
+      "/": "?",
+      "\\": "|"
+    },
+
+    // excludes: button, checkbox, file, hidden, image, password, radio, reset, search, submit, url
+    textAcceptingInputTypes: [
+      "text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime",
+      "datetime-local", "search", "color", "tel"],
+
+    // default input types not to bind to unless bound directly
+    textInputTypes: /textarea|input|select/i,
+
+    options: {
+      filterInputAcceptingElements: true,
+      filterTextInputs: true,
+      filterContentEditable: true
+    }
+  };
+
+  function keyHandler(handleObj) {
+    if (typeof handleObj.data === "string") {
+      handleObj.data = {
+        keys: handleObj.data
+      };
+    }
+
+    // Only care when a possible input has been specified
+    if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string") {
+      return;
+    }
+
+    var origHandler = handleObj.handler,
+      keys = handleObj.data.keys.toLowerCase().split(" ");
+
+    handleObj.handler = function(event) {
+      //      Don't fire in text-accepting inputs that we didn't directly bind to
+      if (this !== event.target &&
+        (jQuery.hotkeys.options.filterInputAcceptingElements &&
+          jQuery.hotkeys.textInputTypes.test(event.target.nodeName) ||
+          (jQuery.hotkeys.options.filterContentEditable && jQuery(event.target).attr('contenteditable')) ||
+          (jQuery.hotkeys.options.filterTextInputs &&
+            jQuery.inArray(event.target.type, jQuery.hotkeys.textAcceptingInputTypes) > -1))) {
+        return;
+      }
+
+      var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[event.which],
+        character = String.fromCharCode(event.which).toLowerCase(),
+        modif = "",
+        possible = {};
+
+      jQuery.each(["alt", "ctrl", "shift"], function(index, specialKey) {
+
+        if (event[specialKey + 'Key'] && special !== specialKey) {
+          modif += specialKey + '+';
+        }
+      });
+
+      // metaKey is triggered off ctrlKey erronously
+      if (event.metaKey && !event.ctrlKey && special !== "meta") {
+        modif += "meta+";
+      }
+
+      if (event.metaKey && special !== "meta" && modif.indexOf("alt+ctrl+shift+") > -1) {
+        modif = modif.replace("alt+ctrl+shift+", "hyper+");
+      }
+
+      if (special) {
+        possible[modif + special] = true;
+      }
+      else {
+        possible[modif + character] = true;
+        possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
+
+        // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
+        if (modif === "shift+") {
+          possible[jQuery.hotkeys.shiftNums[character]] = true;
+        }
+      }
+
+      for (var i = 0, l = keys.length; i < l; i++) {
+        if (possible[keys[i]]) {
+          return origHandler.apply(this, arguments);
+        }
+      }
+    };
+  }
+
+  jQuery.each(["keydown", "keyup", "keypress"], function() {
+    jQuery.event.special[this] = {
+      add: keyHandler
+    };
+  });
+
+})(jQuery || this.jQuery || window.jQuery);

js/accessibleUI/util/object-common.js

@@ -0,0 +1,7 @@
+Object.size = function(obj) {
+    let size = 0, key;
+    for (key in obj) {
+        if (obj.hasOwnProperty(key)) size++;
+    }
+    return size;
+};

js/accessibleUI/util/sub-menu.js

@@ -0,0 +1,22 @@
+const subMenuOptions = document.getElementById("subMenuOptions");
+const subMenuOptionsTitle = document.getElementById("subMenuOptionsTitle");
+const subMenuOptionsTitleH3 = document.getElementById("subMenuOptionsTitleH3");
+const subMenuOptionsBody = document.getElementById("subMenuOptionsBody");
+const subMenuOptionsFooter = document.getElementById("subMenuOptionsFooter");
+
+function hideSubMenu() {
+    subMenuOptions.style.display = 'none';
+}
+
+function showSubMenu() {
+    subMenuOptions.style.display = 'inline';
+}
+// ==> Code for an class observer that is triggered every time a element style is changed <==
+// var observer = new MutationObserver(function (mutations) {
+//     mutations.forEach(function (mutationRecord) {
+//         console.log("style changed!");
+//     });
+// });
+//
+// var target = document.getElementById('subMenuOptions');
+// observer.observe(target, { attributes: true, attributeFilter: ["style"] });

js/main.js

@@ -1,4 +1,4 @@
-import { runner } from "./runner";
+import {runner} from "./runner";
 import {
   initVisualUI,
   addFunctionChangeListener,
@@ -7,8 +7,9 @@ import {
   removeGlobalListener,
   getTestCases,
 } from "./visualUI/functions";
+import {initAccessibleUI} from './accessibleUI/main';
 import * as LocalizedStringsService from "./services/localizedStringsService";
-import { i18nHelper } from "./services/i18nHelper";
+import {i18nHelper} from "./services/i18nHelper";
 import {
   ActionTypes,
   getLogs,
@@ -21,10 +22,10 @@ import {
   prepareActivityToStudentHelper,
   autoEval,
 } from "./util/iassignHelpers";
-import { openAssessmentDetail } from "./util/utils";
-import { Config } from "./util/config";
+import {openAssessmentDetail} from "./util/utils";
+import {Config} from "./util/config";
 import * as CodeEditorAll from "./visualUI/text_editor";
-import { autoGenerateTestCaseOutput } from "./util/auto_gen_output";
+import {autoGenerateTestCaseOutput} from "./util/auto_gen_output";
 
 const CodeEditor = {
   initTextEditor: CodeEditorAll.initTextEditor,
@@ -59,5 +60,6 @@ export {
   openAssessmentDetail,
   autoGenerateTestCaseOutput,
   Config,
+  initAccessibleUI,
 };
 

package.json

@@ -31,6 +31,7 @@
     "@babel/preset-env": "^7.10.2",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
+    "@webpack-cli/serve": "^1.1.0",
     "antlr4-webpack-loader": "*",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "3.x",
@@ -42,7 +43,8 @@
     "ts-loader": "^5.4.5",
     "typescript": "^3.9.5",
     "webpack": "^4.43.0",
-    "webpack-cli": "3.x"
+    "webpack-cli": "3.x",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.2",

start.sh

@@ -0,0 +1,2 @@
+npm run build
+npm run start

templates/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title></title>
     <link href="css/roboto.css" type="text/css" rel="stylesheet">
@@ -16,146 +16,275 @@
     <script src="js/semantic.min.js"></script>
     <script src="js/Sortable.js"></script>
     <script src="js/iassign-integration-functions.js"></script>
-  </head>
-  <body>
 
+    <!-- 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"/>
+</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>
+        </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="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">
-            <i class="expand arrows alternate icon"></i>
-          </a>-->
-          <a class="item help_button">
-            <i class="help icon"></i>
-          </a>
-        </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="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>
 
-            <div class="list_globals" id="listGlobalsHandle"></div>
+                    <div class="all_functions list-group" id="listWithHandle">
 
-          </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 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 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 -->
+    <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>
+                        </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>
+                    <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>
         </div>
-        <div id='ivprog-term-div' class="six column wide">
+    </div>
+    <!-- Main container -->
 
+    <!-- Terminal -->
+    <div class="row">
+        <div class="col-12">
+            <div id="terminal" style="width: 97%; margin-left: 2%"></div>
         </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>
+    <!-- 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>
-    <script src="js/iassign-integration-functions.js"></script>
-  </div>
-  </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);*/
+    <!-- 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'
       });
-      ivprogCore.LocalizedStrings.updateTagText();
-      ivprogCore.CodeEditor.initTextEditor("ivprog-text-editor");
-      iassingIntegration();
-      if (iLMparameters.iLM_PARAM_TeacherAutoEval == null) {
-        ivprogCore.initVisualUI();
-      }
+
+    $(".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);*/
     });
-  </script>
+    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>

webpack.config.js

@@ -81,7 +81,7 @@ module.exports = {
         from: "css/ivprog-visual-1.0.css",
         to: path.resolve(__dirname, "build/css"),
       },
-      { from: "css/ivprog-term.css", to: path.resolve(__dirname, "build/css") },
+      {from: "css/ivprog-term.css", to: path.resolve(__dirname, "build/css")},
       {
         from: "css/ivprog-assessment.css",
         to: path.resolve(__dirname, "build/css"),
@@ -90,21 +90,21 @@ module.exports = {
         from: "css/ivprog-editor.css",
         to: path.resolve(__dirname, "build/css"),
       },
-      { from: "css/roboto.css", to: path.resolve(__dirname, "build/css") },
-      { from: "css/fonts/", to: path.resolve(__dirname, "build/css/fonts") },
-      { from: "js/Sortable.js", to: path.resolve(__dirname, "build/js") },
-      { from: "js/jquery.min.js", to: path.resolve(__dirname, "build/js") },
-      { from: "js/jquery-ui.min.js", to: path.resolve(__dirname, "build/js") },
-      { from: "js/semantic.min.js", to: path.resolve(__dirname, "build/js") },
+      {from: "css/roboto.css", to: path.resolve(__dirname, "build/css")},
+      {from: "css/fonts/", to: path.resolve(__dirname, "build/css/fonts")},
+      {from: "js/Sortable.js", to: path.resolve(__dirname, "build/js")},
+      {from: "js/jquery.min.js", to: path.resolve(__dirname, "build/js")},
+      {from: "js/jquery-ui.min.js", to: path.resolve(__dirname, "build/js")},
+      {from: "js/semantic.min.js", to: path.resolve(__dirname, "build/js")},
       {
         from: "css/semantic.min.css",
         to: path.resolve(__dirname, "build/css"),
       },
-      { from: "css/themes/", to: path.resolve(__dirname, "build/css/themes") },
-      { from: "img/trash-icon.png", to: path.resolve(__dirname, "build/img") },
-      { from: "img/empty.svg", to: path.resolve(__dirname, "build/img") },
-      { from: "img/new_line.svg", to: path.resolve(__dirname, "build/img") },
-      { from: "img/no_new_line.svg", to: path.resolve(__dirname, "build/img") },
+      {from: "css/themes/", to: path.resolve(__dirname, "build/css/themes")},
+      {from: "img/trash-icon.png", to: path.resolve(__dirname, "build/img")},
+      {from: "img/empty.svg", to: path.resolve(__dirname, "build/img")},
+      {from: "img/new_line.svg", to: path.resolve(__dirname, "build/img")},
+      {from: "img/no_new_line.svg", to: path.resolve(__dirname, "build/img")},
       {
         from: "js/jquery.json-editor.min.js",
         to: path.resolve(__dirname, "build/js"),
@@ -123,6 +123,16 @@ module.exports = {
       },
       /*{from:'index.html', to:path.resolve(__dirname, 'build')},
         {from:'runner.html', to:path.resolve(__dirname, 'build')},*/
+
+      // Accessible UI
+      {from: "css/accessible/bootstrap/bootstrap.css", to: path.resolve(__dirname, "build/css/accessible/bootstrap")},
+      {from: "css/accessible/bootstrap/bootstrap-grid.css", to: path.resolve(__dirname, "build/css/accessible/bootstrap")},
+      {from: "css/accessible/bootstrap/bootstrap-reboot.css", to: path.resolve(__dirname, "build/css/accessible/bootstrap")},
+      {from: "css/accessible/design.css", to: path.resolve(__dirname, "build/css/accessible")},
+      {from: "css/accessible/forms_var_comand.css", to: path.resolve(__dirname, "build/css/accessible")},
+      {from: "css/accessible/style.css", to: path.resolve(__dirname, "build/css/accessible")},
+      {from: "js/accessibleUI/bootstrap/bootstrap.bundle.js", to: path.resolve(__dirname, "build/js/accessible/bootstrap"),},
+      {from: "js/accessibleUI/bootstrap/bootstrap.js", to: path.resolve(__dirname, "build/js/accessible/bootstrap"),},
     ]),
   ],
   optimization: {
@@ -133,5 +143,5 @@ module.exports = {
   devtool: "source-map",
   watchOptions: {
     ignored: [path.resolve(__dirname, ".ima_version.json")],
-  },
+  }
 };