ukko – Interaktive Videotutorials

ukko – Interactive Video Tutorials

Ukko ist ein Lernsystem mit interaktiven Videotutorials. Durch haptische Elemente werden digitale Lehrinhalte für die Schüler_innen greifbar und besser verständlich. Mit Hilfe der Bilderkennung können Übungen automatisch ausgewertet und analysiert werden. Dies ermöglicht es den Lehrer_innen, mehr Zeit für soziale Kontakte zu haben.

Ukko is a learning system for interactive video tutorials. Through haptical elements, digital teaching content gets tangible and better understandable for students. With the help of image recognition exercises can be evaluated and analysed automatically. This allows the teacher to spend more time for social contacts.

Die ersten Tests zum erdachten System mit Objekterkennung

First tests with object recognition

Ergebnis

Result

Onlineplatform

Online platform

Die Anwendung für die Schüler_innen enthält im Wesentlichen drei Hauptfunktionen. Es bietet ein Dashboard, in dem die Schüler_innen einen Überblick über ihre bereits begonnenen Übungen sowie ihre neuen Aufgaben erhalten, die oben auf der Seite angezeigt werden. Der Menüpunkt Themen enthält alle Kurse, die der/die Schüler_in besucht hat. Durch Anklicken eines bestimmten Themas werden alle Video-Tutorials auf einer neuen Seite angezeigt. Ein wichtiger Teil für die Schüler_innen ist der Überblick über ihre Fortschritte.

The students site basically contains three main functions. It provides a dashboard where students get an overview of their already started exercises as well as their new tasks which will be shown at the top of the page. The menu point subjects contains all classes the student has taken. Through clicking on a specific topic, all video tutorials will be shown on a new page. An important part for students is the overview of their progress.

Interaktive Videotutorials

Interactive video tutorials

Kurze Video-Tutorials geben den Schüler_innen eine kurze Einführung in neue Themen. In den meisten Fällen wird der/die Lehrer_in Blätter mit bestimmten Materialien austeilen, die zum Tutorial passen. So müssen beispielsweise gedruckte Formen ausgeschnitten werden, um an definierten Zeitpunkten verwendet zu werden. Dann erhält der/die Schüler_in eine Übung, die er mit Hilfe der ausgeschnittenen Formen lösen muss.

Short videotutorials give students a brief introduction into new topics. In most cases the teacher will hand out sheets with certain material which matches with the tutorial. For example printed shapes must be cut out to be used at defined breakpoints. Then the student is given an exercise that he needs to solve with the help of the cut out shapes.

Auf der Zeitleiste des Videos sind Punkte ("Breakpoints") markiert, an denen der/die Schüler_in unterschiedliche, im Voraus festgelegte Aufgaben erledigen soll. Durch das darüber hovern mit der Maus ist erkennbar, welche Art von Aufgabenstellung die Schüler_innen erwartet.

On the timeline of the video, specific points, called "breakpoints", are marked. Student have to complete different tasks when they reach those braekpoints. By hovering over them, they are able to see what kind of task they are expecting.

Erreicht der/die Schüler_in einen "Breakpoint" erhält er/sie eine Aufgabe, welche auf den vorigen Inhalt aufbauend meist im Analogen zu bearbeiten ist. Zu sehen ist eine digitale, vereinfachte Abbildung des analogen Arbeitsplatzes, welcher von der ukko-Kamera aufgenommen wird. Alle verwendeten analogen Gegenstände, welche zur Bearbeitung der Aufgabe benötigt werden, können im Digitalen dargestellt werden.

As soon as the student reaches a "breakpoint", he/she receives a task which usually has to be done with tactile objects. A digital, simplified image of the analog workstation, which is recorded by the ukko camera, can be seen on the screen. All used analog objects, which are needed to process the task, are be mapped in the digital picture.

Hier sollen die Schüler_innen beispielsweise aus unterschiedlichen Formen, welche sie aus einem passenden Arbeitsblatt ausgeschnitten haben, ein Viereck mit vier gleichlangen Seiten finden und dieses in den hervorgehobenen Bereich legen. Sobald eine Form im hervorgehobenen Bereich erkannt wurde, kann die Antwort überprüft werden. Oder aber der/die Schüler_in überspringt die Aufgabe, indem er/sie auf den Button mit den zwei Pfeilen drückt.

In this example, pupils have to find a rectangle with four equally long sides from different shapes, which they have cut out previously from a worksheet. The square is placeed inside the highlighted area. Once a shape is recognized in the highlighted area, the answer can be confirmed, or the student can skip the task by pressing the button with the two arrows.

Wurde die Aufgabe richtig beantwortet, so erhält der/die Schüler_in ein visuelles, wie auch ein auditives Feedback.

If the task was answered correctly, the student receives visual as well as auditory feedback.

Eine weitere Art an Aufgaben ist das Sortieren von Formen in selbst bestimmte Gruppen, welche im nächsten Schritt benannt und beschrieben werden sollen. Das System erkennt nahe beieinander liegende Formen und schließt sie auch visuell zu Gruppen zusammen.

Another type of task is the sorting of shapes into self-defined groups for example. In the next step those groups have to be named and described by the student. The system recognizes shapes that are close to each other and visually merges them into groups.

Meine Aufgaben

My tasks

Verwendete Technologien

FramerJS, Javascript, OpenCV, node.js

Used technologies

FramerJS, Javascript, OpenCV, node.js

Team

Martina Eckert, Marianne Spiess, Leonard Weigand

Team

Martina Eckert, Marianne Spiess, Leonard Weigand

Betreuer

Fabian Gronbach

Supervisors

Fabian Gronbach

Semester und Zeitraum

4. Semester (4 Monate)

Semester and time span

4th semester (4 month)