diff --git a/app/assets/javascripts/channels/synchronized_editor_channel.js b/app/assets/javascripts/channels/synchronized_editor_channel.js index 2cfdd13c..ab3ffa87 100644 --- a/app/assets/javascripts/channels/synchronized_editor_channel.js +++ b/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 diff --git a/app/assets/javascripts/programming_groups.js b/app/assets/javascripts/programming_groups.js new file mode 100644 index 00000000..8b9d2cba --- /dev/null +++ b/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(); + } + } +}); diff --git a/app/views/exercises/implement.html.slim b/app/views/exercises/implement.html.slim index 584fe8c5..22c86743 100644 --- a/app/views/exercises/implement.html.slim +++ b/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')) diff --git a/app/views/programming_groups/_info_pair_programming.html.slim b/app/views/programming_groups/_info_pair_programming.html.slim new file mode 100644 index 00000000..eb7b9332 --- /dev/null +++ b/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') diff --git a/app/views/programming_groups/new.html.slim b/app/views/programming_groups/new.html.slim index 7a14c407..3704d5be 100644 --- a/app/views/programming_groups/new.html.slim +++ b/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')) diff --git a/config/locales/de.yml b/config/locales/de.yml index 6a8d5bb2..a00d98a0 100644 --- a/config/locales/de.yml +++ b/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 hier aufschreiben. Vielen Dank! + pair_programming_feedback: "Falls dir Probleme bei der Zusammenarbeit auffallen, kannst du diese gerne hier aufschreiben. 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 abwechselnd zwei verschiedene Rollen: Den Driver, der den Code schreibt und sich auf die Details fokussiert und den Navigator, 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. Klicke hier, um die Aufgabe im Einzelmodus zu starten." external_users: statistics: diff --git a/config/locales/en.yml b/config/locales/en.yml index d3469ced..ce384137 100644 --- a/config/locales/en.yml +++ b/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 write them down here. Thanks a lot! + pair_programming_feedback: "If you notice any errors with the pair programming feature, feel free to write them down here. 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 Driver, responsible for writing the code and focusing on the details, and the Navigator, 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. Click here to get to the exercise in single mode." external_users: statistics: