Add info modal for pair programming

app/assets/javascripts/channels/synchronized_editor_channel.js

@@ -17,10 +17,9 @@ $(document).on('turbolinks:load', function () {
 
     const editor = $('#editor');
     const exercise_id = editor.data('exercise-id');
-    const current_contributor_id = editor.data('contributor-id');
     const session_id = generateUUID();
 
-    if ($.isController('exercises') && current_user.id !== current_contributor_id) {
+    if ($.isController('exercises') && is_other_user(current_contributor)) {
 
       App.synchronized_editor = App.cable.subscriptions.create({
         channel: "SynchronizedEditorChannel", exercise_id: exercise_id

app/assets/javascripts/programming_groups.js

@@ -0,0 +1,25 @@
+var ProgrammingGroups = {
+    getStoredViewedPPInfo: function () {
+        return localStorage.getItem('viewed_pp_info')
+    },
+
+    setStoredViewedPPInfo: function () {
+        localStorage.setItem('viewed_pp_info', 'true')
+    },
+
+
+    initializeEventHandler: function () {
+        $('#dont_show_info_pp_modal_again').on('click', this.setStoredViewedPPInfo.bind(this));
+    }
+};
+
+$(document).on('turbolinks:load', function () {
+    const modal = $('#modal-info-pair-programming');
+    if (modal.isPresent()) {
+        ProgrammingGroups.initializeEventHandler();
+
+        if (ProgrammingGroups.getStoredViewedPPInfo() !== 'true' && !_.isEqual(current_user, current_contributor)) {
+            new bootstrap.Modal(modal).show();
+        }
+    }
+});

app/views/exercises/implement.html.slim

@@ -17,6 +17,11 @@
           div.small.text-body-tertiary.mt-1
             == t('exercises.implement.external_privacy_policy', url:'https://www.tu-ilmenau.de/datenschutz')
 
+          button.btn.btn-sm.btn-secondary.me-3.mt-1 data-bs-toggle= 'modal' data-bs-target= '#modal-info-pair-programming'
+            i.fa-solid.fa-circle-info
+            = t('programming_groups.new.pair_programming_info')
+
+
       h1 id="exercise-headline"
         i id="description-symbol" class=(@embed_options[:collapse_exercise_description] ? 'fa-solid fa-chevron-right' : 'fa-solid fa-chevron-down')
         = @exercise.title
@@ -36,3 +41,4 @@
 
 
   = render('editor', exercise: @exercise, files: @files, submission: @submission)
+  = render('shared/modal', classes: 'modal-lg', id: 'modal-info-pair-programming', template: 'programming_groups/_info_pair_programming', title: t('programming_groups.new.pair_programming_info'))

app/views/programming_groups/_info_pair_programming.html.slim

@@ -0,0 +1,9 @@
+= render_markdown(t('programming_groups.new.info_pair_programming'))
+= render_markdown(t('programming_groups.new.info_study'))
+== t('exercises.implement.pair_programming_feedback', url: 'https://etherpad.xopic.de/p/openHPI_PairProgrammingFeedback')
+
+- content_for :modal_footer do
+  button.btn.btn-secondary#dont_show_info_pp_modal_again data-bs-dismiss='modal'
+    = t('programming_groups.new.dont_show_modal_again')
+  button.btn.btn-primary data-bs-dismiss='modal'
+    = t('programming_groups.new.close')

app/views/programming_groups/new.html.slim

@@ -5,7 +5,12 @@ h1 = t('programming_groups.new.create_programming_pair')
       => t('programming_groups.new.own_user_id')
       b
         = current_user.id_with_type
-    p
+
+    button.btn.btn-success data-bs-toggle= 'modal' data-bs-target= '#modal-info-pair-programming'
+      i.fa-solid.fa-circle-info
+      = t('programming_groups.new.pair_programming_info')
+
+    p.mt-4
       = t('programming_groups.new.enter_partner_id', exercise_title: @exercise.title)
     = render('form')
 
@@ -20,3 +25,5 @@ h1 = t('programming_groups.new.create_programming_pair')
     p
       = t('programming_groups.new.find_partner_description')
     iframe name="embed_readwrite" src="https://etherpad.xopic.de/p/find_programming_group_for_exercise_#{@exercise.id}?showControls=true&showChat=true&showLineNumbers=true&useMonospaceFont=false" width="100%" height="300" style='border: 1px solid black;'
+
+= render('shared/modal', classes: 'modal-lg', id: 'modal-info-pair-programming', template: 'programming_groups/_info_pair_programming', title: t('programming_groups.new.pair_programming_info'))

config/locales/de.yml

@@ -490,7 +490,7 @@ de:
       exit_failure: Die letzte Code-Ausführung wurde mit einem Fehler beendet (Statuscode %{exit_code}).
       no_output_yet: Bisher existiert noch keine Ausgabe.
       output: Programm-Ausgabe
-      pair_programming_feedback: Falls dir Probleme bei der Zusammenarbeit auffallen, kannst du diese gerne <a target='_blank', href=%{url}>hier aufschreiben</a>. Vielen Dank!
+      pair_programming_feedback: "Falls dir Probleme bei der Zusammenarbeit auffallen, kannst du diese gerne <a target='_blank', style='display: contents;' href=%{url}>hier aufschreiben</a>. Vielen Dank!"
       passed_tests: Erfolgreiche Tests
       code_rating: Code-Stil
       progress: Fortschritt
@@ -596,12 +596,17 @@ de:
       hints:
         programming_partner_ids: "Sie können mehrere Nutzer-IDs mit Kommata getrennt eingeben, wie z.B.: 'e123, e234'."
     new:
+      close: Schließen
       create_programming_pair: Programmierpaar erstellen
       check_invitation: "Einladung prüfen"
+      dont_show_modal_again: "Auf diesem Gerät nicht mehr anzeigen"
       enter_partner_id: "Bitte gib hier die Nutzer-ID der Person ein, mit der du zusammen die Aufgabe '%{exercise_title}' lösen möchtest. Beachte jedoch, dass anschließend keiner die Zusammenarbeit beenden kann. Dein:e Teampartner:in kann sehen, was du in dieser Aufgabe schreibst und umgekehrt. Für die nächste Aufgabe kannst du dich erneuert entscheiden, ob und mit wem du zusammen arbeiten möchtest."
       find_partner_title: "Finde eine:n Programmierpartner:in für die Aufgabe"
       find_partner_description: "Kopiere eine andere Nutzer-ID aus der Liste unten und lösche sie anschließend. Wenn noch keine Nutzer-IDs in der Liste vorhanden sind, füge deine Nutzer-ID hinzu und warte, bis ein andere:r Nutzer:in ein Programmierpaar mit dir erstellt. Dies kannst du mit dem Knopf 'Einladung prüfen' testen. Wenn du allein arbeiten möchtest, lösche bitte deine Nutzer-ID aus der Liste, falls du sie hinzugefügt hast."
+      info_pair_programming: "Pair Programming (Programmieren in Paaren) ist eine Methode, bei der zwei Personen gemeinsam programmieren. Dabei übernehmen sie <i>abwechselnd</i> zwei verschiedene Rollen:  Den <i>Driver</i>, der den Code schreibt und sich auf die Details fokussiert und den <i>Navigator</i>, der Tippfehler korrigiert, die Aufgabenstellung im Blick behält und Verbesserungsideen vorschlägt. Kommunikation miteinander ist von entscheidender Bedeutung für erfolgreiches Pair Programming."
+      info_study: "Im Rahmen meiner Masterarbeit möchte ich das Anwenden von Pair Programming in diesem MOOC analysieren. Ich würde mich daher sehr darüber freuen, wenn ihr gemeinsam mit einer anderen Person die Aufgaben bearbeitet und mir anschließend euer Feedback in den Umfragen mitteilt. Bitte beachtet, dass es sich bei dieser Funktion um eine Beta-Version handelt, die bisher noch nicht für alle Nutzer:innen freigeschaltet wurde."
       own_user_id: "Deine Nutzer-ID:"
+      pair_programming_info: Pair Programming Info
       work_alone: "Du kannst dich einmalig dafür entscheiden, die Aufgabe alleine zu bearbeiten. Anschließend kannst du jedoch nicht mehr in die Partnerarbeit für diese Aufgabe wechseln. <a href=%{path}>Klicke hier, um die Aufgabe im Einzelmodus zu starten.</a>"
   external_users:
     statistics:

config/locales/en.yml

@@ -490,7 +490,7 @@ en:
       exit_failure: The last code run exited with a failure (status code %{exit_code}).
       no_output_yet: There is no output yet.
       output: Program Output
-      pair_programming_feedback: If you notice any errors with the pair programming feature, feel free to <a target='_blank', href=%{url}>write them down here</a>. Thanks a lot!
+      pair_programming_feedback: "If you notice any errors with the pair programming feature, feel free to <a target='_blank', style='display: contents;' href=%{url}>write them down here</a>. Thanks a lot!"
       passed_tests: Passed Tests
       code_rating: Code Rating
       progress: Progress
@@ -596,12 +596,17 @@ en:
       hints:
         programming_partner_ids: "You can enter several user IDs separated by commas such as 'e123, e234'."
     new:
+      close: Close
       create_programming_pair: Create Programming Pair
       check_invitation: "Check invitation"
+      dont_show_modal_again: "Don't display on this device anymore"
       enter_partner_id: "Please enter the user ID from the practice partner with whom you want to solve the exercise '%{exercise_title}'. However, note that no one can leave the pair afterward. Hence, your team partner can see what you write in this exercise and vice versa. For the next exercise, you can decide again whether and with whom you want to work together."
       find_partner_title: "Find a programming partner for the exercise"
       find_partner_description: "Copy another user ID from the list below and delete it afterward. If there are no user IDs on the list yet, add your user ID and wait for another user to create a programming group with you. You can test this with the 'Check invitation' button. If you decide to work alone, please delete your user ID from the list if you added it before."
+      info_pair_programming: "Pair Programming is a method where two people program together. They alternate between two distinct roles: the <i>Driver</i>, responsible for writing the code and focusing on the details, and the <i>Navigator</i>, tasked with correcting typos, overseeing the task's progress, and offering suggestions for improvement. Effective communication in the pair is crucial for the success of pair programming."
+      info_study: "As part of my master's thesis, I would like to analyze the use of pair programming in this MOOC. Therefore, I would be very happy if you work on the exercises together with another person and then give me your feedback in the surveys. Please note that this feature is a beta version that has not yet been activated for all users."
       own_user_id: "Your user ID:"
+      pair_programming_info: Pair Programming Info
       work_alone: "You can choose once to work on the exercise alone. Afterward, however, you will not be able to switch to work in a pair for this exercise. <a href=%{path}>Click here to get to the exercise in single mode.</a>"
   external_users:
     statistics: