warn in case of lacking client-side SSE support

app/assets/javascripts/editor.js

@@ -330,6 +330,10 @@ $(function() {
     return isActiveFileExecutable() && ['teacher_defined_test', 'user_defined_test'].includes(active_frame.data('role'));
   };
 
+  var isBrowserSupported = function() {
+    return window.EventSource !== undefined;
+  };
+
   var populatePanel = function(panel, result, index) {
     panel.removeClass('panel-default').addClass(getPanelClass(result));
     panel.find('.panel-title .filename').text(result.filename);
@@ -631,13 +635,18 @@ $(function() {
   };
 
   if ($('#editor').isPresent()) {
-    configureEditors();
+    if (isBrowserSupported()) {
-    initializeEditors();
+      $('.score, #development-environment').show();
-    initializeEventHandlers();
+      configureEditors();
-    initializeFileTree();
+      initializeEditors();
-    initializeTooltips();
+      initializeEventHandlers();
-    renderScore();
+      initializeFileTree();
-    showFirstFile();
+      initializeTooltips();
-    showRequestedTab();
+      renderScore();
+      showFirstFile();
+      showRequestedTab();
+    } else {
+      $('#alert').show();
+    }
   }
 });

app/assets/stylesheets/editor.css.scss

@@ -16,6 +16,14 @@ button i.fa-spin {
   }
 }
 
+.score {
+  display: none;
+}
+
+#alert, #development-environment {
+  display: none;
+}
+
 #editor-buttons {
   background-color: #008CBA;
   margin-top: 1em;

app/views/exercises/implement.html.slim

@@ -4,65 +4,70 @@ span.badge.pull-right.score
 
 p.lead = @exercise.description
 
-ul.nav.nav-justified.nav-tabs role='tablist'
+#alert.alert.alert-danger role='alert'
-  li.active
+  h4 = t('.alert.title')
-    a data-placement='top' data-toggle='tab' data-tooltip=true href='#instructions' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 1')
+  p = t('.alert.text', application_name: application_name)
-      i.fa.fa-question
-      = t('activerecord.attributes.exercise.instructions')
-  li
-    a data-placement='top' data-toggle='tab' data-tooltip=true href='#workspace' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 2')
-      i.fa.fa-code
-      = t('.workspace')
-  li
-    a data-placement='top' data-toggle='tab' data-tooltip=true href='#outputInformation' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 3')
-      i.fa.fa-terminal
-      = t('.output')
-  li
-    a data-placement='top' data-toggle='tab' data-tooltip=true href='#progress' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 4')
-      i.fa.fa-line-chart
-      = t('.progress')
 
-hr
+#development-environment
-
+  ul.nav.nav-justified.nav-tabs role='tablist'
-.tab-content
+    li.active
-  #instructions.tab-pane.active
+      a data-placement='top' data-toggle='tab' data-tooltip=true href='#instructions' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 1')
-    p = render_markdown(@exercise.instructions)
+        i.fa.fa-question
-    br
+        = t('activerecord.attributes.exercise.instructions')
-    p.text-center
+    li
-      a#start.btn.btn-lg.btn-success
+      a data-placement='top' data-toggle='tab' data-tooltip=true href='#workspace' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 2')
         i.fa.fa-code
-        = t('.start')
+        = t('.workspace')
-  #workspace.tab-pane = render('editor', exercise: @exercise, files: @files, submission: @submission)
+    li
-  #outputInformation.tab-pane data-message-no-output=t('.no_output')
+      a data-placement='top' data-toggle='tab' data-tooltip=true href='#outputInformation' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 3')
-    #hint
+        i.fa.fa-terminal
-      .panel.panel-warning
+        = t('.output')
-        .panel-heading = t('.hint')
+    li
-        .panel-body
+      a data-placement='top' data-toggle='tab' data-tooltip=true href='#progress' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 4')
-    #output
+        i.fa.fa-line-chart
-      pre = t('.no_output_yet')
+        = t('.progress')
-    - 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'
+  hr
-        .panel-heading = 'Gain more insights here'
+
-        .panel-body
+  .tab-content
-  #progress.tab-pane
+    #instructions.tab-pane.active
-    #results
+      p = render_markdown(@exercise.instructions)
-      h2 = t('.results')
+      br
-      p.test-count == t('.test_count', count: 0)
+      p.text-center
-      ul.list-unstyled
+        a#start.btn.btn-lg.btn-success
-      ul#dummies.hidden.list-unstyled
+          i.fa.fa-code
-        li.panel.panel-default
+          = t('.start')
-          .panel-heading
+    #workspace.tab-pane = render('editor', exercise: @exercise, files: @files, submission: @submission)
-            h3.panel-title == t('.file', filename: '', number: 0)
+    #outputInformation.tab-pane data-message-no-output=t('.no_output')
+      #hint
+        .panel.panel-warning
+          .panel-heading = t('.hint')
           .panel-body
