Fix typo, update README, and enhance tutorial clarity

dist/assets/locales/de_guide.json

@@ -51,7 +51,10 @@
     "py": "# Verwenden von Python HTTP-Server",
     "node": "# Verwenden von Node.js http-server",
     "node-install": "# Installieren des http-servers packets (nur einmalig erforderlich)",
-    "node-run": "# Starten des http-servers"
+    "node-run": "# Starten des http-servers",
+    "plotting": "Visualisierung der Ergebnisse",
+    "plotting1": "Nach dem Sammeln der Analyseergebnisse der Schüler (über eine lokale Cloud-Lösung, einen USB-Stick usw.) wird ein Python-Skript bereitgestellt, um die Massverteilung der kategorisierten Ereignisse zu plotten. Das Skript ist verfügbar unter <a href=\"https://github.com/uhh-cms-tutorials/masterclasses/tree/stable/scripts\" target=\"_blank\">Skripte @ GitHub/Masterclasses</a>",
+    "plotting2": "Zum Ausführen des Skripts wird eine funktionierende Python-Installation benötigt. Anweisungen zur Nutzung des Skripts finden Sie in der beigefügten README-Datei"
   },
   "dev": {
     "title": "Entwicklerhandbuch",

dist/assets/locales/en_guide.json

@@ -52,7 +52,10 @@
     "py": "# Using Python HTTP server",
     "node": "# Using Node.js http-server",
     "node-install": "# Install the http-server package (only required once)",
-    "node-run": "# Start the http-server"
+    "node-run": "# Start the http-server",
+    "plotting": "Visualising the Results",
+    "plotting1": "After collecting the analysis results of the students (via a local cloud solution, a USB stick, etc.) a python script is provided for plotting the mass distribution of the categorised events. The script can be found on <a href=\"https://github.com/uhh-cms-tutorials/masterclasses/tree/stable/scripts\" target=\"_blank\">Scripts @ GitHub/Masterclasses</a>",
+    "plotting2": "For running the script, a working python installation is needed. For instructions on using the script please refer to the included README file"
   },
   "dev": {
     "title": "Developer Guide",

index.html

@@ -305,6 +305,9 @@ <h3 data-i18n="teacher.access"></h3>
           <p data-i18n="teacher.access1"></p>
           <p data-i18n="teacher.access2"></p>
           <p data-i18n="teacher.access3"></p>
+          <h3 data-i18n="teacher.plotting"></h3>
+          <p data-i18n="teacher.plotting1"></p>
+          <p data-i18n="teacher.plotting2"></p>
         </div>
         <div class="guide-container" id="js-dev-guide-container">
           <h1 class="mb-4" data-i18n="dev.title"></h1>

ts/setup.ts

@@ -499,24 +499,25 @@ function initControlPanel() {
  * Creates a checkbox container for a given GUI controller.
  * @param cont The GUI controller to create the checkbox container for.
  */
-function createCheckboxContainer(cont: Controller) {
+function createCheckboxContainer(cont: Controller, is_active: boolean = false) {
   const selectionField = cont as unknown as SelectionFieldController;
 
   // Create a checkbox element
   const checkbox = document.createElement("input");
   checkbox.type = "checkbox";
   checkbox.classList.add("sel-checkbox");
   checkbox.name = `enable-${selectionField.property}`;
-  selectionField.checkbox = false;
+  checkbox.checked = is_active;
+  selectionField.checkbox = is_active;
 
   // Add the checkbox to the DOM
   selectionField.domElement.insertBefore(checkbox, selectionField.$name);
 
   // get input field and disable the input field initially
   const inputField = selectionField.$input;
   inputField.classList.add("sel-field");
-  inputField.disabled = true;
-  inputField.value = "";
+  inputField.disabled = !is_active;
+  inputField.value = is_active ? selectionField.initialValue : "";
 
   checkbox.addEventListener("change", function () {
     inputField.disabled = !this.checked;
@@ -621,8 +622,11 @@ function initSelectionFields() {
     cont.onFinishChange(function (this: SelectionFieldController, value: number) {
       if (value < 0) this.setValue(0);
     });
-    if (["selMuons", "selElectrons", "selPhotons", "maxMETs"].includes(key)) {
-      createCheckboxContainer(cont);
+    if (["selMuons", "selElectrons"].includes(key)) {
+      createCheckboxContainer(cont, true);
+    }
+    if (["selPhotons", "maxMETs"].includes(key)) {
+      createCheckboxContainer(cont, false);
     }
     if (key === "minptvis") {
       cont.onFinishChange(function (this: SelectionFieldController, value: number) {

ts/tutorial-config.ts

@@ -93,7 +93,7 @@ const enStepTexts: { [key in keyTypes]: { [key: string]: [string, string] } } =
     ],
   },
   analysis: {
-    wilcome: [
+    welcome: [
       "Analysis Tutorial",
       "Now we want to find the Higgs boson. For this an automated event selection is used. Again we load an example event first.",
     ],
@@ -531,8 +531,8 @@ const availableTutorials = {
     return [
       {
         popover: {
-          title: langMap["wilcome"][0],
-          description: langMap["wilcome"][1],
+          title: langMap["welcome"][0],
+          description: langMap["welcome"][1],
           onNextClick: (_el, _step, opts: { driver: Driver }) => {
             selectFile("./data/Hto4l_120-130GeV.ig")
               .then(() => {