planet: auto embed H5P activities into the pages

11 files changed, 80 insertions, 14 deletions

diff --git a/Info/9/3/Planet/Makefile b/Info/9/3/Planet/Makefile
index d4b77b40..be920b35 100644
--- a/Info/9/3/Planet/Makefile
+++ b/Info/9/3/Planet/Makefile
@@ -1,3 +1,8 @@
+# The full path to the Makefile
+MAKEFILE_PATH = $(abspath $(lastword $(MAKEFILE_LIST)))
+# The path to the directory of the Makefile
+MAKEFILE_DIR = $(dir $(MAKEFILE_PATH))
+
 PRINTOUT=modellierung/landung/modellierung.pdf \
          modellierung/zwischenlager/methoden-testen.pdf \
          modellierung/zwischenlager/methoden-schreiben.pdf \
@@ -30,8 +35,8 @@ PANDOC=pandoc $(COMMON_PANDOC_OPTIONS)
 
 all: $(PLOTS) $(SRC:.md=.html) $(PRINTOUT) slides.pdf slides.pptx glossar.xml
 
-%.html: %.md planet-mebis-page-template.html
-	$(PANDOC) --template planet-mebis-page-template.html --resource-path="$(@D):." $< > $@
+%.html: %.md templates/planet-mebis-page-template.html
+	$(PANDOC) --data-dir=$(MAKEFILE_DIR) --template=templates/planet-mebis-page-template.html --resource-path="$(@D):." $< > $@
 
 %.pdf: %.html
 	chromium --headless --disable-gpu --print-to-pdf="$@" --generate-pdf-document-outline --no-pdf-header-footer $<
@@ -59,5 +64,5 @@ slides.pdf: slides.md
 slides.pptx: slides.pdf
 	$(MAKE) -f Makefile.slides slides.pptx
 
-glossar.xml: glossar.yml glossar-template.xml
-	echo | pandoc --metadata-file=glossar.yml --template=glossar-template.xml -t html -o $@
+glossar.xml: glossar.yml templates/glossar-template.xml
+	echo | pandoc --metadata-file=glossar.yml --template=templates/glossar-template.xml -t html -o $@
diff --git a/Info/9/3/Planet/Readme.md b/Info/9/3/Planet/Readme.md
index 291f4873..20288334 100644
--- a/Info/9/3/Planet/Readme.md
+++ b/Info/9/3/Planet/Readme.md
@@ -35,7 +35,6 @@ Einige werden automatisch mit dem Abschließen mancher TODO-Aktivitäten vergebe
 
 * Baue einen fertigen Mebis-Kurs aus den Dateien
   https://github.com/aszender/Moodle-Course-Builder
-* Binde die H5P-Aktivitäten in die Seiten ein
 * Badges
   * Weniger militärische Badges
     * Early Birds
@@ -43,7 +42,7 @@ Einige werden automatisch mit dem Abschließen mancher TODO-Aktivitäten vergebe
   * Reduziere die Materialien mit unklaren Lizenzbestimmungen
 * Didaktische Reduktion des Codes im Online-IDE Projekt
 * Wiederholung vor den Kontroll-Strukturen
-* Erklärung warum eine graphische Repräsentation (Struktogramme) nützlich sind
+* Erklärung warum graphische Repräsentation (Struktogramme) nützlich sind
 * Sich weiter aufbauendes Cheatsheet
 
 ## Lizenz
