Richer Interactive HTML5 Content | H5P Integration in Drupal

Transcript

1. Richer Interactive HTML5 Content H5P Integration in Drupal Benjamin Krosse | Julian Strecker 2 3 . 0 4 . 2 0 1 7 | # D C F F M 1 7
2. J U L I A N S T R E C K E R Drupal Web & Applikationsentwicklung julian.strecker@ueberbit.de D.o: julianstrecker B E N J A M I N K R O S S E Drupal Web & Applikationsentwicklung benjamin.krosse@ueberbit.de D.o: bekro
6. 6 Duden LEARNATTACK
7. Duden LEARNATTACK - eLearning Plattform mit geprüften Inhalten - Mehrfach ausgezeichnet: - GPI „Comenius-EduMedia-Award“ - Eltern familiy „GIGA-Maus“ - Splash-Award - 5. Klasse bis Abitur - Neun Fächer - Individueller Einzelunterricht - Drupal 7 als Basis 7
8. Duden LEARNATTACK - Lernen in strukturierten Lernpfaden - Verstehen, Üben, Prüfen 8
9. Was wir hatten: - Umsetzung mit „quiz“ Modul - Interaktivität stark eingeschränkt - Umständliche Inhaltsverwaltung - Alte, schwer zu aktualisierende Version Was wir wollten: - Mehr Interaktionsmöglichkeiten - Zeitgemäße Technik - Größere Auswahl an Fragetypen - Komfortableres Backend Duden LEARNATTACK 9
10. W A S B I E T E T U N S H 5 P ? 10
11. H5P – HTML 5 Package Allgemeines - Framework zur Erzeugung von interaktivem HTML5-Content - Bisher 31 fertige Inhaltstypen - Editor zum einfachen Erstellen von Inhalten - Integration in Drupal, Wordpress, Moodle - Open Source - MIT Licence - Vollständig responsive - Schneller Support und aktives Forum 11
12. H5P – HTML 5 Package Technisches - Integration durch PHP - Eigentliche Anwendung H5P: Generiertes HTML + JavaScript - HTML5 innerhalb iFrame (auch Editor) - Plattformunabhängige Inhaltscontainer - Inhaltstypen modular in .h5p-Dateien verfügbar - JS-Bibliotheken - Konfiguration und Übersetzungen: JSON 12
13. I N T E G R A T I O N V O N H 5 P I N L E A R N A T T A C K 13
14. Integration in LEARNATTACK Unsere Aufgaben - Installation des Drupal-Moduls - Integration in vorhandene Struktur - Frontend Anpassungen an CD von LEARNATTACK - Übersetzung / Anpassung des Wordings - Erstellung von eigenem Frageset - Anbindung Google Tag Manager 14
15. Integration in LEARNATTACK Installation in Drupal - Installation des Drupal-Moduls - Stellt Inhaltstypen bereit - Legt Datenbanktabellen an - Bibliotheken von h5p.org herunterladen - Über Bibliotheks-Verwaltung im Backend installieren - Seit 7.x-1.28 Download on Demand via Hub möglich 15
16. Integration in LEARNATTACK Probleme - MathJax - Bilder - Anbindung an file managed - Einbindung von Bildern in Fließtext - Textformatierung in Fragen ermöglichen 16
17. D E M O U N D C O D E B E I S P I E L E 17