Finished improves in teacher area

css/ivprog-visual-1.0.css

@@ -1023,4 +1023,35 @@ div.ui.checkbox.transition.visible {
 }
 .table_buttons .right_align {
 	text-align: right;
+}
+.text_area_output, .text_area_input {
+	width: 80%;
+}
+.tabular .item {
+	font-size: 1.1em;
+}
+.tabular.menu {
+	margin-top: 1em !important;
+}
+.ui.bottom.attached.tab.segment, .tabular.menu {
+	margin-left: 1em !important;
+	margin-right: 1em !important;
+}
+
+.ui.blue.table thead tr:first-child > th {
+     position: sticky !important;
+     top: 0;
+     z-index: 2;
+}
+
+.ui.bottom.attached.tab.segment.tab_algorithm {
+	height: 90%;
+}
+
+.ui.segment.settings_topic h3 {
+	margin-bottom: 20px;
+}
+
+.settings_topic .content_segment_settings {
+	margin-left: 40px;
 }

js/iassign-integration-functions.js

@@ -403,19 +403,16 @@ function prepareActivityCreation () {
 
   var menuTab = $('<div class="ui top attached tabular menu">'
         + '<a class="item active" data-tab="testcases">' + LocalizedStrings.getUI('text_teacher_test_case') + '</a>'
-        + '<a class="item" data-tab="settings">' + LocalizedStrings.getUI('text_teacher_config') + '</a>'
         + '<a class="item" data-tab="algorithm">' + LocalizedStrings.getUI('text_teacher_algorithm') + '</a>'
+        + '<a class="item" data-tab="settings">' + LocalizedStrings.getUI('text_teacher_config') + '</a>'
         + '</div>'
         + '<div class="ui bottom attached tab segment active tab_test_cases" data-tab="testcases"></div>'
-        + '<div class="ui bottom attached tab segment tab_settings" data-tab="settings"></div>'
-        + '<div class="ui bottom attached tab segment tab_algorithm" data-tab="algorithm"></div>');
+        + '<div class="ui bottom attached tab segment tab_algorithm" data-tab="algorithm"></div>'
+        + '<div class="ui bottom attached tab segment tab_settings" data-tab="settings"></div>');
 
   menuTab.insertBefore('.add_accordion');
   $('.tabular.menu .item').tab();
-
-  $('.default_visual_title').toggle();
-  $('.default_visual_title').append('<span>'+LocalizedStrings.getUI('text_teacher_algorithm')+'</span>');
-  $('.height_100').removeClass('height_100');
+  
   $('.main_title').remove();
   $('.ui.accordion').addClass('styled');
   
