Display hints in editor frontend

app/assets/javascripts/editor/editor.js.erb

@@ -476,6 +476,7 @@ configureEditors: function () {
     this.clearOutput();
     $('#hint').fadeOut();
     $('#flowrHint').fadeOut();
+    this.clearHints();
     this.showOutputBar();
   },
 
@@ -512,6 +513,30 @@ configureEditors: function () {
     }
   },
 
+  clearHints: function() {
+    var container = $('#error-hints');
+    container.find('ul.body > li.hint').remove();
+    container.fadeOut();
+  },
+
+  showHint: function(message) {
+    var template = function(description, hint) {
+      return '\
+           <li class="hint">\
+             <div class="description">\
+               ' + description + '\
+             </div>\
+             <div class="hint">\
+               ' + hint + '\
+             </div>\
+           </li>\
+         '
+    };
+    var container = $('#error-hints');
+    container.find('ul.body').append(template(message.description, message.hint));
+    container.fadeIn();
+  },
+
   showContainerDepletedMessage: function() {
     $.flash.danger({
       icon: ['fa', 'fa-clock-o'],
@@ -692,4 +717,4 @@ configureEditors: function () {
     // create autosave when the editor is opened the first time
     this.autosave();
   }
-};
+};

app/assets/javascripts/editor/execution.js.erb

@@ -43,6 +43,7 @@ CodeOceanEditorWebsocket = {
     this.websocket.on('exit', this.handleExitCommand.bind(this));
     this.websocket.on('timeout', this.showTimeoutMessage.bind(this));
     this.websocket.on('status', this.showStatus.bind(this));
+    this.websocket.on('hint', this.showHint.bind(this));
   },
 
   handleExitCommand: function() {
@@ -53,4 +54,4 @@ CodeOceanEditorWebsocket = {
     this.cleanUpTurtle();
     this.cleanUpUI();
   }
-};
+};