diff --git a/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md b/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md
index 95bdd9a6..90a0e058 100644
--- a/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md
+++ b/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md
@@ -297,10 +297,13 @@ void wasTueIch()
   }
 }
 ```
-
 ::::
 :::
 
+:::{.h5p-autoembed .no-print}
+Planet: wasTueIch
+:::
+
 :::{.erledigt}
 :::
 
diff --git a/Info/9/3/Planet/algorithmik/if/logik-operatoren.md b/Info/9/3/Planet/algorithmik/if/logik-operatoren.md
index 244ac240..35cfd5da 100644
--- a/Info/9/3/Planet/algorithmik/if/logik-operatoren.md
+++ b/Info/9/3/Planet/algorithmik/if/logik-operatoren.md
@@ -151,7 +151,10 @@ Beschreibe die Bedingung in eigenen Worten:
 ![](img/logic-hills.png)
 ::::
 :::
+:::
 
+:::{.h5p-autoembed .no-print}
+Planet: Logische Operatoren
 :::
 
 :::{.erledigt}
diff --git a/Info/9/3/Planet/algorithmik/sequenzen/sequenzen.md b/Info/9/3/Planet/algorithmik/sequenzen/sequenzen.md
index 6ad3c7b1..d61a2c1b 100644
--- a/Info/9/3/Planet/algorithmik/sequenzen/sequenzen.md
+++ b/Info/9/3/Planet/algorithmik/sequenzen/sequenzen.md
@@ -100,12 +100,17 @@ Im letzte Stück des Canyons müssen wir einige Kurven fahren.
 ::::
 
 :::: {.column width=70%}
-Öffne die Aktivität **Planet: Sequenzen3** in diesem Kurs.
 Bringe die Anweisungen in die richtige Reihenfolge, um den Rover auf die grüne Markierung zu fahren.
 
 *Wenn du willst kannst du deine Seuqenz in der Online-IDE testen.*
+
+Teste deine Sequenz in der Aktivität **Planet: Sequenzen3** oder direkt hier.
 ::::
 :::
+
+::::{.h5p-autoembed .no-print}
+Planet: Sequenzen3
+::::
 :::
 
 :::{.erledigt}
diff --git a/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md b/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md
index 20ed0427..8a3d391c 100644
--- a/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md
+++ b/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md
@@ -263,6 +263,10 @@ Analysiere die folgenden Wiederholungen im abgebildeten Szenario, indem du jewei
 </tr>
 </table>
 
+:::{.h5p-autoembed .no-print}
+Planet: Aufgabe 4.2
+:::
+
 ::: {.columns}
 :::: {.column width=50%}
 :::::{.aufgabe data-class="Aufgabe 4.3"}
diff --git a/Info/9/3/Planet/modellierung/landung/modellierung.md b/Info/9/3/Planet/modellierung/landung/modellierung.md
index c7815e57..53a2aab2 100644
--- a/Info/9/3/Planet/modellierung/landung/modellierung.md
+++ b/Info/9/3/Planet/modellierung/landung/modellierung.md
@@ -132,8 +132,11 @@ Datentyp       Bedeutung               Beispiel
 
 :::{.aufgabe data-class="Aufgabe 0.2"}
 Schaffst du es den Java Datentypen den entsprechenden Datentyp der Datenbanken zuzuordnen?  
-Hier geht's zur Aktivität: SQL-Java-Datentypen-Match  
-![](img/h5p-datentyp-zuordnung.png) 
+Prüfe dein Wissen in der Aktivität: SQL-Java-Datentypen-Match oder direkt hier:
+
+::::{.h5p-autoembed .no-print}
+SQL-Java-Datentypen-Match
+::::
 :::
 
 :::{.erledigt}
diff --git a/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md b/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md
index cfc378e2..d5e15293 100644
--- a/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md
+++ b/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md
@@ -110,8 +110,11 @@ Falls an der Position des Rovers eine Marke vorhanden ist, so entfernt er diese.
 
 :::{.aufgabe data-class="Aufgabe 3.1.1"}
 Was hast du herraus gefunden?
-Überprüfe deine Erekenntnisse in Planet: Methoden Testen  
-![](img/h5p-methoden-testen.png)
+  Überprüfe deine Erkenntnisse in der Aktivität Planet: Methoden Testen oder direkt hier.
+
+::::{.h5p-autoembed .no-print}
+Planet: Methoden Testen
+::::
 :::
 
 #### Schritt 3.1.3
@@ -138,8 +141,11 @@ Fülle die Tabelle auf deinem Aufgabenblatt und sortiere alle Methoden aus der v
 -----------------------------------------------------------------------
 :::
 
-Teste deine Sortierung unter Planet: Methoden Sortieren  
-![](img/h5p-methoden-sortieren.png)
+  Teste deine Sortierung in der Aktivität Planet: Methoden Sortieren oder direkt hier:
+
+::::{.h5p-autoembed .no-print}
+Planet: Methoden Sortieren
+::::
 :::
 
 :::{.page-break}
diff --git a/Info/9/3/Planet/glossar-template.xml b/Info/9/3/Planet/templates/glossar-template.xml
index 7be87db0..7be87db0 100644
--- a/Info/9/3/Planet/glossar-template.xml
+++ b/Info/9/3/Planet/templates/glossar-template.xml
diff --git a/Info/9/3/Planet/templates/h5p-autoembed.js b/Info/9/3/Planet/templates/h5p-autoembed.js
new file mode 100644
index 00000000..a6d89874
--- /dev/null
+++ b/Info/9/3/Planet/templates/h5p-autoembed.js
@@ -0,0 +1,34 @@
+const autoEmbedLinksDivs = document.querySelectorAll(".h5p-autoembed");
+let loadAutoResizerJs = false;
+for (div of autoEmbedLinksDivs) {
+	const autoEmbedLink = div.querySelector("a.autolink");
+	const autoEmbedUrl = new URL(autoEmbedLink.href);
+	const autoEmbedId = autoEmbedUrl.searchParams.get("id");
+	const iframe = document.createElement('iframe');
+	// Concatenate the URL to prevent Moodle's auto link feature to mess with the url
+	iframe.src = "https://" + "lernplattform.bycs.de/mod/hvp/embed.php?id=" + autoEmbedId;
+	iframe.frameborder = div.frameborder ? div.frameborder : 0;
+	iframe.allowfullscreen = div.allowfullscreen ? div.allowfullscreen : "allowfullscreen";
+	iframe.title = autoEmbedLink.title;
+	if (div.width) {
+		iframe.width = div.width;
+	} else {
+		loadAutoResizerJs = true;
+	}
+	if (div.height) {
+		iframe.height = div.height;
+	} else {
+		loadAutoResizerJs = true;
+	}
+
+	// Replace the div with the new iframe
+	div.parentNode.replaceChild(iframe, div);
+}
+
+if(loadAutoResizerJs) {
+	let head = document.getElementsByTagName('head')[0];
+	let js = document.createElement("script");
+	js.type = "text/javascript";
+	js.src="https://lernplattform.bycs.de/mod/hvp/library/js/h5p-resizer.js";
+	head.appendChild(js);
+}
diff --git a/Info/9/3/Planet/planet-mebis-page-template.html b/Info/9/3/Planet/templates/planet-mebis-page-template.html
index df31d508..fb9b2355 100644
--- a/Info/9/3/Planet/planet-mebis-page-template.html
+++ b/Info/9/3/Planet/templates/planet-mebis-page-template.html
@@ -324,5 +324,9 @@ $body$
 $for(include-after)$
 $include-after$
 $endfor$
+
+<script>
+$js/h5p-autoembed.js()$
+</script>
 </body>
 </html>