Continuando os refinamentos

css/ivprog-visual-1.0.css

@@ -151,7 +151,8 @@ body {
 .function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
 .expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
 .expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression,
-.incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var, .parameter_div_edit {
+.incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var, .parameter_div_edit,
+.all_elements_write, .container_var_element_control {
 	display: inline;
 }
 
@@ -282,7 +283,15 @@ div.buttons_manage_columns {
 	margin: 5px;
 	background: #f9f9f9;
 }
-
+.ui.repeatNtimes .separator_character {
+	margin-right: 10px;
+}
+.ui.repeatNtimes, .ui.whiletrue {
+    min-height: 50px;
+}
+.ui.dowhiletrue .ui.block_commands {
+	min-height: 10px;
+}
 .add_var_top_button {
 	padding-right: 50px;
 }
@@ -615,4 +624,7 @@ div.function_name_div_updated:active,
     width: 100%;
     display: inline-block;
     font-style: italic;
-}
+}
+.ui.dropdown.menu_start_rendered .text i {
+    padding-right: 8px;
+}

i18n/en/ui.json

@@ -71,6 +71,11 @@
   "text_teacher_test_case_output": "Output",
   "text_teacher_test_case_actions": "Actions",
   "text_teacher_test_case_add": "Add test cases",
+  "text_header_ivprog_functions": "iVProg Functions",
+  "text_menu_functions_math":"Mathematics",
+  "text_menu_functions_text":"Text",
+  "text_menu_functions_arrangement":"Arrangement",
+  "text_menu_functions_conversion":"Conversion",
   "tooltip_visual": "Visual programming",
   "tooltip_textual": "Textual programming",
   "tooltip_upload": "Upload code file",
@@ -85,6 +90,8 @@
   "tooltip_console": "Open/Close console",
   "var_menu_select_var": "Select a var",
   "var_menu_select_all": "Select",
-  "var_menu_select_function": "Select a function"
+  "var_menu_select_function": "Select a function",
+  "expression_menu_select": "Select an expression",
+  "$sin": "Matematica.sen"
 
 }

i18n/es/ui.json

@@ -71,6 +71,11 @@
   "text_teacher_test_case_output": "Output",
   "text_teacher_test_case_actions": "Actions",
   "text_teacher_test_case_add": "Add test cases",
+  "text_header_ivprog_functions": "iVProg Functions",
+  "text_menu_functions_math":"Mathematics",
+  "text_menu_functions_text":"Text",
+  "text_menu_functions_arrangement":"Arrangement",
+  "text_menu_functions_conversion":"Conversion",
   "tooltip_visual": "Visual programming",
   "tooltip_textual": "Textual programming",
   "tooltip_upload": "Upload code file",
@@ -85,5 +90,6 @@
   "tooltip_console": "Open/Close console",
   "var_menu_select_var": "Select a var",
   "var_menu_select_all": "Select",
-  "var_menu_select_function": "Select a function"
+  "var_menu_select_function": "Select a function",
+  "expression_menu_select": "Select an expression"
 }

i18n/pt/ui.json

@@ -72,6 +72,11 @@
   "text_teacher_test_case_output": "Saída",
   "text_teacher_test_case_actions": "Ações",
   "text_teacher_test_case_add": "Adicionar caso de teste",
+  "text_header_ivprog_functions": "Funções do iVProg",
+  "text_menu_functions_math":"Matemática",
+  "text_menu_functions_text":"Texto",
+  "text_menu_functions_arrangement":"Arranjo",
+  "text_menu_functions_conversion":"Conversão",
   "tooltip_visual": "Programação visual",
   "tooltip_textual": "Programação textual",
   "tooltip_upload": "Upload de código fonte",
@@ -86,5 +91,6 @@
   "tooltip_console": "Abrir/fechar o terminal",
   "var_menu_select_var": "Selecione uma variável",
   "var_menu_select_all": "Selecione",
-  "var_menu_select_function": "Selecione uma função"
+  "var_menu_select_function": "Selecione uma função",
+  "expression_menu_select": "Selecione uma expressão"
 }

index.html

@@ -113,7 +113,7 @@
 
 
       <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
