Interaktive Lerninhalte im Browser

VOCANTO ist eine intuitive E-Learning-Plattform für die kaufmännische und gewerblich-technische Ausbildung, die komplexe Inhalte mit anschaulichen Animationen einfach und verständlich darstellt.

Zielgruppe

Ausbilder:innen für kaufmännische und gewerblich-technische Ausbildungsberufe in Konzernen oder größeren Unternehmen sowie die entsprechenden Auszubildenden.

Herausforderung

  • Komplexes Fachwissen über interaktive Animationen abfragen
  • Intuitive HTML5-Animationen im Browser erstellen
  • Datensicherheit: Prüfungssimulationen im Stil der IHK Prüfungen
  • Erstellung, Konvertierung und Verwaltung von Animationen, Simulationen und Videos
  • Realisierung einer weltweit nutzbaren, cloudbasierten Lernplattform, die responsiv im Browser auf allen Endgeräten und Betriebssystemen läuft
  • Entwicklung einer benutzerfreundlichen Medienverwaltung zum Hochladen und Konvertieren von Mediendateien

Details

Branche: E-Learning

Standort: Pulheim

Kontakt: VOCANTO

Softwarelösung: Individuelle Software

Kooperationsmodell: Scrum-Team

Lösung

Cloudbasierte Lernplattform

Interaktive Animationen bzw. Lerninhalte sind das Herzstück der VOCANTO Plattform. Um diese effektiv erstellen und verwalten zu können, entwickelte Grey Rook Animations 4.0. Animations 4.0 ist ein Medienmanagement-System, das speziell für die Integration in Lernplattformen entwickelt wurde und auf jahrelanger Erfahrung im LMS-Bereich basiert.

Erstellung von Lerninhalten im Browser

Ziel der Entwicklung war es, den Autorinnen und Autoren der Lernplattform einfach zu bedienende, aber leistungsfähige Werkzeuge an die Hand zu geben, mit denen sie interaktive Lerninhalte direkt im Browser erstellen können. Durch eine ansprechende, webbasierte Benutzeroberfläche rückt die technische Komplexität in den Hintergrund, sodass sich die Autorinnen und Autoren ganz auf die Erstellung der Lerninhalte konzentrieren können.

Interaktive Animationen im Editor

Im browserbasierten Editor haben die Autorinnen und Autoren Zugriff auf eine umfassende Mediathek, um dort mehrsprachige Medien in einem Lernkontext einzubetten, mit Texten und interaktiven Fragen zu verknüpfen und so ein strukturelles Erlernen der bereitgestellten Informationen zu ermöglichen.

Die Lernenden können auf die erstellten multimedialen Inhalte der Lerneinheiten zugreifen, um sich in verschiedenen Themenbereichen weiterzubilden. Dazu können sie z.B. eine Testsitzung starten, in der sie Fragen im Kontext der Lerneinheit beantworten können.

Benutzerfreundliche Medienverwaltung

Zur Verwaltung der verwendeten Medien wird eine Mediathek zur Verfügung gestellt, die als browserbasiertes Dateisystem realisiert ist und es den Autorinnen und Autoren ermöglicht, Bilder, Videos, Untertitel und Bildsequenzen hochzuladen, zu organisieren und in ihre Lerneinheiten einzubinden, ohne dass sie Kenntnisse über Video-, Bild- und GPU-Formate benötigen.

Auswählbare Videoqualitäten

Alle hochgeladenen Medien durchlaufen eine Validierung und Konvertierung in festgelegte Zielformate, bevor sie an andere Nutzer:innen ausgeliefert werden. Jedes hochgeladene Video wird in optimierte Streamingformate konvertiert, um dynamische Qualitätsänderungen zu ermöglichen und eine maximale Kompatibilität mit verschiedenen Browsern und Betriebssystemen zu gewährleisten.

Weltweite Infrastruktur der Mediendatenbank

Die Mediathek kann als WebComponent in beliebige Webseiten integriert und als Schnittstelle zur Mediendatenbank genutzt werden, ohne dass größere Anpassungen an der API seitens der Kundin/des Kunden notwendig sind. Die Prüfung der Zugriffsrechte erfolgt über einen API-Adapter, so dass das System selbst keine Benutzerführung bereitstellen muss, sondern eine externe Benutzerverwaltung integrieren kann. Für den weltweiten Einsatz wurden die interaktiven Animationen für die Auslieferung über ein CDN (Content Delivery Network) optimiert.

Datensicherheit durch signierte URLs

Für die langfristige Speicherung der Medien werden Objektspeicher verwendet, die sowohl eine hohe Verfügbarkeit der Daten als auch eine einfache und automatisierte Verwaltung von Backups ermöglichen. Der Zugriff auf den Objektspeicher wird über signierte URLs eingeschränkt, sodass ein/e Nutzer:in nur auf entsprechende Objekte zugreifen kann, wenn er/sie zuvor autorisiert wurde.

Komplexe Medienverwaltung und Integration

Der besondere Innovationswert von Animations 4.0 liegt in der Kombination der einzelnen Komponenten. Neueste Technologien für Medienverwaltung und -verarbeitung, Datensicherheit, Erweiterbarkeit und User Experience kommen zum Einsatz. Dies ermöglicht eine reibungslose und benutzerfreundliche Integration in Lernplattformen.

Tech-Stack

  • Verwendete Frontend-Technologien in der Mediathek: WebComponents, React, React-Redux, Redux-Sagas, ResumableJS, JWT
  • Verwendete Backend-Technologien in der Mediathek: AioHTTP, MongoDB, S3
  • Verwendete Frontend-Technologien im Editor: WebComponents, Angular, FabricJS, Shaka Player
  • Verwendete Backend-Technologien im Fragen-Backend: FastAPI, MongoDB
  • Infrastruktur: GitLab, AWS EC2, AWS S3, Kubernetes, Helm

Ergebnis

Komplexe Sachverhalte werden durch prägnante Texte und interaktive Elemente (Interaktion mit Fragen, Erklärungstexten, Klickflächen und Videos) zu leicht verständlichen Lerninhalten. Der Gestaltungsfreiheit sind durch die große Funktionsvielfalt kaum Grenzen gesetzt, um Lerninhalte zielgruppengerecht und mit modernen Methoden zu vermitteln. Die Auszubildenden werden durch Lernerfolge motiviert, was sich in der Erfolgsquote bei den Prüfungen widerspiegelt.

Wir arbeiten seit über 7 Jahren partnerschaftlich mit Grey Rook zusammen und sind begeistert von der konstruktiven Zusammenarbeit, der sehr guten Kommunikation und der hohen Software-Qualität – bei gleichzeitig sympathischen, professionellen und zuverlässigen Ansprechpartnern.

Sascha Zimmer

Teamleiter Plattform