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'],

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() {

app/assets/stylesheets/editor.css.scss

@@ -193,3 +193,24 @@ button i.fa-spin {
 .enforce-bottom-margin {
   margin-bottom: 5px !important;
 }
+
+#error-hints {
+  display: none;
+  background-color: #FAFAFA;
+
+  .heading {
+    font-weight: bold;
+    font-size: larger;
+  }
+
+  ul.body {
+
+    li.hint {
+      .description {
+        font-style: italic;
+      }
+
+      .hint {}
+    }
+  }
+}

app/controllers/submissions_controller.rb

@@ -198,7 +198,7 @@ class SubmissionsController < ApplicationController
   def kill_socket(tubesock)
     # search for errors and save them as StructuredError (for scoring runs see submission_scoring.rb)
     extract_errors.each do | error |
-      tubesock.send_data JSON.dump({cmd: 'hint', hint: error.hint})
+      tubesock.send_data JSON.dump({cmd: 'hint', hint: error.hint, description: error.error_template.description})
     end
 
     # save the output of this "run" as a "testrun" (scoring runs are saved in submission_scoring.rb)

app/views/exercises/_editor_output.html.slim

@@ -47,6 +47,9 @@ div id='output_sidebar_uncollapsed' class='hidden col-sm-12 enforce-bottom-margi
       input#prompt-input.form-control type='text'
       span.input-group-btn
         button#prompt-submit.btn.btn-primary type="button" = t('exercises.editor.send')
+    #error-hints
+      .heading = t('exercises.implement.error_hints.heading')
+      ul.body
     #output
       pre = t('exercises.implement.no_output_yet')
     - if CodeOcean::Config.new(:code_ocean).read[:flowr][:enabled]

config/locales/de.yml

@@ -327,6 +327,8 @@ de:
       break_intervention:
         title: "Pause"
         text: "Uns ist aufgefallen, dass du schon lange an dieser Aufgabe arbeitest. Möchtest du vielleicht später weiter machen um erstmal auf neue Gedanken zu kommen?"
+      error_hints:
+        heading: "Hinweise"
     index:
       clone: Duplizieren
       implement: Implementieren

config/locales/en.yml

@@ -327,6 +327,8 @@ en:
       break_intervention:
         title: "Break"
         text: "We recognized that you are already working quite a while on this exercise. We would like to encourage you to take a break and come back later."
+      error_hints:
+        heading: "Hints"
     index:
       clone: Duplicate
       implement: Implement