added Help button to start page

Author: haddadanas

dist/assets/locales/de.json

@@ -38,7 +38,7 @@
     "title": "Über uns",
     "description": "Die Masterclasses sind eintägige Workshops entwickelt vom Netzwerk Teilchenwelt für Schülerinnen und Schüler, um Ihnen einen Überblick in die Welt der Teilchenphysik, Datenanalyse zu geben, sowie erste Einblicke von der Forschung zu ermöglichen. Diese Software basiert auf dem Event-Display-Programm des CMS-Experiments am CERN. Sie wird in den Masterclasses verwendet, um Detektoraufnahmen von Proton-Proton-Kollisionen zu visualisieren. Ziel der Masterclass am Ende ist eine Massenbestimmung des Z- und Higgs-Bosons.",
     "sponsors": "Dieses Event-Display sowie die Masterclasses in Hamburg wurden durch folgende Institutionen ermöglicht:",
-    "github": "Der Quellcode ist auf GitHub verfügbar: ",
+    "github": "Der Quellcode ist auf GitHub verfügbar:",
     "origin": "Diese Software ist eine an Schüler und Schülerinnen angepasste Version des iSpy WebGL Event Displays für das CMS Experiment am CERN. Entwickelt wurde die Originalversion von F. Ali, L. Barnard, M. Hategan, S. Lee, C. Logrén, T. McCauley, P. Nguyen und M. Saunby.",
     "studyTitle": "Physikstudium an der Universität Hamburg",
     "studyText": "Interessierst du dich für ein Physikstudium? Warum nicht an der Universität Hamburg? 5 verschiedene Vertiefungsbereiche, große Vielfalt an Forschungsthemen, sowie das DESY-Forschungscampus in unmittelbarer Nähe. Hier findest du weitere Informationen dazu.",
@@ -54,7 +54,8 @@
     "links": "Nützliche Links und Physikangebote:",
     "start": "Event-Display starten",
     "impressum": "Impressum",
-    "contentresponsible": "Kontakt"  
+    "contentresponsible": "Kontakt",
+    "help": "Hilfe und Anleitung kannst du über diesen Button oder oben rechts aufrufen:"
   },
   "help": {
     "title": "Hilfe",
@@ -134,4 +135,4 @@
     "nSelected": "Gesamtzahl der Ereignisse, die die Auswahl in den geladenen Datei erfüllen.",
     "firstSelected": "Indizes der ersten 5 Ereignisse, die die Auswahl erfüllen"
   }
-}
+}

dist/assets/locales/en.json

@@ -38,7 +38,7 @@
     "title": "About us",
     "description": "The masterclasses are one-day workshops developed by the Netzwerk Teilchenwelt for students, providing an overview of particle physics and data analysis, as well as initial insights into research. This software is based on the event display program of the CMS experiment at CERN. It is used in the masterclasses to visualize detector recordings of proton-proton collisions. The goal of the masterclass is to determine the mass of the Z and Higgs bosons.",
     "sponsors": "This Event-Display as well as the Masterclasses in Hamburg are made possible by the following institutions:",
-    "github": "The source code is available on GitHub: ",
+    "github": "The source code is available on GitHub:",
     "origin": "This software is a version of the iSpy WebGL event display for the CMS experiment at CERN, adapted for students. The original version was developed by F. Ali, L. Barnard, M. Hategan, S. Lee, C. Logrén, T. McCauley, P. Nguyen, and M. Saunby.",
     "studyTitle": "Study physics at the University of Hamburg",
     "studyText": "Are you interested in studying physics? Why not at the University of Hamburg? 5 different specialization fields, a wide variety of research topics, and the DESY research campus in close proximity. Here you can find more information about it.",
@@ -54,7 +54,8 @@
     "links": "Useful links and physics offers:",
     "start": "Start Event Display",
     "impressum": "Legal Notice",
-    "contentresponsible": "Contact"  
+    "contentresponsible": "Contact",
+    "help": "Help and instructions can be accessed via this button or at the top right:"
   },
   "help": {
     "title": "Help",
@@ -134,4 +135,4 @@
     "nSelected": "Total Number of events passing the selection within the loaded file.",
     "firstSelected": "Indices of the first 5 events passing the selection"
   }
-}
+}

index.html

@@ -24,7 +24,7 @@
   <header class="bg-primary" id="js-titlebar"><span id="application-name">Masterclass @ Hamburg</span><span id="js-event-loaded" class="header-event"></span>
     <div class="btn-toolbar header-nav">
       <div class="btn-group btn-group-sm" id="tutorial-view" role="group">
