12. Hausaufgabe

Bitte nehmen Sie sich die Datei "Ajax_Example", mit der Sie bereits im Seminar gearbeitet haben. Dort finden Sie die Funktionen, um die JSON- bzw XML-Daten in einer globalen Variable zu speichern. Denken Sie daran, dass sich die Daten in den globalen Variablen befinden, sobald die Funktionen aufgerufen wurden, sprich, die entsprechenden Buttons gedrückt werden (das können Sie über die Konsolenausgabe sehen). Ebenso finden Sie zwei leere Funktionen, mit denen die eigentliche Datenausgabe stattfindet. Diese Funktionen können Sie nutzen.

Ziel ist es, alle vorhandenen Daten auf der Webseite auszugeben. Beachten Sie dabei bitte folgende Spezifikationen:

1. Javascript und CSS sind in jeweils eine separate Datei ausgelagert.
2. Greifen Sie innerhalb der beiden leeren Funktionen auf die entsprechenden Daten zu und geben diese auf der Webseite aus.
3. Die Ausgabe kann sich in einer Tabelle befinden, wie im Beispiel, muss es aber nicht. Auch eine Liste oder eine andere sinnvolle Ausgabe wäre in Ordnung.
4. Nutzen Sie innerhalb der Funktionen eine for-Schleife, um die Daten auszugeben.
5. Bauen Sie eine Meldung mit ein, die den Benutzer darauf hinweist, wenn keine Daten ausgewählt wurden (sprich, die Daten nicht vorher geladen wurden).

Hier sehen Sie ein Beispiel, wie die Ausgabe aussehen kann:

11. Hausaufgabe

1. Vervollständigen Sie die Sitzungsaufgabe

2. Bitte schreiben Sie mit dem XML Editor Oxygen oder einem Texteditor eine

• DTD (abspeichern unter cocktails.dtd) und
• XML Instanz (abspeichern unter cocktails.xml)

zu der unten aufgeführten Cocktailsammlung. Bedenken Sie, dass Sie die Struktur/das Konzept, das dieser Rezeptsammlung zugrunde liegt, mit der DTD formalisiert ausgedrückt werden muss (Grammatik).

Wenn Sie diese Struktur/ Konzept erfasst haben, füllen sie es mittels der XML Instanz mit „realem Inhalt“. Beachten Sie dabei, dass ALLE Informationen, die Sie in dem Rezept vorfinden am besten mit jeweiligen Elementen oder Attributen kodiert werden müssen.

Validierung

Die Dateien müssen wellformed und valid sein. Um das zu gewährleisten, müssen beide Dokumente zweimal überprüft werden:

Anmerkung

Bei der Konzeption von XML Instanzen und DTDs gibt es nur noch wenige scharfe Kriterien hinsichtlich richtig und falsch. Wir bewegen uns jetzt meist im Bereich besser oder schlechter, sinnvoller oder weniger sinnvoll. Sie müssen sich also immer wieder fragen: ist das, was ich gerade modelliert habe, wirklich gut und sinnvoll? Welche Konsequenz ergibt sich aus der unterschiedlichen Modellierung? Also verwende ich besser ein Attribut? Oder ein Kindelement? Handelt es sich vielleicht konzeptuell doch eher um ein Geschwisterelement oder um ein Elternelement? Oft sind diese Fragen nicht trivial!

COCKTAILSAMMLUNG

Hells Bells

Zutaten:

4 cl Batida de Côco

2 cl Karamellsirup

8 cl Milch

4 cl Erdbeerpüree

Dekoration: Erdbeer Blut mit Spinnen

Mixanleitung: Alle Zutaten shaken, ins Glas seihen und mit Strohalm verzieren.

Feuerzangenbowle

Zutaten:

1 l Rotwein

1 Zimtstange

3 Nelken

1 cl Zitronenschale

2 cl Orangenschale

1 Zuckerhut

500 ml Pott 54

Zubereitung: Trockenen Rotwein in einen Topf gießen. Mit Zimtstange undNelken würzen.Die Schale von unbehandelten Zitronen und Orangen dünn in dünne Streifen schneiden und zusammen mit dem Rotwein erhitzen – nicht kochen.

Monaco Mojito

Zutaten:

4 cl Wodka

2 cl Limettensaft

2 cl Holundersirup

1 Stück Minzezweig

10 cl Sekt

Dekoration: Minzzweig

10. Hausaufgabe

Bitte laden Sie sich den Ordner "JSON_Objektzugriff "auf Ilias herunter, mit dem Sie bereits in der letzten Sitzung gearbeitet haben. Dort finden Sie eine JavaScript-Datei "objektZugriff.js", in der bereits ein Objekt (exponateJSON) mit unterschiedlichen Daten vorhanden ist.

Nun erstellen Sie in dieser JS-Datei die folgenden zwei Funktionen. Beachten Sie, dass alle HTML-Elemente, die Sie dafür benötigen, bereits vorhanden sind. Auch sind dort schon die Funktionsaufrufe zu finden, die Sie benutzen können, aber nicht müssen.

Objektsuche nach Künstlernamen

1. Der Nutzer soll das Objekt exponateJSON nach einem bestimmten Namen durchsuchen können. Nutzen Sie dafür das vorhandene Input-Feld der Suche (siehe Screenshot), indem Sie auf den eingegebenen Wert zugreifen.
2. Lassen Sie eine Schleife über das Array "kuenstler" laufen und vergleichen die dortigen Werte von "kuenstlerIn" mit dem eingegebenen Wert.
3. Gibt es Treffer, werden die Namen dieser Künstler und der jeweilige Wohnort im Feld "nameSuche" ausgegeben. Im anderen Fall wird ein Text ausgegeben, der besagt, dass kein Künstler gefunden wurde.
4. Die Funktion wird über den Suche-Button aufgerufen.
5. Hinweis: Es reicht vollkommen, wenn es einen Treffer gibt, sobald der komplette Name eingegeben wird. Sie müssen keine Groß- und Kleinschreibung mit einbeziehen oder Teile des Namens, können dies aber gerne tun.

Objektsuche nach Kategorie

1. Diesmal soll der Nutzer nach der Kategorie filtern können. Nutzen Sie hierzu das select-Element im HTML-Dokument. Dort ist bereits ein Funktionsaufruf hinterlegt. Dieser übergibt bei einer Kategorie-Änderung den aktuell ausgewählten Wert als Parameter.
2. Erstellen Sie eine Schleife, wie in der vorherigen Aufgabe, und vergleichen diesmal den Wert aus dem Select-Feld mit den unterschiedlichen Kategorien innerhalb des Objektes.
3. Gibt es Treffer, werden die Namen dieser Künstler und der jeweilige Wohnort im Feld "kategorieSuche" ausgegeben.

Optionale Suche nach den Kunstwerken (Fortgeschrittenenaufgabe)

Diese Funktion ist NICHT verpflichtend für die Hausaufgabe, jedoch eine gute Übung (!) für die bevorstehende Seminararbeit am Ende des Semesters. Deswegen wird dazu geraten, sich zumindest mit dem Gedanken dahinter zu beschäftigen, um den Objektzugriff besser verstehen zu können.

1. Erstellen Sie eine Funktion, die alle Kunstwerke auflistet. Wenn Sie sich das Objekt ansehen, werden Sie merken, dass sich die Kunstwerke in einem eigenen Array bei den jeweiligen Künstlern befinden. Das heißt, es müssen insgesamt zwei Arrays durchlaufen werden, um alle Kunstwerke ausgeben zu können.
2. Für die erste Schleife kann die aus den ersten Aufgaben genommen werden, die das gesamte Objekt durchsucht.
3. Die zweite Schleife durchsucht dann (innerhalb der ersten Schleife) die einzelnen Arrays der Künstler.
4. Geben Sie von jedem Kunstwerk den Titel, das Jahr, die Art und das Format an.

9. Hausaufgabe

Hinweis: Diese Hausaufgabe ist umfangreicher und kann über die Ferien bearbeitet werden. Die Abgabe muss bis zum 06.01.2020 bei Woms erfolgen.

Bitte vervollständigen Sie zunächst die Sitzungsaufgabe!

Bitte gestalten Sie Ihre Webseite ansprechend und programmieren Sie eine einfache Variante von Kniffel (https://www.schmidtspiele.de/media/files/Kniffel49203D.pdf).
Dies bedeutet, dass Sie basierend auf der Sitzungsaufgabe mindestens folgende Möglichkeiten in ihrem Spiel zur Verfügung stellen:

• es wird mit 5 Würfeln gleichzeitig gewürfelt.
• nach jedem Wurf entscheidet der Spieler/in in welchem Bereich (1er, 2er, 3er, 4er, 5er oder 6er) der Wurf gewertet werden soll. Wie genau diese Entscheidung aussieht, bleibt Ihnen überlassen.
• die Summe der entsprechenden Würfelaugen wird in das Feld eingetragen (wird zb 6, 5, 2, 6, 6 gewürfelt und der Spieler entscheidet sich für das Feld "Augenzahl 6" wird dort eine 18 reingeschrieben).
• sind alle Felder ausgefüllt, endet das Spiel und es wird die erreichte Gesamtsumme auf der Webseite ausgegeben.
• Stellen Sie nun eine Möglichkeit zur Verfügung, das Spiel neu zu starten, ohne die Seite neu zu laden.
• Erstellen Sie zuletzt noch einen Highscore. Dabei soll nach jedem Spieldurchlauf (sprich, alle Felder sind einmal befüllt worden) an einer Stelle auf der Webseite die höchste Gesamtsumme angezeigt werden. Achtung: Das ist nur möglich, wenn nach einem Spieldurchlauf die Webseite nicht neu geladen wird!

Hinweis: Es gilt nur die Spezifikationen, die hier explizit definiert werden. Alles andere bleibt Ihnen überlassen und stellt keinen Fehler dar. Es ist nicht notwendig, die Funktionalität eines offiziellen Kniffelspiels zu kopieren (auch wenn Sie natürlich dürfen, wenn Sie gerne wollen). Der Vergleich dient nur Ihrer Vorstellung.

Gern können Sie Ihren Code um weitere Bedingungen und Möglichkeiten ergänzen, die in dem Original Spiel enthalten sind. Dies wäre beispielsweise die Möglichkeit, dass

- mehrere Personen zusammen spielen und ein Gewinner ermittelt wird.
- auch der untere Teil der Kniffel Gewinnkarte ins Spiel einbezogen wird.
- Wertungen erst nach 3 Würfen erfolgen und Würfelwerte auf dem Tisch liegen bleiben.

Zusätzlich:

• erstellen Sie bitte einen weiteren Unterordner in ihrem Projektordner mit der Benennung "js".
• lagern Sie den Javascript-Code in eine externe Datei aus (Inhalt der Sitzung vom 17. bzw 18.12.19)
• Verbinden Sie die externe JS-Datei mit Ihrer Html-Datei. Überprüfen Sie dabei, in welcher Html-Datei welche JS-Datei notwendig ist.

8. Hausaufgabe

Formular

Bitte erstellen Sie eine neue Seite in ihrem Projekt mit dem bisherigen Aufbau (Container-Layout, Menü, Header) und fügen Sie ein Formular mit folgenden Feldern ein:

• Input-Feld mit dem Label "Anzahl" und dem Type "number"
• Auswahlliste mit den Möglichkeiten Bild, Audio und Video
• zwei zusammenhängende Radio-Buttons mit den Beschriftungen Student*in und Großverdiener*in
• einen Absende-Button mit beliebiger Aufschrift
• ein leeres P-Element mit einer id

Nun erstellen Sie eine JS-Funktion, die durch einen Klick auf den Absendebutton ausgelöst wird.

1. Die drei Medien (Bild, Audio und Video) haben beliebige, aber unterschiedliche Preise, die in einer switch-Anweisung festgelegt werden. Hierzu muss zuerst der Wert der gesamten Auswahlliste in einer Variablen gespeichert werden. Auf diese kann dann in der switch-Bedingung zugegriffen werden. Innerhalb der cases weisen Sie jedem Medium einen eigenen Preis zu und speichern diese Zahl in einer neuen Variable (zb preis). Hinweis: Für die cases können die jeweiligen Werte der option-Elemente genommen werden.
2. Wandeln Sie den Wert des Input-Feldes "Anzahl" in eine Zahl um (Stichwort parseInt()) und speichern Sie auch das in einer Variablen.
3. Rechnen Sie nun mithilfe der Variablen von "Anzahl" und "Preis" den zu zahlenden Betrag aus und speichern das Ergebnis in einer neuen Variablen.
4. Schauen Sie sich auf StackOverflow die beliebteste Lösung an (erkennbar an einem grünen Haken), übernehmen Sie die for-Schleife in Ihre Funktion und passen Sie diese an Ihre Radio-Buttons an. Hierbei wird überprüft, welcher Radio-Button aktiviert ist. Das Ergebnis dieser Schleife wird in einem alert ausgegeben. Wir möchten ihn allerdings in eine neue Variable speichern. Hinweis: Das name-Attribut muss bei beiden Radios gleich sein.
5. Erstellen Sie eine if/else-Bedingung, in der Sie überprüfen, ob die Variable aus der for-Schleife mit einem der Radio-Button-Werte übereinstimmt. Ist der Großverdiener aktiviert, soll der Betrag mit einer passenden Bezeichnung in dem leeren p-Element angezeigt werden, dass Sie zu Anfang erstellt haben. Ist der Student aktiviert, soll dort ein beliebiger Text angezeigt werden (zb "Für Studenten sind diese Medien kostenlos.").

Beispielbilder (nur Auszüge):

• Großverdiener*in
• Student*in

Hinweis: Achten Sie darauf, im Attribut "action" des Form-Elementes eine Raute (#) zu schreiben, da sonst das Formular abgeschickt und die Seite neu geladen wird, was wir in diesem Fall nicht wollen.

7. Hausaufgabe

1. Vervollständigen Sie bitte die Sitzungsaufgabe!
2. Erstellen Sie eine neue Seite mit dem bekannten Containerlayout und verlinken Sie sie mit den anderen Seiten ihres Projektes.
3. Erstellen Sie nun auf dieser Seite einen Taschenrechner, der folgende Spezifikationen erfüllt:
   • Die Zahlen, die gerechnet werden sollen, können in zwei Input-Felder geschrieben werden.
   • Zur Berechnung wird der Zahlenwert aus den Inputfeldern gelesen.
   • Die Berechnung erfolgt in den 4 Grundrechenarten (plus, minus, mal und geteilt).
   • Das Ergebnis wird in ein drittes Input-Feld geschrieben.

Hinweis: Die Werte von Input-Feldern werden in Strings (Zeichenketten) ausgelesen. Das heißt, wenn Sie nun zwei Zahlen addieren wollen, wird das Plus-Zeichen eventuell falsch interpretiert und fügt die beiden Zahlen einfach hintereinander zusammen. Um das zu umgehen können Sie mit parseInt() arbeiten. Mehr dazu hier: https://joergs-forum.de/in-javascript-addieren-statt-zusammenfuegen-t-2109-1.

6. Hausaufgabe

Wichtige Hinweise für die Hausaufgaben:

• Feedback für die Hausaufgaben gibt es nur bei einer Kontaktaufnahme über Discord oder Email, eine Nachricht bei Woms reicht dafür nicht aus.
• Auch wenn es eine Gruppenarbeit ist, muss die Hausaufgabe von beiden Personen in Woms geladen werden, da sonst aus technischen Gründen keine erfolgreiche Abgabe verbucht werden kann. Trotzdem kann auch jeder eine eigene Version einreichen.
• Alle nötigen Dateien müssen eingereicht werden. Das betrifft auch Bilder, die lokal eingebunden sind!

Bitte finden Sie die Fehler im 4. Rätsel.

1. Vervollständigen Sie die 5. Sitzungsaufgabe
Kopieren Sie die Sitzungsaufgabe an eine beliebige Stelle auf der Impressumsseite Ihres Projektes.

Hinweis: Zur Vereinfachung der Sitzungsaufgabe ist der Style auf der verlinkten Seite im Html-Dokument. In Ihrem Projekt müssen weiterhin alle Styleangaben ausgelagert sein!

2. Alert
Beim Öffnen irgendeiner Seite ihres Projektes erscheint IMMER ein Hinweis-Dialogfenster mit der Information: „Hier finden Sie die rechtlichen Hinweise der Webseite!“

3. Bedingte Anweisungen

1. Bitte erstellen Sie im <head> ein <script> Element ein und schreiben dort eine Funktion "deineEntscheidung()", die einen Entscheidungsdialog in Form eines Popup Fensters generiert (vgl if...else) und dann den Text in die Webseite einfügt.
   • Vergeben Sie dafür zwei beliebigen Bereichen im HTML-Dokument (beliebige Containerelemente) eine id.
   • Verwenden Sie diese, um mittels der Methoden document.getElementById('eineID').innerHTML bzw. document.getElementById('eineID').innerText dort Text einzufügen.
   • Verwenden Sie sinnvoll im einen Fall HTML-Code mit dem Element <h1> und anderen reinen Text.
   • Als Ergebnis soll jeweils (sprich, bei jeder Entscheidungsmöglichkeit) eine Überschrift und ein kurzer Text darunter auf der Webseite eingefügt werden, wenn die Seite geladen wird (vgl. HTML onload Event Attribute ). Achtung: Der Code soll mithilfe eines Eventhandlers durch die Funktion aufgerufen werden!
2. Schreiben Sie eine weitere Funktion in der Sie die User fragen, ob sie gerne ins Kino gehen. Im positiven Fall wird ein Link zum Kinoprogramm angezeigt, im negativen ein Link auf die Startseite von NETFLIX oder Amazon Prime oder ... . Überlegen Sie sich einen sprechenden Namen für die Funktion. Verwenden sie die Methode document.getElementById('eineID').innerHTML.
3. Diese Funktion aus Punkt 2 soll nun auf einer Webseite an zwei verschiedenen Stellen aufgerufen werden:
   • Fügen Sie ein passendes Bild ein und lösen Sie die Funktion aus, wenn mit der Maus über das Bild gefahren wird.
   • Verfassen Sie einen kurzen passenden Text und verwenden das Inline-Container-Element <span> , um ein Wort zu markieren. Dort fügen Sie einen beliebigen passenden Event ein (siehe HTML Event Attributes ) und lösen so die Funktion aus.

Sollten zu dieser Hausaufgabe Fragen oder Probleme bestehen, wenden Sie sich bitte an die Seminarbetreuung (Vera). Sie hilft Ihnen gerne weiter!

4. Taschenrechner
Bitte erstellen Sie eine neue Seite in ihrem Projekt mit dem bisherigen Aufbau (Container-Layout, Menü, Header) und fügen 4 einzelne Bilder mit Rechenzeichen (+, -, * und /) ein. Bei einem Klick auf eines der Bilder sollen über prompt zwei Zahlen abgefragt werden und mit der jeweiligen Grundrechenart verrechnet werden. Das Ergebnis soll auf der Html-Seite ausgegeben werden (Stichwort "Output" bei w3schools).

5. Hausaufgabe

Erneuter Hinweis: Wenn Sie über Ihre Hausaufgabeneinreichung eine Rückmeldung haben möchten, wenden Sie sich per Email oder Discord an die Seminarbetreuung! Ein Hinweis bei der Einreichung auf Woms reicht nicht aus.

1. Bitte suchen Sie die Fehler im 3. Rätsel der Woche!

2. Imagemap

Auf diesem Bild sind die Steinvorkommen des Brandberges dargestellt. Bitte integrieren Sie eine neue Unterseite in Ihr Projekt und fügen die Steinvorkommen des Brandberges als Image Map ein.

Markieren Sie zunächst die Legende der Karte so, dass man beim Klick darauf zusätzliche Informationen zu der Geologie des Brandberges erhält (z.B. Wikipedia) erhält.
Beim Mouse-Over soll ein entsprechender beschreibender Tooltip eingeblendet werden.
Erweitern Sie die Image Map um folgende Einträge mit Tooltip:

1. Quarz-Monzonit
2. Biotin-Granit
3. Metasedimente
4. Königstein
5. Vulkanit
6. mikroklinisierter Biotin-Hornblende-Granit
7. albitisierter Biotin-Granit

Überlegen Sie dazu, welche <area>-Shape dafür am besten geeignet sein könnte, jedoch müssen alle möglichen Formen (Poly, Circle, Rect) mindestens einmal genutzt werden. Versuchen Sie zusätzlich auch eine dreieckige Form für den Königstein zu verwenden.

Fügen Sie eine weitere Unterseite ein und erstellen auf dieser neuen Seite jeweils einen seperaten Textabschnitt mit entsprechender Überschrift für jedes markierte bzw. verlinkte Steinvorkommen auf der Imagemap des Brandberges. (Die Textabschnitte können Sie einfach von den verlinkten Seiten (siehe oben) kopieren und einfügen oder Sie nutzen eigene Texte) -> Musterseite

Verknüpfen Sie nun die einzelnen Links der jeweilig markierten Steinvorkommen der Imagemap mit den dazugehörigen Textabschnitten auf Ihrer Seite, sodass man beispielsweise bei einem Klick auf das Vorkommen eines Vulkanits direkt den Textabschnitt mit der Überschrift „Vulkanite“ auf der verwiesenen Unterseite angezeigt bekommt. -> Beispiel

Wichtig! Das Beispiel bzw die Musterseite entspricht keinem modernen Layout und dient nur zur Veranschauung der Aufgabe!

Tipp

Koordinaten können ohne weiteres mit einem Programm wie MS Paint ermittelt werden. Normalerweise werden die Koordinaten des Mauszeigers unten in der Statuszeile von Paint angezeigt. Achten Sie jedoch darauf, nicht das neue Paint 3D zu verwenden, sondern die alte Version. Diese erreichen Sie, indem Sie mit der rechten Maustaste auf das heruntergeladene Bild klicken und "Bearbeiten" auswählen. Mac-Nutzer können auf Programme wie Gimp ausweichen, um problemlos die Koordinaten herauszufinden.

3. Selbstständiges Arbeiten an der Webseite

Im nächsten Jahr soll ihr Projekt komplett auf das Brandberg-Thema umgestellt und an ein wissenschaftliches Publikum gerichtet werden. Jetzt können Sie jedoch schon damit anfangen, die Seite dahingehend zu bearbeiten und interessante Elemente einbauen, die Sie im späteren Verlauf weiter verwenden können.

Nachfolgend finden Sie einige Webseiten, auf denen Sie sich im Bereich CSS noch Ideen holen können:

• Responsives Design mit Prozentangaben
• Dropdown-Menüs
• Bilderslider mit CSS (Achtung, die Bildpfade fangen bei diesem Beispiel mit einem Backslash (/) an. Das funktioniert bei Ihnen nicht!)
• Buttons
• Videos und Audioclips einbinden
• Youtube-Videos einbinden

Achten Sie bitte darauf, dass die HTML Datei nur Strukturinformation enthält und somit ALLE Stylespezifikationen ausschließlich über die CSS- Datei implementiert werden!

4. Lokaler Server

Bitte installieren Sie einen lokalen Server (XAMPP / MAMP / ...) auf Ihrem privaten Rechner und rufen die neue Webseite nun über diesen auf. Halten Sie sich dabei an die Vorgehensweise auf der Sitzungsseite.

Wichtig: Bitte reichen Sie auf keinen Fall den gesamten htdocs-Ordner bei Woms ein. Nach wie vor wird nur der Projektordner mit allen benötigten Dateien abgegeben.