Springe zum Inhalt

JavaScript

Virtuelle Kunstausstellung

Museen sind Kulturträger, vermitteln Wissen und bieten die Möglichkeit, sich geschichtlich weiterzubilden. Während Kunstmuseen mit wechselnden Ausstellungen meist eher eine bestimmte Zielgruppe ansprechen, werden Museen für Naturkunde oder Geschichte von einer breiten Masse der Bevölkerung besucht. Hier geht es zur Webseite!

Seit Museen aufgrund der Einschränkungen des öffentlichen Lebens allerdings keine Besucher mehr empfangen durften, mussten sie sich Alternativen überlegen, um ihr Publikum auf andere Art zu erreichen und nutzten die Chance, ihr digitales Angebot durch virtuelle Kunstausstellungen auszubauen. Dabei ermöglichen sie Kunstinteressierten nicht nur ein maximal flexibles Besuchererlebnis.

Mit dem Angebot einer virtuellen Kunstausstellung bieten Museen ihren Besuchern auch einen umfassenderen Überblick über die Vielfalt der Kunstwerke sowie zugehörige Informationen. Durch die Platzierung auf der museumseigenen Webseite kann der Nutzer zudem Informationen zu vergangenen oder kommenden Ausstellungen, aber auch weitere Angebote des Museums einsehen.

Ausschnitt der virtuellen Kunstausstellung

Die Idee der virtuellen Kunstausstellung ist nicht erst seit der Corona-Pandemie populär, schon zuvor erkannten Kunstliebhaber den Mehrwert von Orts- und Zeitunabhängigkeit. Dabei bewegt sich der Besucher beispielsweise mithilfe von Steuerelementen durch einen nicht realen, also virtuellen Ausstellungsraum. Dieser kann in einer Webseite eingebettet sein und so konzipiert sein, dass Besucher alle Gemälde und Skulpturen betrachten können, indem sie sich zu vordefinierten Punkten im Raum bewegen können.

All diese Gründe waren letzten Endes Entscheidungsträger für die Konzeption einer virtuellen Kunstausstellung im Rahmen der Veranstaltung Multimedia. Die Galerie trägt den Namen LOMA Arts, welcher sich aus den Anfangsbuchstaben der Vornamen der Projektmitglieder zusammensetzt.

Menü Shading in Blender
  • Zeitraum: Wintersemester 2021/2022
  • Tool(s): WordPress, Verge3D, H5P
  • Person/en: Dombek, Melissa; Chrzanowska, Oliwia; Kern, Laura; Kalaidopoulou, Anastasia

Hier geht es zur Webseite!

Video Data Mining: Analyse von Nutzeraktivitäten in Lernvideos

Ziel des Projekts war das Erfassen von Nutzeraktivitäten in Lernvideos und X3D-Modellen zur späteren Auswertung.

Die Abbildung illustriert den Programmablauf beim Speichern des X3D-Modells.

Projektbeschreibung

Videos spielen beim Lernverhalten eine immer größere Rolle. Angefangen in der Schule oder bei Computerproblemen sowie bei Schulungen und z. B. der Inbetriebnahme von Geräten wird das Medium Video zunehmend wichtiger.
Doch abgesehen von Klickzahlen ist es schwierig das Nutzerverhalten auszuwerten und die Qualität der des Mediums über den Gesamteindruck hinaus zu beurteilen.

Insbesondre Bewertung von einzelnen Sequenzen innerhalb eines Videos ist schwierig. Dabei ist es für jeden Ersteller sinnvoll und wichtig zu erkennen, wann der Rezipient auf Pause drückt, zurück spult oder eine Stelle überspringt, um die Qualität und die Nutzerfreundlichkeit kontinuierlich steigern zu können.

Ähnlich verhält es sich mit anderen Formaten. In dieser Arbeit wurden zusätzlich die Einsatzmöglichkeiten von Data-Mining bei der Nutzung von 3D-Darstellung untersucht und Möglichkeiten daraus sinnvolle Aussagen ableiten zu können.

  • Zeitraum: Sommersemester 2021
  • Tool(s): Blender, Verge3D, JavaScript, WordPress, Matomo
  • Person/en: Florian Rommel, Daniela Jordan

Evaluation des Blender-Plugins „Verge3D“ & Entwicklung einer interaktiven 3D-E-Learning-App