-        <a class="btn btn-info active" role="button" id="js-about-btn"><i class="fas fa-info-circle"></i></a><button class="btn btn-primary" id="js-event-display" type="button"><i class="fas fa-cubes"></i></button><a class="btn btn-info" role="button" id="js-help-btn"><i class="fas fa-question-circle"></i></a>
+        <a class="btn btn-info active" role="button" id="js-about-btn"><i class="fas fa-info-circle"></i></a><button class="btn btn-primary" id="js-event-display" type="button"><i class="fas fa-cubes"></i></button><a class="btn btn-info js-btn-help" role="button" id="js-help-btn"><i class="fas fa-question-circle"></i></a>
       </div>
       <div class="btn-group btn-group-sm" id="tutorial-display" role="group">
         <button class="btn btn-primary display-mode" id="js-display-mode" type="button" title="Toggle Light/Dark Mode"><i class="fas fa-sun"></i><i class="fas fa-moon"></i></button>
@@ -93,9 +93,10 @@ <h1 class="text-info">Masterclasses @ Hamburg</h1>
           <h2 data-i18n="about.title"></h2>
           <p data-i18n="about.description"></p>
           <div id="js-start-event" class="start-btn">
-            <p  data-i18n="about.start"></p>
+            <p data-i18n="about.start"></p>
           </div>
-          <p><span data-i18n="about.github"></span><a class="btn btn-primary" role="button" href="https://github.com/uhh-cms-tutorials/masterclasses" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i>&nbsp;uhh-cms-tutorials/masterclasses</a></p>
+          <p><span data-i18n="about.help"></span>&nbsp;<a class="btn btn-info js-btn-help" role="button"><i class="fas fa-question-circle"></i></a></p>
+          <p><span data-i18n="about.github"></span>&nbsp;<a class="btn btn-primary" role="button" href="https://github.com/uhh-cms-tutorials/masterclasses" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i>&nbsp;uhh-cms-tutorials/masterclasses</a></p>
           <p><span data-i18n="about.sponsors"></span><br><a href="https://www.uni-hamburg.de/" target="_blank" rel="noopener noreferrer"><img src="assets/img/up-uhh-logo-u-2010-u-png.png" loading="lazy" alt="UHH Logo" height="70px" id="uhh-light" title="Universität Hamburg" data-bs-toggle="tooltip"><img src="assets/img/uhh-logo-2010-farbnegativ-rgb.png" loading="lazy" alt="UHH Logo" height="70px" id="uhh-dark" title="Universität Hamburg" data-bs-toggle="tooltip"></a><a href="https://www.desy.de/" target="_blank" rel="noopener noreferrer"><img src="https://pr.desy.de/common/desy_logo_3c_web.svg" loading="lazy" title="Deutsches Elektronen-Synchrotron, Standort Hamburg" alt="DESY Logo" height="70" data-bs-toggle="tooltip"></a><br><span class="img-remark">Logos: (<span data-i18n="about.left"></span>) &copy; UHH (<span data-i18n="about.right"></span>) &copy; DESY</span></p>
 
         </div>

ts/controls.ts

@@ -498,7 +498,7 @@ export function setupControls() {
   const jsCsvWp = getHTMLObject("js-csv-wp");
   const jsCsvWm = getHTMLObject("js-csv-wm");
   const jsAboutBtn = getHTMLObject("js-about-btn");
-  const jsHelpBtn = getHTMLObject("js-help-btn");
+  const jsHelpBtns = document.querySelectorAll<HTMLButtonElement>(".js-btn-help");
   const jsDisplayBtn = getHTMLObject("js-event-display");
   const jsLangEN = getHTMLObject<HTMLSelectElement>("js-lang-en");
   const jsLangDE = getHTMLObject<HTMLSelectElement>("js-lang-de");
@@ -524,7 +524,7 @@ export function setupControls() {
   // connect functions to the buttons
   jsStartBtn.addEventListener("click", () => switchMain("display"));
   jsAboutBtn.addEventListener("click", () => switchMain("about"));
-  jsHelpBtn.addEventListener("click", () => switchMain("help"));
+  jsHelpBtns.forEach(btn => btn.addEventListener("click", () => switchMain("help")));
   jsDisplayBtn.addEventListener("click", () => switchMain("display"));
 
   jsLangEN.addEventListener("click", () => setLanguage("en"));