-        <textarea class="ivprog_textual_code" disabled></textarea>
+        <textarea class="ivprog_textual_code" readonly></textarea>
       </div>
 
       <div id='ivprog-term' class="six column wide">
@@ -133,9 +133,5 @@
       });
     </script>
 
-
-    
-
-
   </body>
 </html>

js/semantic/semantic-buttons.js

@@ -50,18 +50,6 @@ var button_ready = function() {
 
   });
 
-
-  //Sortable:
-  Sortable.create(listWithHandle, {
-    handle: '.glyphicon-move',
-    animation: 100,
-    ghostClass: 'ghost',
-    group: 'functions_divs_drag',
-    // onEnd: function (evt) {
-    //   updateSequenceFunctionHandler(evt.oldIndex, evt.newIndex);
-    // }
-  });
-
 };
 
 var mouseX;

js/visualUI/code_generator.js

@@ -614,7 +614,12 @@ function variableValueMenuCode (variable_obj) {
 
 	var ret = '';
 	if (variable_obj.function_called) {
-		ret += variable_obj.function_called.name + ' ( ';
+
+		if (variable_obj.function_called.name) {
+			ret += variable_obj.function_called.name + ' ( ';
+		} else {
+			ret += LocalizedStrings.getUI(variable_obj.function_called.identifier) + ' ( ';
+		}
 
 		if (variable_obj.parameters_list) {
 			for (var i = 0; i < variable_obj.parameters_list.length; i++) {

js/visualUI/commands/attribution.js

@@ -14,16 +14,18 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	
-	var el = $('<div class="ui attribution command_container"><i class="ui icon small arrow left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <i class="ui icon redo alternate blue button_refresh_attribution"></i> <div class="var_attributed"></div> <span class="text_attr_receives span_command_spec">'+LocalizedStrings.getUI('text_receives')+'</span> '
+	var el = $('<div class="ui attribution command_container"><i class="ui icon small arrow left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_attributed"></div> <span class="text_attr_receives span_command_spec">'+LocalizedStrings.getUI('text_receives')+'</span> '
 		 + '<div class="expression_elements"></div> </div>');
 	el.data('command', command);
 
 	VariableValueMenu.renderMenu(command, command.variable, el.find('.var_attributed'), function_obj);
 
-	var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.none, 
+	if (!command.expression || command.expression.length < 1) {
+		var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.none, 
 		new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
 
-	command.expression.push(exp);
+		command.expression.push(exp);
+	}
 
 	addHandlers(command, function_obj, el);
 

js/visualUI/commands/conditional_expression.js

@@ -120,11 +120,11 @@ function renderLogicOperator (command, all_expression, expression_logic, logic_o
 
 function renderLogicExpression (command, all_expression, expression_logic, function_obj, element_to_append, initial_el_to_render) {
 
-	var exp_el_par_1 = $(' <span class="span_command_spec"> ( </span> ');
+	var exp_el_par_1 = $(' <span class="span_command_spec"> </span> ');
 	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
 	var exp_el_expr_operand = $('<div class="expression_element"></div>');
 	var exp_el_expr_el_2 = $('<div class="expression_element"></div>');
-	var exp_el_par_2 = $(' <span class="span_command_spec"> ) </span> ');
+	var exp_el_par_2 = $(' <span class="span_command_spec"> </span> ');
 
 	if (expression_logic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
 		renderLogicExpression(command, all_expression, expression_logic.first_operand, function_obj, exp_el_expr_el_1);
@@ -159,11 +159,11 @@ function renderLogicExpression (command, all_expression, expression_logic, funct
 
 function renderArithmeticExpression (command, all_expression, expression_arithmetic, function_obj, element_to_append) {
 
-	var exp_el_par_1 = $(' <span class="span_command_spec"> ( </span> ');
+	var exp_el_par_1 = $(' <span class="span_command_spec"> </span> ');
 	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
 	var exp_el_expr_operand = $('<div class="expression_element"></div>');
 	var exp_el_expr_el_2 = $('<div class="expression_element"></div>');
-	var exp_el_par_2 = $(' <span class="span_command_spec"> ) </span> ');
+	var exp_el_par_2 = $(' <span class="span_command_spec"> </span> ');
 
 
 	if (expression_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
@@ -193,7 +193,7 @@ function renderArithmeticExpression (command, all_expression, expression_arithme
 
 function renderStartMenu (command, expression, function_obj, initial_el_to_render) {
 	var start_menu = '';
-	start_menu += '<div class="ui dropdown menu_start_rendered"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+	start_menu += '<div class="ui dropdown menu_start_rendered"><div class="text"><i>'+LocalizedStrings.getUI('expression_menu_select')+'</i></div><i class="dropdown icon"></i><div class="menu">';
 	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_logic+'">'+LocalizedStrings.getUI('text_logic_expression')+'</div>';
 	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_arithmetic+'">'+LocalizedStrings.getUI('text_arithmetic_expression')+'</div>';
 	start_menu += '</div></div>';
@@ -223,9 +223,9 @@ function renderStartMenu (command, expression, function_obj, initial_el_to_rende
     	}
 	});
 
-	initial_el_to_render.append(' <span class="span_command_spec"> ( </span> ');
+	initial_el_to_render.append(' <span class="span_command_spec"> </span> ');
 	
 	initial_el_to_render.append(start_menu);
 
-	initial_el_to_render.append(' <span class="span_command_spec"> ) </span> ');
+	initial_el_to_render.append(' <span class="span_command_spec"> </span> ');
 }

js/visualUI/commands/dowhiletrue.js

@@ -17,7 +17,7 @@ export function renderCommand (command, function_obj) {
 	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do') + ' </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
-	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_code_while') + ' </span> <div class="conditional_expression"></div>';
+	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_code_while') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
 	ret += '</div>';
 
 	var el = $(ret);

js/visualUI/commands/iftrue.js

@@ -13,9 +13,9 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <i class="ui icon redo alternate blue button_refresh_attribution"></i>';
+	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i>';
 	ret += '<span class="span_command_spec"> ' + LocalizedStrings.getUI('text_if') + '</span>';
-	ret += ' <div class="conditional_expression"></div>';
+	ret += ' <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
 	ret += '<span> </span> ';
 	ret += '<div class="ui block_commands commands_if conditional_comands_block" data-if="true">';
  	ret += '</div></div>';
@@ -35,11 +35,6 @@ export function renderCommand (command, function_obj) {
 
 	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
 
-	el.find('.button_refresh_attribution').on('click', function() {
-		el.find('.conditional_expression').empty();
-		ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));		
-	});
-
 	if (command.commands_block) {
 		for (var j = 0; j < command.commands_block.length; j++) {
 		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.commands_if')[0]), 3, function_obj);

js/visualUI/commands/variable_value_menu.js

@@ -14,20 +14,6 @@ export const VAR_OR_VALUE_TYPES = Object.freeze({only_variable: 1, only_value: 2
 export function renderMenu (command, ref_object, dom_object, function_obj, size_field = 2, expression_element) {
 	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-algo="12"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 
-	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) {
-
-		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_functions">';
-		menu_var_or_value += '</div>';
-	} 
-
-	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) 
-		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
-		
-		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('btn_function');
-		menu_var_or_value += '<div class="menu menu_only_functions">';
-		menu_var_or_value += '</div></div>';
-	}
-	
 	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_variable) {
 
 		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_vars">';
@@ -50,6 +36,21 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 
 		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_value+'">'+LocalizedStrings.getUI('text_value')+'</div>';
 
+	}
+
+	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) {
+
+		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_functions">';
+		menu_var_or_value += '</div>';
+	} 
+
+	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) 
+		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
+		
+		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('btn_function');
+		menu_var_or_value += '<div class="menu menu_only_functions">';
+		menu_var_or_value += '</div></div>';
+
 		if (command.type == Models.COMMAND_TYPES.attribution) {
 			menu_var_or_value += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 			menu_var_or_value += '<div class="menu">';
@@ -72,6 +73,8 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 
     addFunctionsToMenu(function_obj, menu_var_or_value, ref_object, expression_element);
 
+	addIVProgFunctionsToMenu(function_obj, menu_var_or_value, ref_object, expression_element);
+
     if (ref_object.content || ref_object.function_called) {
     	// Verificar se a variável ainda existe:
     	if (isVarInProgram(ref_object.content, function_obj)) {
@@ -194,8 +197,14 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			menu_var_or_value.find('.text').text(' ');
 			dom_object.find('.menu_var_or_value_dom').remove();
 
-			var parameters_menu = '<div class="parameters_function_called"> '+variable_obj.function_called.name+' <span> ( </span>';
+			var parameters_menu;
 			
+			if (variable_obj.function_called.name) {
+				parameters_menu = '<div class="parameters_function_called"> '+variable_obj.function_called.name+' <span> ( </span>';
+			} else {
+				parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(variable_obj.function_called.identifier)+'</i> <span> ( </span>';
+			}
+
 			parameters_menu += '<span> ) </span></div>';
 
 			parameters_menu = $(parameters_menu);
@@ -222,6 +231,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+				 console.log('S1');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP1');
 			     	dom_object.text('');
@@ -245,7 +255,14 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			menu_var_or_value.find('.text').text(' ');
 			dom_object.find('.menu_var_or_value_dom').remove();
 
-			var parameters_menu = '<div class="parameters_function_called"> '+variable_obj.function_called.name+' <span> ( </span>';
+			var parameters_menu;
+
+			if (variable_obj.function_called.name) {
+				parameters_menu = '<div class="parameters_function_called"> '+variable_obj.function_called.name+' <span> ( </span>';
+			} else {
+				parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(variable_obj.function_called.identifier)+'</i> <span> ( </span>';
+			}
+
 			for (var j = 0; j < variable_obj.function_called.parameters_list.length; j++) {
 				parameters_menu += '<div class="render_style_param parameter_'+j+'"></div>';
 				if ((j + 1) != variable_obj.function_called.parameters_list.length) {
@@ -283,6 +300,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S2');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP2');
 			     	dom_object.text('');
@@ -341,6 +359,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S3');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP3');
 			     	dom_object.text('');
@@ -400,6 +419,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S4');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP4');
 			     	dom_object.text('');
@@ -443,7 +463,9 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 			context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
 
-			if (command.type == Models.COMMAND_TYPES.attribution) {
+			if (command.type == Models.COMMAND_TYPES.attribution && !dom_object.hasClass('var_attributed')) {
+				console.log('dom_object6');
+				console.log(dom_object);
 				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 				context_menu += '<div class="menu">';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
@@ -460,6 +482,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S5');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP5');
 			     	dom_object.text('');
@@ -513,6 +536,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
+				console.log('S6');
 		     if ($selectedItem.data('clear')) {
 		     	console.log('PP6');
 		     	dom_object.text('');
@@ -547,9 +571,29 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			openInputToValue(command, variable_obj, dom_object, menu_var_or_value, function_obj, expression_element);
 		});
 	}
+}
 
-	
-
+function addIVProgFunctionsToMenu (function_obj, menu_var_or_value, ref_object, expression_element) {
+	var sub_menu = menu_var_or_value.find('.menu_only_functions');
+	sub_menu.append('<div class="divider"></div><div class="header">'+LocalizedStrings.getUI('text_header_ivprog_functions')+'</div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_math')+'<div class="menu menu_math_functions"></div></div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_text')+'<div class="menu menu_text_functions"></div></div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_arrangement')+'<div class="menu menu_arrangement_functions"></div></div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_conversion')+'<div class="menu menu_conversion_functions"></div></div>');
+
+	// Insert Math functions:
+	for (var i = 0; i < window.system_functions.length; i++) {
+		var t = $('<div class="item"></div>');
+		t.data('function_reference', window.system_functions[i]);
+		t.data('option', VAR_OR_VALUE_TYPES.only_function);
+		t.text(LocalizedStrings.getUI(window.system_functions[i].identifier));
+		
+		switch(window.system_functions[i].category) {
+			case Models.SYSTEM_FUNCTIONS_CATEGORIES.math:
+				sub_menu.find('.menu_math_functions').append(t);
+				break;
+		}	
+	}
 }
 
 function addFunctionsToMenu (function_obj, menu_var_or_value, ref_object, expression_element) {
@@ -610,6 +654,7 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 	if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
 		menu_var_or_value.dropdown({
 		  onChange: function(value, text, $selectedItem) {
+		  	console.log('S7');
 		  	dom_object.find('.var_name').remove();
 		     switch ($selectedItem.data('option')) {
 		     	case VAR_OR_VALUE_TYPES.only_function:
@@ -675,7 +720,12 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		menu_var_or_value.find('.text').text(' ');
 		dom_object.find('.menu_var_or_value_dom').remove();
 
-		var parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		var parameters_menu;
+		if (function_selected.name) {
+			parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		} else {
+			parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(function_selected.identifier)+'</i> <span> ( </span>';
+		}
 		for (var j = 0; j < function_selected.parameters_list.length; j++) {
 			parameters_menu += '<div class="render_style_param parameter_'+j+'"></div>';
 			if ((j + 1) != function_selected.parameters_list.length) {
@@ -715,6 +765,7 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
+				console.log('S8');
 		     if ($selectedItem.data('clear')) {
 		     	console.log('PP7');
 		     	dom_object.text('');
@@ -738,7 +789,13 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		menu_var_or_value.find('.text').text(' ');
 		dom_object.find('.menu_var_or_value_dom').remove();
 
-		var parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		var parameters_menu;
+
+		if (function_selected.name) {
+			parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		} else {
+			parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(function_selected.identifier)+'</i> <span> ( </span>';
+		}
 		
 		parameters_menu += '<span> ) </span></div>';
 
@@ -766,6 +823,7 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
+				console.log('S9');
 		     if ($selectedItem.data('clear')) {
 		     	console.log('PP8');
 		     	dom_object.text('');
@@ -789,10 +847,6 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 	if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
 	}
-
-	if (command.type == Models.COMMAND_TYPES.writer) {
-		WritersManagement.addContent(command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object.content);
-	}
 }
 
 function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected, expression_element) {
@@ -834,7 +888,9 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 	var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 	context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
 
-	if (command.type == Models.COMMAND_TYPES.attribution) {
+	if (command.type == Models.COMMAND_TYPES.attribution && !dom_object.hasClass('var_attributed')) {
+		console.log("dom_object 10: ");
+		console.log(dom_object);
 		context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 		context_menu += '<div class="menu">';
 		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
@@ -851,6 +907,7 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 
 	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
+			console.log('S10');
 	     if ($selectedItem.data('clear')) {
 	     	console.log('PP9');
 	     	dom_object.text('');
@@ -878,12 +935,6 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 	if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected);
 	}
-
-	if (command.type == Models.COMMAND_TYPES.writer) {
-		WritersManagement.addContent(command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected);
-	}
-
-	
 }
 
 
@@ -926,6 +977,7 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 
 	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
+			console.log('S11');
 	     if ($selectedItem.data('clear')) {
 	     	console.log('PP10');
 	     	dom_object.text('');
@@ -1004,10 +1056,6 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 	if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
 	}
-
-	if (command.type == Models.COMMAND_TYPES.writer) {
-		WritersManagement.addContent(command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object.content);
-	}
 }
 
 

js/visualUI/commands/whiletrue.js

@@ -15,7 +15,7 @@ export function createFloatingCommand () {
 export function renderCommand (command, function_obj) {
 	var ret = '';
 	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_code_while') + ' </span>';
-	ret += ' <div class="conditional_expression"></div>';
+	ret += '<span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
 	ret += ' </span>';
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';

js/visualUI/commands/writer.js

@@ -14,15 +14,19 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui writer command_container"> <i class="ui icon small upload command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec">'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="var_value_menu_div"></div> <span class="close_parentheses span_command_spec">)</span> </div>';
+	ret += '<div class="ui writer command_container"> <i class="ui icon small upload command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec">'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="all_elements_write"></div> <span class="close_parentheses span_command_spec">)</span> </div>';
 
 	var el = $(ret);
 	el.data('command', command);
 
-	VariableValueMenu.renderMenu(command, command.content[0], $(el).find('.var_value_menu_div'), function_obj);
+	for (var i = 0; i < command.content.length; i ++) {
+		var new_div_item = $( '<div class="var_value_menu_div"></div>' );
+		el.find('.all_elements_write').append(new_div_item);
+		VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);
 
+		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
+	}
 	addHandlers(command, function_obj, el);
-
 	return el;
 }
 
@@ -35,15 +39,43 @@ function addHandlers (command, function_obj, writer_dom) {
 	});
 }
 
+function addHandlerIconAdd (dom_object, command, function_obj, insert_after = false, after_which = null) {
+	var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
+	if (!insert_after) {
+		dom_object.append(icon_add_item);
+	} else {
+		icon_add_item.insertAfter(after_which);
+	}
+	
+	icon_add_item.on('click', function(e) {
+		var new_div_item = $( '<div class="var_value_menu_div" style="display:none;"></div>' );
+		new_div_item.insertAfter(icon_add_item);
+		var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+
+		VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
+
+		addHandlerIconAdd(dom_object, command, function_obj, true, new_div_item);
+		var pos = 1;
+		dom_object.find('.icon_add_item_to_writer').each(function() {
+			if ($(this).get(0) === icon_add_item.get(0)) {
+				command.content.splice(pos, 0, new_related_menu);
+			} else {
+				pos ++;
+			}
+		});
+		new_div_item.fadeIn();
+	});
+}
+
 export function addContent (command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object_content) {
 	
-	if ($(dom_object).hasClass('var_value_menu_div')) {
+	if (dom_object.hasClass('var_value_menu_div')) {
 		var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
-		$(icon_add_item).insertAfter(dom_object);
+		icon_add_item.insertAfter(dom_object);
 
-		$( icon_add_item ).on('click', function(e) {
+		icon_add_item.on('click', function(e) {
 			var new_div_item = $( '<div class="var_value_menu_div"></div>' );
-			$(new_div_item).insertAfter(icon_add_item);
+			new_div_item.insertAfter(icon_add_item);
 			var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
 
 			VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
@@ -51,5 +83,4 @@ export function addContent (command, ref_object, dom_object, menu_var_or_value,
 			command.content.push(new_related_menu);
 		});
 	}
-	
 }

js/visualUI/functions.js

@@ -15,6 +15,8 @@ import { SemanticAnalyser } from '../processor/semantic/semanticAnalyser';
 import { IVProgAssessment } from '../assessment/ivprogAssessment';
 import * as AlgorithmManagement from './algorithm';
 
+import '../Sortable.js';
+
 var counter_new_functions = 0;
 var counter_new_parameters = 0;
 
@@ -22,6 +24,11 @@ let studentTemp = null;
 let domConsole = null;
 window.studentGrade = null;
 const program = new Models.Program();
+
+window.system_functions = [];
+window.system_functions.push(new Models.SystemFunction('$sin', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  "seno de um número", Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+
 /*const variable1 = new Models.Variable(Types.INTEGER, "a", 1);
 const parameter1 = new Models.Variable(Types.INTEGER, "par_1", 1);
 const command1 = new Models.Comment(new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.only_value, "Testing rendering commands"));
@@ -398,8 +405,23 @@ $( document ).ready(function() {
       hide: 0
     }
   });
+
+  Sortable.create(listWithHandle, {
+    handle: '.glyphicon-move',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'functions_divs_drag',
+    onEnd: function (evt) {
+       updateSequenceFunction(evt.oldIndex, evt.newIndex);
+    }
+  });
+
 });
 
+function updateSequenceFunction (oldIndex, newIndex) {
+  program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
+}
+
 function runCodeAssessment () {
   toggleConsole(true);
 

js/visualUI/ivprog_elements.js

@@ -17,6 +17,8 @@ export const ARITHMETIC_COMPARISON = Object.freeze({greater_than:"greater_than",
 
 export const LOGIC_COMPARISON = Object.freeze({equals_to:"equals_to", not_equals_to:"not_equals_to", and:"and", or:"or"});
 
+export const SYSTEM_FUNCTIONS_CATEGORIES = Object.freeze({math:"math", text:"text", arrangement:"arrangement", conversion:"conversion"});
+
 export class Variable {
 
   constructor (type, name, value, dimensions = 0, is_constant = false, rows = 0, columns = 0) {
@@ -46,6 +48,19 @@ export class Function {
   }
 }
 
+export class SystemFunction {
+
+  constructor (identifier, return_type, return_dimensions, parameters_list, function_comment = null, category) {
+    this.type = COMMAND_TYPES.function;
+    this.identifier = identifier;
+    this.return_type = return_type;
+    this.return_dimensions = return_dimensions;
+    this.parameters_list = parameters_list;
+    this.function_comment = function_comment;
+    this.category = category;
+  }
+}
+
 export class Comment {
   
   constructor (comment_text) {