-            = row(label: '.passed_tests', value: t('shared.out_of', maximum_value: 0, value: 0).html_safe)
+      #output
-            = row(label: 'activerecord.attributes.submission.score', value: t('shared.out_of', maximum_value: 0, value: 0).html_safe)
+        pre = t('.no_output_yet')
-            = row(label: '.feedback')
+      - if CodeOcean::Config.new(:code_ocean).read[:flowr][:enabled]
-            = row(label: '.output', value: link_to(t('shared.show'), '#'))
+        #flowrHint.panel.panel-info data-url=CodeOcean::Config.new(:code_ocean).read[:flowr][:url] role='tab'
-    #score data-maximum-score=@exercise.maximum_score data-score=@submission.try(:score)
+          .panel-heading = 'Gain more insights here'
-      h4
+          .panel-body
-        span == "#{t('activerecord.attributes.submission.score')}: "
+    #progress.tab-pane
-        span.score
+      #results
-      .progress
+        h2 = t('.results')
-        .progress-bar role='progressbar'
+        p.test-count == t('.test_count', count: 0)
-    br
+        ul.list-unstyled
-    p.text-center = render('editor_button', classes: 'btn-lg btn-success', data: {:'data-message-confirm' => t('exercises.editor.confirm_submit'), :'data-url' => submit_exercise_path(@exercise)}, icon: 'fa fa-send', id: 'submit', label: t('exercises.editor.submit'))
+        ul#dummies.hidden.list-unstyled
+          li.panel.panel-default
+            .panel-heading
+              h3.panel-title == t('.file', filename: '', number: 0)
+            .panel-body
+              = row(label: '.passed_tests', value: t('shared.out_of', maximum_value: 0, value: 0).html_safe)
+              = row(label: 'activerecord.attributes.submission.score', value: t('shared.out_of', maximum_value: 0, value: 0).html_safe)
+              = row(label: '.feedback')
+              = row(label: '.output', value: link_to(t('shared.show'), '#'))
+      #score data-maximum-score=@exercise.maximum_score data-score=@submission.try(:score)
+        h4
+          span == "#{t('activerecord.attributes.submission.score')}: "
+          span.score
+        .progress
+          .progress-bar role='progressbar'
+      br
+      p.text-center = render('editor_button', classes: 'btn-lg btn-success', data: {:'data-message-confirm' => t('exercises.editor.confirm_submit'), :'data-url' => submit_exercise_path(@exercise)}, icon: 'fa fa-send', id: 'submit', label: t('exercises.editor.submit'))

config/locales/de.yml

@@ -188,6 +188,9 @@ de:
     form:
       add_file: Datei hinzufügen
     implement:
+      alert:
+        text: 'Ihr Browser unterstützt nicht alle Funktionalitäten, die %{application_name} benötigt. Bitte nutzen Sie einen modernen Browser, um %{application_name} zu besuchen.'
+        title: Ihr Browser wird nicht unterstützt!
       default_feedback: Sehr gut. Alle Tests waren erfolgreich.
       feedback: Feedback
       file: 'Test-Datei <span class="number">%{number}</span> (<span class="filename">%{filename}</span>)'

config/locales/en.yml

@@ -188,6 +188,9 @@ en:
     form:
       add_file: Add file
     implement:
+      alert:
+        text: 'Your browser does not support features required for using %{application_name}. Please access %{application_name} using a modern browser.'
+        title: Your browser is not supported!
       default_feedback: Well done. All tests have been passed.
       feedback: Feedback
       file: 'Test File <span class="number">%{number}</span> (<span class="filename">%{filename}</span>)'