Die Projektarbeit wurde im Rahmen der Veranstaltung Multimedia-Technologien erstellt und befasst sich mit den Funktionalitäten des Blender-Plugins „Verge3D“.

Anhand des Beispiels einer interaktiven 3D E-Learning-App zum Thema Erste-Hilfe, wurden die Möglichkeiten und Funktionen von Verge3D in Kombination mit Blender getestet, angewandt und abschließend evaluiert. Die 3D-Animation stellt hierbei den Vorgang der stabilen Seitenlage dar. Interaktive Features, wie beispielsweise per Mausklick angewandte Bewegungen an einer Körperstelle, sollen dabei den Lerneffekt für den Nutzer erhöhen.

Interaktives 3D-E-Learning: Bringe die betroffene Person in stabile Seitenlage
  • Zeitraum: Wintersemester 2020/2021
  • Tool(s): Blender, Verge3D, JavaScript
  • Person/en: Sandra Hilbert, Jonas Kratzmeier, Sabina Müller, Simone Ortel, Charlotte Quirmbach, Benjamin Rothfuss

Hier geht es zur Webseite!

Erstellung einer mehrsprachigen Augmented-Reality-Anwendung

Erstellung einer mehrsprachigen Augmented-Reality-Anwendung

  • Tool(s): Adobe Captivate, Adobe Dreamweaver, XAMPP
  • (Programmier-)Sprache: HTML, XML, JavaScript
  • Besonderheiten: Mehrsprachigkeit
  • Zeitraum: Wintersemester 2017/2018
  • Person/en: Jennifer Hoffstätter, Laura Weingartner

Zielsetzung

Ziel der Arbeit war die Übertragung, aber auch Ergänzung und sprachliche Erweiterung der Inhalte des bestehenden Captivate-E-Learnings von Sven Dümpelmann in einen neuen Quellcode. In diesem Zusammenhang sollte auch die Usability verbessert und die grafische Oberfläche ansprechender gestaltet werden. Die wesentlichste Erweiterung besteht in der mehrsprachigen Umsetzung.

Projektbeschreibung

Diese Arbeit beschäftigt sich mit der Erweiterung des E-Learning-Projekts “Erstellung einer Augmented Reality Anwendung” von Sven Dümpelmann.

Neben der grafischen Neugestaltung liegt hierbei das Augenmerk vor allem auf der Implementierung der Option der Mehrsprachigkeit. Darüber hinaus wurde ein E-Learning erstellt, welches als Leitfaden für die Erstellung von mehrsprachigen E-Learnings dienen soll.

Einkaufshelfer – Bilderkennung für Obst und Gemüse

Einkaufshelfer – App zur Bilderkennung für Obst und Gemüse

  • Tool(s): Adobe Dreamweaver, Phonegap, Bootstrap, Clarifai, quaggaJS, jQuery
  • (Programmier-)Sprache: JavaScript, HTML, CSS
  • Besonderheiten: Responsive Design
  • Zeitraum: 01. Oktober 2017 bis 31. Januar 2018
  • Person/en: Carolin Schneider

Zielsetzung

Zielsetzung dieser Projektarbeit war es eine App zu entwickeln, die als „Einkaufshelfer“ die unterschiedlichen Obst- und Gemüsesorten identifiziert und dem Kaufinteressenten Informationen zum Produkt bereitstellt (z. B. Nährwertangeben, Rezeptvorschläge und Online-Suche).

Projektbeschreibung

Oft steht man im Supermarkt in der Gemüseabteilung und fragt sich, was das eigentlich für ein Obst sein soll, wie gesund es ist und welche Gerichte man damit zubereiten kann. Für dieses Problem soll in diesem Projekt eine Lösung geschaffen werden: der Einkaufshelfer. Die im Rahmen dieses Projektes erstellte App erstellt, kann Obst und Gemüse mittels Bilderkennung analysieren, Barcodes auslesen und dem Nutzer zugehörigen Informationen anbietet.

Textfeld prüfen

In diesem Beispiel werden vier Textfelder und ein Button angelegt. Die Werte innerhalb der Textfelder werden mittels JavaScript ausgelesen und miteinander verrechnet. Das Ergebnis wird in einem Textfeld ausgegeben. Vor der Berechnung findet eine Prüfung der Werte statt (Punkt als Dezimaltrenner, keine Buchstaben verwendet). Im Anschluss an die Berechnung werden die Werte kaufmännisch auf zwei Nachkommastellen gerundet.

