Richer Interactive HTML5 Content | H5P Integration in Drupal

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

J U L I A N S T R E C K E R Drupal Web & Applikationsentwicklung [email protected] D.o: julianstrecker B E N J A M I N K R O S S E Drupal Web & Applikationsentwicklung [email protected] D.o: bekro

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

6 Duden LEARNATTACK

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Duden LEARNATTACK - Lernen in strukturierten Lernpfaden - Verstehen, Üben, Prüfen 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

W A S B I E T E T U N S H 5 P ? 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Integration in LEARNATTACK Probleme - MathJax - Bilder - Anbindung an file managed - Einbindung von Bildern in Fließtext - Textformatierung in Fragen ermöglichen 16

Slide 17

Slide 17 text

D E M O U N D C O D E B E I S P I E L E 17