@@ -490,11 +487,36 @@ function generateOutputs () {
 }
 
 function outputGenerated (test_cases) {
-  console.log(test_cases);
   var fields = $('.text_area_output');
-  for (var i = 0; i < test_cases.length; i++) {
-    $(fields[i]).val(test_cases[i].output);
+  /*for (var i = 0; i < test_cases.length; i++) {
+    $(fields[i]).val('');
+    for (var j = 0; j < test_cases[i].output.length; j++) {
+      $(fields[i]).val($(fields[i]).val() + test_cases[i].output[j]);
+      if (j < test_cases[i].output.length - 1) {
+        $(fields[i]).val($(fields[i]).val() + '\n');
+      }
+    }
+    $(fields[i]).attr('rows', test_cases[i].output.length);
+  }*/
+  animateOutput(fields, test_cases, 0);
+
+  
+}
+
+function animateOutput (list, test_cases, index) {
+  if (list.length == index) return;
+  $(list[index]).val('');
+  for (var j = 0; j < test_cases[index].output.length; j++) {
+    $(list[index]).val($(list[index]).val() + test_cases[index].output[j]);
+    if (j < test_cases[index].output.length - 1) {
+      $(list[index]).val($(list[index]).val() + '\n');
+    }
   }
+  $(list[index]).attr('rows', test_cases[index].output.length);
+
+  $(list[index]).effect('highlight', null, 50, function() {
+    animateOutput(list, test_cases, index + 1);
+  });
 }
 
 var hist = false;
@@ -569,23 +591,23 @@ function updateTestCaseCounter () {
 
 function prepareTableSettings (div_el) {
 
-  div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_config_programming')+'</h4>');
-  div_el.append('<form name="settings_programming_type"><div class="ui stackable five column grid">'
+  div_el.append('<div class="ui segment settings_topic"><h3 class="ui header"><i class="window maximize outline icon"></i><div class="content">'+LocalizedStrings.getUI('text_config_programming')+'</div></h3>'
+    +'<div class="content content_segment_settings"><form name="settings_programming_type"><div class="ui stackable five column grid">'
     +'<div class="column"><div class="ui radio"><input type="radio" name="programming_type" id="programming_textual" value="textual" tabindex="0" class="hidden small"><label for="programming_textual">'+LocalizedStrings.getUI('text_config_programming_textual')+'</label></div></div>'
     +'<div class="column"><div class="ui radio"><input type="radio" name="programming_type" id="programming_visual" value="visual" checked tabindex="0" class="hidden small"><label for="programming_visual">'+LocalizedStrings.getUI('text_config_programming_visual')+'</label></div></div>'
-    +'</div></form>');
+    +'</div></form></div></div>');
 
-  div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_teacher_data_types')+'</h4>');
-  div_el.append('<form name="settings_data_types"><div class="ui stackable five column grid">'
+  div_el.append('<div class="ui segment settings_topic"><h3 class="ui header"><i class="qrcode icon"></i><div class="content">'+LocalizedStrings.getUI('text_teacher_data_types')+'</div></h3>'
+    +'<div class="content content_segment_settings"><form name="settings_data_types"><div class="ui stackable five column grid">'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="integer_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('type_integer')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="real_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('type_real')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="text_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('type_text')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="boolean_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('type_boolean')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="void_data_type" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('type_void')+'</label></div></div>'
-    +'</div></form>');
+    +'</div></form></div></div>');
 
-  div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_teacher_commands')+'</h4>');
-  div_el.append('<form name="settings_commands"><div class="ui stackable three column grid">'
+  div_el.append('<div class="ui segment settings_topic"><h3 class="ui header"><i class="code icon"></i><div class="content">'+LocalizedStrings.getUI('text_teacher_commands')+'</div></h3>'
+    +'<div class="content content_segment_settings"><form name="settings_commands"><div class="ui stackable three column grid">'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_read" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_read_var')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_write" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_write_var')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_comment" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_comment')+'</label></div></div>'
@@ -596,18 +618,18 @@ function prepareTableSettings (div_el) {
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_while" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_whiletrue')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_dowhile" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_dowhiletrue')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="commands_switch" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_switch')+'</label></div></div>'
-    +'</div></form>');
+    +'</div></form></div></div>');
 
-  div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_teacher_functions')+'</h4>');
-  div_el.append('<form name="settings_functions"><div class="ui stackable one column grid">'
+  div_el.append('<div class="ui segment settings_topic"><h3 class="ui header"><i class="terminal icon"></i><div class="content">'+LocalizedStrings.getUI('text_teacher_functions')+'</div></h3>'
+    +'<div class="content content_segment_settings"><form name="settings_functions"><div class="ui stackable one column grid">'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="functions_creation" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_teacher_create_functions')+'</label></div></div>'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="functions_move" checked tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_teacher_create_movement_functions')+'</label></div></div>'
-    +'</div></form>');
+    +'</div></form></div></div>');
 
-  div_el.append('<h4 class="ui header">'+LocalizedStrings.getUI('text_teacher_filter')+'<i class="circular inverted teal question icon"></i></h4>');
-  div_el.append('<form name="settings_filter"><div class="ui stackable one column grid">'
+  div_el.append('<div class="ui segment settings_topic"><h3 class="ui header"><i class="filter icon"></i><div class="content">'+LocalizedStrings.getUI('text_teacher_filter')+'</div><i class="circular inverted teal question icon"></i></h3>'
+    +'<div class="content content_segment_settings"><form name="settings_filter"><div class="ui stackable one column grid">'
     +'<div class="column"><div class="ui checkbox"><input type="checkbox" name="filter_active" tabindex="0" class="hidden small"><label>'+LocalizedStrings.getUI('text_teacher_filter_active')+'</label></div></div>'
-    +'</div></form>');
+    +'</div></form></div></div>');
 
   $('.circular.inverted.teal.question.icon').popup({
     content : LocalizedStrings.getUI("text_teacher_filter_help"),