[jsfiddle url=“https://jsfiddle.net/jr85Lck9/4/“]

Anleitung

HTML

  • Formular mit name-Attribut vergeben: <form name="formular>...</form>
  • 4 Textfelder erstellen: <input type="text" name="betrag" />
  • 1 Button erstellen: <button type="button" onclick="rechnen()">Berechnen</button>

JavaScript

  • Funktion anlegen: function rechnen(){...}
    • Funktionsaufruf: pruefen(document.formular.betrag.value);
    • IF-Bedingung:
      if (formular.mwstsatz.value > 19) {
          alert("Bitte geben Sie einen korrekten Mehrwertsteuersatz ein.");
      }

      Hier wird geprüft, ob der Wert, der als Mehrwertsteuersatz eingetragen ist, kleiner ist als 19. Ist dies nicht der Fall, bekommt der Nutzer eine Meldung angezeigt.

    • ELSE:
      else {
          mwstbetrag = formular.betrag.value * formular.mwstsatz.value / 100;
          mwstbetrag = runden(mwstbetrag);
          formular.mwsteuro.value = mwstbetrag;
          gesamtbetrag = parseFloat(formular.betrag.value) + parseFloat(mwstbetrag);
          formular.betragnetto.value = runden(gesamtbetrag);
      }

      Ist die IF-Bedingung nicht erfüllt, d. h. der Wert ist kleiner als 19, wird die Berechnung ausgeführt. Dazu wird zuerst der Mehrwertsteuerbetrag berechnet und auf zwei Nachkommastellen gerundet. Der gerundete Betrag wird dann in das entsprechende Textfeld geschrieben.
      Anschließend wird der Gesamtbetrag (Betrag + Betrag Mehrwertsteuer) berechnet. Wichtig ist dabei, dass die Eingaben mittels parseFloat in Zahlen umgewandelt werden. Der Gesamtbetrag wird als gerundete Zahl in das entsprechende Textfeld geschrieben.

  • Funktion anlegen: function runden(wert){...}
    • Diese Funktion rundet die Werte, die übergeben werden, kaufmännisch auf zwei Nachkommastellen.
    • Dazu wird eine Variable angelegt: zahl = wert.toFixed(2);
    • Der berechnete Wert wird von der Funktion an den Funktionsaufruf zurückgegeben: return zahl;
  • Funktion anlegen: function pruefen(gleitkommazahl){...}
    • Diese Funktion prüft die Eingabe im Formularfeld für den Betrag.
    • Prüfen, ob ein Komma als Dezimaltrenner verwendet wurde
      var ergebnis = gleitkommazahl.match(/\b,\b|\b \b/);
      
      if ((ergebnis == ",") || (ergebnis == " ")) {
          alert("Bitte verwenden Sie als Dezimaltrenner einen Punkt statt eines Kommas.");
      }
    • Prüfen, ob Buchstaben eingegeben wurden:
      var buchstaben = /([A-Za-z])/;
      
      if (buchstaben.exec(gleitkommazahl)) {
          alert("Bitte geben Sie keine Buchstaben ein.");
      }

Textfeld auslesen

In diesem Beispiel werden zwei Textfelder und ein Button angelegt. Die Werte innerhalb der Textfelder werden mittels JavaScript ausgelesen und miteinander multipliziert. Das Ergebnis wird in einem alert-Fenster ausgegeben.

[jsfiddle url=“https://jsfiddle.net/h2hmjytj/14/“]

Anleitung

HTML

  • Formular mit name-Attribut vergeben: <form name="formular>...</form>
  • 2 Textfelder erstellen: <input type="text" name="zahl1" />
  • 1 Button erstellen: <button type="button" onclick="rechnen()">Berechnen</button>

JavaScript

  • Funktion anlegen: function rechnen(){...}
  • Variablen anlegen, Werte aus den Textfeldern auslesen: zahl1 = document.formular.zahl1.value;
  • Variable für Ergebnis anlegen, berechnen: ergebnis = zahl1 * zahl2;
  • Ergebnis ausgeben: alert(ergebnis);