From ccdcc43431060f7f9d25229764787d5c063a425e Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Thu, 8 Mar 2018 16:20:07 +0100 Subject: [PATCH] Display hints in editor frontend --- app/assets/javascripts/editor/editor.js.erb | 27 ++++++++++++++++++- .../javascripts/editor/execution.js.erb | 3 ++- app/assets/stylesheets/editor.css.scss | 21 +++++++++++++++ app/controllers/submissions_controller.rb | 2 +- app/views/exercises/_editor_output.html.slim | 5 +++- config/locales/de.yml | 2 ++ config/locales/en.yml | 2 ++ 7 files changed, 58 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb index f6ff6887..e16d37a7 100644 --- a/app/assets/javascripts/editor/editor.js.erb +++ b/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 '\ +
  • \ +
    \ + ' + description + '\ +
    \ +
    \ + ' + hint + '\ +
    \ +
    • \ + ' + }; + 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(); } -}; \ No newline at end of file +}; diff --git a/app/assets/javascripts/editor/execution.js.erb b/app/assets/javascripts/editor/execution.js.erb index 37c53cb0..0d2015e4 100644 --- a/app/assets/javascripts/editor/execution.js.erb +++ b/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(); } -}; \ No newline at end of file +}; diff --git a/app/assets/stylesheets/editor.css.scss b/app/assets/stylesheets/editor.css.scss index a38157b4..d98868eb 100644 --- a/app/assets/stylesheets/editor.css.scss +++ b/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 {} + } + } +} diff --git a/app/controllers/submissions_controller.rb b/app/controllers/submissions_controller.rb index 009e93b7..4f1bb49f 100644 --- a/app/controllers/submissions_controller.rb +++ b/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) diff --git a/app/views/exercises/_editor_output.html.slim b/app/views/exercises/_editor_output.html.slim index 4b255d5a..36401d30 100644 --- a/app/views/exercises/_editor_output.html.slim +++ b/app/views/exercises/_editor_output.html.slim @@ -47,9 +47,12 @@ 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] #flowrHint.panel.panel-info data-url=CodeOcean::Config.new(:code_ocean).read[:flowr][:url] role='tab' .panel-heading = 'Gain more insights here' - .panel-body \ No newline at end of file + .panel-body diff --git a/config/locales/de.yml b/config/locales/de.yml index 4eac60b8..fcf5f632 100644 --- a/config/locales/de.yml +++ b/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 diff --git a/config/locales/en.yml b/config/locales/en.yml index 999a644c..90544a34 100644 --- a/config/locales/en.yml +++ b/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